CODEWITHSUNDEEP
javascriptjquerytemplatesdommustache
Mikko Ohtamaa
Mikko Ohtamaa

Reputation: 83788

DOM tree based JavaScript template engines

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.

Upvotes: 20

Views: 7953

Answers (9)

elixon
elixon

Reputation: 1292

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/

Upvotes: 0

Dem Pilafian
Dem Pilafian

Reputation: 5976

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

todo

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

Upvotes: 1

Anton Medvedev
Anton Medvedev

Reputation: 3668

Take a look at Monkberry DOM template engine. Monkberry JavaScript 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.

Upvotes: 1

Jiř&#237; H&#253;bek
Jiř&#237; H&#253;bek

Reputation: 381

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>

Upvotes: 1

KimKha
KimKha

Reputation: 4510

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/

Upvotes: 1

Soundstep
Soundstep

Reputation: 618

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/

Upvotes: 2

Kernel James
Kernel James

Reputation: 4064

Distal

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

Upvotes: 4

Mikko Ohtamaa
Mikko Ohtamaa

Reputation: 83788

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

Upvotes: 12

Matt Esch
Matt Esch

Reputation: 22956

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.

Upvotes: -1

Related Questions