Pure Javascript HTML Templating for jQuery and Node.js
json2html.com
json2html.com
HTML templates buy you:
- Access to HTML/XML parsers (syntax highlighters, validators, transformers, linters, etc.)
- Readability by non-technical designers.
- Readability by Google, bing, et al.
- Separation of concern.
Pure Javascript is pretty much a terrible language to write templates in, for the simple reason that writing long strings is a pain in the ass. AngularJS does client-side templating The Right Way as far as I'm concerned.
Disclaimer: I'm a Google engineer who uses Angular.
1. AngularJS directives do not seem to conform to valid HTML. Does this matter to Google from a search perspective? I realize that single-page applications quite often have other SEO problems, but valid non DSL HTML templates seem like they would be of value for all the reasons you outline above.
2. I quite often see the following type of examples in an AngularJS tutorials. How is this different from Handlebars or Mustache? This still ties my template directly to AngularJS, no? Also, this is usually not understood by designers tools.
<pane title="Localization">
Date: {{ '2012-04-01' | date:'fullDate' }} <br>
Currency: {{ 123456 | currency }} <br>
Number: {{ 98765.4321 | number }} <br>
</pane>
2. All templates are tied to a compiler - there's really no getting around that. I'd have to disagree that that format is imcomprehensible to non technical designers, especially when compared to purely JS options.
That said, it's perfectly reasonable to rewrite that template as follows (which should play more nicely with existing tools):
<pane title="Localization"
data-pane-date="2012-04-01"
data-pane-date-format="fullDate"
data-pane-currency="123456"
data-pane-number="98765.4321" />My vote for this sort of thing has always gone to Plates: https://github.com/flatiron/plates
There should be ZERO logic in your templates — Mustache doesn't count. Bind JSON to HTML through a mapping of data to IDs/class names/data attributes, and your templates will be more re-usable and render faster.
Below is a T.js template written in Coffeescript. <code> tournamentResultTemplate = (data) -> return unless data.result
[ "div.detail"
[ "table"
[ "tr"
["td", "Result"]
["td", data.result]
]
if data.defeated
[ "tr"
["td", "Defeated"]
["td", data.defeated]
]
if data.lost_to
[ "tr"
["td", "Lost to"]
["td", data.lost_to]
]
]
]