

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
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
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
I don't know. Just looking at the example template though, the disadvantages
seem huge.

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

