Latest Tweet

We all know server-side template engines like the popular, but outdated Smarty and newer engines like Twig from the popular Symfony2 framework. They are doing a great job in what they are intended for. Server-side templating. With the rise of light-weight AJAX-driven web applications, we have the opportunity to achieve a complete separation of presentation and business layer. No need to provide any markup server-side at all anymore, if a frontend is built entirely with client-side (JavaScript) templates.

Choosing The Right Template Engine

The title probably revealed the secret final choice already. But let’s have a look at why I’ve chosen doT.js as my favourite template engine. Before you read on, I would like to say, that many other engines like Mustache or Handlebars are also well suitable for most projects, but in this case we dig a little deeper.

Performance

One of the main reason, why I’ve selected doT.js is performance. While other libraries are focused on compatility or a large feature set, doT.js has a minimal feature set and gets the best results in current JavaScript engines like V8, which is also the core engine of Node. This is why the performance advantage is quite big in Chrome for example. For an additional boost, you can use precompiled templates as JS files.

Performance Benchmark

Library Independence

While JQuery is a very popular and great library, others like zepto.js are rising and are gaining attention at the moment. Because most of them are driven towards a small footprint and modularization, they might become a good alternative to JQuery in the future. Therefore, library independence can be a +1 for a template engine.

Feature Set & Footprint

doT.js is a tiny, small (2.7 KB) library, which provides just an essential set of features like conditionals, loops or partials. But for most cases, these features are absolutely sufficient.

Usage

First, load the doT.js library with your favourite script loader.

<script type="text/javascript" src="doT.js"></script> 

Compilation

You can either choose to compile your template into a method during runtime or use precompiled template methods in production.

var tmplString = "<h1>{{=it.title}}</h1>"; 
var tmpl = doT.template(tmplString);

Use the script tag to define those templates instead of a string (or precompilation), use JQuery or similar to read the template from the DOM using $(‘#headertmpl’).text().

<script id="headertmpl" type="text/x-dot-template"> 
<h1>{{=it.title}}</h1>
</script>

Evaluation

You can reuse the previously create template function tmpl as much as you want. Set the resulting text on your target element (e.g. with JQuery).

var data = { title: 'Yeah!' }; 
var text = tmpl(data);
$('.target').html(text);

Basics

To output a field from your data object, just use {{=it.fieldname}}.

<div>{{=it.title}}</div> 

Loops

{{~it.items :value:index}} 
<div>{{=value}}</div>
{{~}}

Conditionals

{{? it.name }} 
<div>{{=it.name}}</div>
{{??}}
<div>Unnamed</div>
{{?}}

Partials

For reusable snippets, you are able to define partials.

{{##def.snippet: 
<div>{{=it.name}}</div>
#}}

and to use the partial

{{#def.snippet}} 

Summary

With client-side templates, we’re finally able to completely separate markup from the server-side and create a Backend, an API and a matching Frontend, completely separated from each other. In addition to a performance boost and bandwith savings, future developments of your application will be a lot easier. Combine this technique with module-oriented frontend architectures based on TerrificJS or Backbone Aura to get the full advantage of this stack.

Reading

doT.js Tutorial by Laura Doktorova

blog comments powered by Disqus