Pure Javascript HTML Templating for jQuery and Node.js

[seebrown]

http://json2html.com

[djtriptych]

There are major wins for client-side templating in general, but I don't quite see the market for pure-js templates.

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.

[heme → djtriptych]

I keep seeing "pure html templates" in many comments about AngularJS, but they don't seem to be completely "pure" from my perspective. Couple of questions for you...

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>

Not saying JSON templates are better; they look extremely hard to maintain. The Transparency project (http://leonidas.github.io/transparency/) does work with pure HTML templates, but it is just a rendering engine and not part of a larger framework.

[djtriptych → heme]

1. Angular directives CAN but are not required to conform to valid HTML. All directives can be declared in HTML via a data-ng-xxx attribute if your app needs to maintain valid HTML.

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" />

[straws]

You're still mirroring the structure of HTML/XML in your json documents though, which is a pain for large templates. Still feels like you're writing Artisanal Hand-rolled JSON.

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.

[gcao]

Interesting project. I feel it is similar to https://github.com/gcao/T.js - my little Javascript template engine. However IMHO, json2html is too verbose for large document, and T.js is concise and provides some nice features(e.g. layout, attributes as hash etc).

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]
        ]
    ]
  ]

</code>

[pfraze]

What's the advantage of JSON templates over HTML templates?

[untog → pfraze]

I don't know. Just looking at the example template though, the disadvantages seem huge.

[seebrown → pfraze]

no need to compile & can have jquery events embedded

[daniloassis → pfraze]

IMHO, none.

[Myrmornis]

There's a typo in the description sentence: "json2html is an open source javascript library that uses on JSON templates...". Should be "...that uses JSON...".