Pithy.js
An internal DSL for generating HTML in JavaScript.
Examples
Basic elements
html;
Hello, world!
Loops etc.
Using Underscore.js or similar:
{ return html;} { return html;} ;
item one delete item two delete item three delete
Why use an internal DSL?
- It's a more convenient and safer alternative to string contatenation
- Very flexible, you can use all the power of JavaScript functions and control structures
- For small bits of HTML you might not want to switch contexts from code to a template
- Easier to debug than a templating engine
- You get full tool-chain support:
- editor support: syntax highlighting, code tools etc etc
- code analyzers: jslint, jshint
- testing/coverage tools
When to use?
- Consider using where you might currently use string concatenation
- Avoid using for large HTML documents or in places where speed is critical
- Good for small snippets used for client-side page updates
- Bad for generating huge amounts of HTML on the server
Usage
I like to alias the 'pithy' library as 'html':
var html = ;
You can then just use html.tagname
as a function to create the
appropriate element. Please note, you actually get a html.SafeString
object back, not a native JavaScript String. This might mess up your
isString() tests. If you have a workaround please send a pull-request.
There is also a html.escape() function for escaping HTML (returns a html.SafeString). It will not escape a value that is already a html.SafeString object.