HTML Templating - Moustache vs Handlebars vs DIY

Alright so lately templating has been carrying a lot of motion. To my surprise though jQuery has stopped active development of their Templating Plugin. Prior to the jQuery v1.5 release there was active development on their end to provide a templating solution which would be released as a part of the jQuery core. The template solution was still in beta as a plugin and jQuery is abandoning it. Despite being in beta this is still a useful tool.

There are a two major templating libraries I have come across: Mustache.js and Handlebars.js

Mustache

Mustache is widely used across a multitude of languages (Ruby, JavaScript, Python, Erlang, PHP, Perl, Objective-C, Java, .NET, Android, C++, Go, Lua, ooc, ActionScript, ColdFusion, Scala, Clojure, Fantom, CoffeeScript, D, and Node.js.)

Mustache also claims to be logic-less however they do provide one option similar to Handlebars. There is some inherent logic going on using which can denote where one would like looped display of data to occur. So if one has a JavaScript Object like below.

  var album = {
    title: “Dark Side of the Moon”,
    tracks : [
      {
        name: “Speak To Me”,
        duration: “1:05”
      },
      {
        name: “Breathe (In The Air)”,
        duration: “2:50”
      },
      {
        name: “On The Run”,
        duration: “3:46”
      }
    ]
  }

So the following HandleBars markup would yield the respective output:

{{#track}}
<b>{{name}} - {{duration}}</b>
{{/track}}

Output:

<b>Speak To Me - 1:05</b>
<b>Breathe (In The Air) - 2:50</b>
<b>On The Run - 3:46</b>

As a framework that claims to be logic less that seems like a bit of logic to me. Basically this feature allows one to avoid looping through repetitive data.

Handlebars (preferred)

Handlebars does everything mustache does but provides more logic. Iterations may be done through objects and arrays. Conditional statements may be made as well. So I see no problem introducing logic. As this is a templating library the which is written in the markup the logic is for loading content so I see no real detriment to using this small amount of logic in our mark up. Markup is semantic and contextual anyway, yes!?! In HTML5 logical attributes such as the required attribute exist as well which applies browser logic which used to be done in JavaScript as well. So templating logic is following this trend.

So when it comes down to a templating framework I will choose handlebars as the application of logic and semantics line up with my opinions. This is also a very small library (72.5KB Dev - 40KB Minified).

When templates are only needed for a few edge cases and a large number of replaces aren’t going to occur. The desired result can be done manually as well with a very minimal amount of code. If there is a large number of templates and a ton of dynamically generated content then handlebars is the more powerful and elegant solution which offers conditionals and looping natively inside one’s template.

Do It Yourself

Alright so this is a really simple concept and uses the same technique both HandleBars and Moustache use minus the framework specific features both offer. So to keep it super simple one creates their template in the same manner by putting the template markup in a non-executing script tag. The tag is not run/executed if the type attribute is changed to a non-standard value. I like to use the following. Since the type isn’t set to text/javascript it will not be run as such. Then throw in the desired markup and place in delimiters with double curly braces (same as HandleBars and Moustache). So if I want a simple template for an article the template would look like the following:

<script id="article-template" type="text/template">
  <article>
    <h2>{{title}}</h2>
    <p>{{text}}</p>
  </article>
</script>

The id is put in to easily grab this template in my JavaScript. An id is fine because we aren’t using the id for styling so we don’t need to worry about specificity and we aren’t going to duplicate templates (as the whole point of templates is to duplicate code less). Once we have all the markup available in the javascript we can just replace our delimiters using the replace function with a regular expression in it and pass through anything (such as content from a json file).

var $articleTemplate = $("#article-template");
var newContent = $articleTemplate
  .html()
  .replace(/{{header}}/gi, header)
  .replace(/{{body}}/gi, body);
$contentArea.html(newContent);

Links:

http://handlebarsjs.com/

http://mustache.github.io/

https://github.com/jquery/jquery-tmpl