DOM tree based JavaScript template engines

Question

I am looking for a new Javascript template engine to replace old jQuery Template for my client side templating needs.

I'd prefer approach where the template engine deals with DOM trees instead of text strings and later dumps the content of the cooked string into innerHTML. This is better performance wise and I find DOM manipulation more proper way of constructing more of DOM tree.

What options I do have for Javascript template engine which would directly create DOM trees instead of being text based engines? I like Mustache.js's logicless approach, but it seems to operate on strings only. Native jQuery integration would also be a nice feature.

Answer 1

Transparency:

https://github.com/leonidas/transparency/

PURE:

http://beebole.com/pure/documentation/

Plates

https://github.com/flatiron/plates

Why all this:

http://blog.nodejitsu.com/micro-templates-are-dead

Answer 2

Distal

http://code.google.com/p/distal

Answer 3

soma-template is a new one.

Pure DOM manipulation, a lot of features, natural syntax, fully extensible with other libraries such as underscore.string, function calls with parameters, helpers, watchers. Capability to update only some nodes if needed, templates inside the DOM itself.

http://soundstep.github.com/soma-template/

Answer 4

This is good comparison about 7 famous JS template engine: http://blog.stevensanderson.com/2012/08/01/rich-javascript-applications-the-seven-frameworks-throne-of-js-2012/

Answer 5

I've recently created DOM templating engine inspired by PURE and Transparency.

It supports loops, conditions and much more.

Take a look at doc: http://code.meta-platform.com/metajs/components/template/

Don't be affraid that MetaJS is big library, templating lib can be used standalone.

Short example:

HTML:

<div id="tpl">
    <ul id="tasks">
        <li>
            <span class="task"></span>
            <span class="due-date"></span>
        </li>
    </ul>
</div>

Define template:

var tpl = Meta.Template(document.getElementById('tpl'), {
    "ul#tasks li": $__repeat("tasks", {
        ".task":        "task",
        ".due-date":    $__date("d. m. Y", "due_date"),
        "@":            $__attrIf("completed", "complete")
    })
});

Render template:

tpl({
    tasks: [
        {
            task: "Write concept",
            due_date: new Date(2015, 3, 22, 0, 0, 0, 0),
            complete: true
        }, {
            task: "Consult with customer",
            due_date: new Date(2015, 3, 25, 0, 0, 0, 0),
            complete: false
        }
    ]
});

Result:

<div id="tpl">

    <ul id="tasks">
        <li>
            <span class="task" completed>Write concept</span>
            <span class="due-date">22. 3. 2015</span>
        </li>
        <li>
            <span class="task">Consult with customer</span>
            <span class="due-date">25. 3. 2015</span>
        </li>
    </ul>

</div>

Answer 6

Take a look at Monkberry DOM template engine.

It is really small (just 1,5kB gzipped), dependency free library, server compiling, one-way data binding, and it's dramatically fast!

Here example of template and generated code:

<div>
  <h1>{{ title }}</h1>
  <p>
    {{ text }}
  </p>
</div>

Will generate:

var div = document.createElement('div');
var h1 = document.createElement('h1');
var p = document.createElement('p');

div.appendChild(h1);
div.appendChild(p);

   ...

view.update = function (data) {
  h1.textContent = data.title;
  p.textContent = data.text;
};

Monkberry supports if, for and custom tags. And has a lot of rendering optimizations. Templates can be rendered on server with webpack, browserify or cli.

• monkberry.js.org

Answer 7

dna.js is a templating engine that clones DOM elements (https://dnajs.org).

Example template for a book:

<h1>Featured Books</h1>
<div id=book class=dna-template>
   <div>Title:  <span>{{title}}</span></div>
   <div>Author: <cite>{{author}}</cite></div>
</div>

Call to insert a copy of the template into the DOM:

dna.clone('book', { title: 'The DOM', author: 'Jan' });

Resulting HTML:

<h1>Featured Books</h1>
<div class=book>
   <div>Title:  <span>The DOM</span></div>
   <div>Author: <cite>Jan</cite></div>
</div>

Fiddle with a sample "To-Do Application":
https://jsfiddle.net/uLrc7kmp

dna.js was created precisely to avoid constructing and passing around string templates (I'm the project maintainer).

Answer 8

Free MIT-licensed jQuery DNA Template with superpowers (you can re-apply the changed data to the same HTML structure to update UI on any data change...)

https://github.com/webdevelopers-eu/jquery-dna-template/

Answer 9

What sort of sugar are you looking for? The raw DOM api always worked fine for me. If you are really adopting this idea that the templating engines are no good in terms of performance, don't use innerHTML if you want to efficiently build up a DOM tree. What I tend to do is just create elements manually using document.createElement. My templates are created by writing helper functions that create collection of nodes and populate them with the data by setting the .innerText property. I can then cache the references to nodes which I wish to refer to frequently so that I don't have to traverse the DOM tree to find these nodes again.