I have been working quite a bit with node and have had a chance to use Handlebars quite frequently. While it is an implementation of Mustache, it goes a bit further in providing some helpers like if/each/list/with etc along with the ability to register custom helpers you need. Since then, I have heard about Hogan which is almost equivalent but not. I wanted to just write down what I have discovered while investigating these.

Mustache

Mustache is a logic-less templating language that has found implementation in various languages, including Ruby, Python, PHP, C++ and JavaScript. The Official JavaScript implementation is called mustache.js.

Mustache.js does not compile the templates ahead of time. As a result it is significantly slower than the other two implementations of Mustache. Mustache also strips white spaces from your template (thnx @jdalton - note the github urls for these libs seem to 404 occassionally).

Handlebars

Handlebars.js provides an implementation of Mustache with some extra features.

The biggest feature is that the templates are compiled before use. This means, the template is not parsed right when the template needs to be applied, but rather parsed as Handlebars.compile(<template source>) first and data is then passed to this compiled template for rendering. This speeds up the rendering of data significantly compared to Mustache.

Handlebars.js, contrary to Mustache’s philosophy of being logic-less, also provides some basic extensions to make it easy to manipulate the data that is used on the templates. You can also register helpers that can do more manipulations of data like so:

Handlebars.registerHelper('hyphenate', function(tag) {
  return tag.split(' ').join('-');
});

So, if you want one of the input data objects to render differently, you don’t have to add a new object representing the new rendering (or manipulate the rendered output afterwards). You can simply work with the helper to change based on the input.

Hogan

Hogan.js is a library that is a straightforward implementation of mustache. Like Handlebars, Hogan is also compiled ahead of data being sent to render which makes it faster than Mustache. But unlike Handlebars, Hogan does not provide any extra features.

Hogan.js seems to have better performance on most browsers. Hogan is a great alternative to Mustache.js for minimalists who simply want a template to use and nothing more.

What about others?

I was most taken in by Mustache, which is why I did this research to see what are the best Mustache implementations out there. But there are certainly other JavaScript template options available (including one provided by underscore).

Tim Branyen is working on Combyne which is similar to Mustache but provides additional features that are similar to those found in Liquid.

Adam Mark has Markup.js out, which is similar to mustache in some ways, but works on non-IE browsers. In addition it provides piping out of the box and has a low footprint (1.8K). However, I do not like the syntax for piping argument (>), nor the ambiguous list piping. It doesn’t precompile templates either, but seems to have some ideas on working with language strings. Definitely worth a look.

What do I use?

I use Handlebars. Mainly, the performance boost of Hogan does not seem that significant for me given the opportunities of using helpers for simple data manipulation. My typical use cases seem to always have some client-side data manipulation that hogan does not provide for.