Handlebars.js

Node.js Template showdown: Handlebars compared

Matthew Nuzum —  — 3 Comments

“Handlebars” is a nickname for a fancy mustache. This pretty well embodies how Handlebars.js is a superset of the Mustache template library. Superset means that it has all the features of Mustache plus some extras. Like Mustache, Handlebars is a logicless template library. If you use a logicless template system after using tools like ASP or PHP you may feel there is a lot missing. It takes a little adjusting to, and one nice thing about Handlebars vs Mustache is that it makes the transition a little easier and more graceful.

Prior to my research for writing this series, Mustache was my favorite. I do still highly recommend it, but now I will be switching my work to using Handlebars.js. It has everything I like about Mustache, but it has a little better Javascript support, especially on the server side, and the conditional syntax is a little easier to use.

By the way, this is one part of a 5 piece series, so if you want to explore other options, don’t forget to visit the series start where I explain the biases and summary information and link to all of the tutorials.

One reason I’d not spent much time with Handlebars.js in the past is because, as the name implies, it’s primarily a Javascript template library. When I did my last round of reviews, nearly 2 years ago, I was still writing a lot of Python and Mustache supports multiple platforms better.

Since then, I’ve focused my efforts on Javascript and I’ve realized that I can gain productivity by using a library that is also focused on Javascript. In the upcoming year I plan to use Sails.js more (which uses yucky EJS) and it seems that Handlebars can be slipped in there without too much difficulty.

In order to help everyone get a feel for the engine I wrote a quick application. It is based on Bootstrap and is rendered entirely server side. You can download my source code for the example app on Github. Let’s start by looking at an example view (view on Github):

  {{#if data}}
    <div>
      <h1> {{title}} </h1>
      <ul>
      	{{#data}}
            <li title="job: {{job}} status: {{status}}">
          	{{name}}
          </li>
          {{/data}}
      </ul>
    </div>
  {{/if}}

Here you see pretty much all the essential elements you’ll need to be productive with Handlebars. It starts with an #if block, to see if the data variable exists. Then it displays the {{title}} variable then begins to loop over the items in the data array. Notice that each item of the array is an object that has the properties job, status and name. For example, data[0].name.

Pretty simple!

Handlebars can do more, especially if you create block helpers, which essentially are javascript functions that can help you process data. I haven’t had to do this, and considering that I’m coming from Mustache, where I’ve been forced to push my code back down into my view layer, I don’t foresee needing it anytime soon.

If you use the excellent express3-handlebars module you’ll not only get partials support, but you’ll get layout support as well. This gives you the ability to extend a template (as in template inheritance in Django). I feel this makes your code very clean and maintainable. See the example app to reuse my Bootstrap layout for Handlebars.

Also, if you are exploring the popular Ghost blogging platform, you’ll find it also uses Handlebars.js.

The documentation is good, up to date and filled with examples. Of the five libraries I’ve tested, it was the most helpful and complete.

Definitely check out the code for a working example that you can experiment with and extend. Here is a run-down of the criteria I considered when doing my evaluation:

  • Built into Express? No, but easy to add (negative)
  • Allows logic in templates? No (positive)
  • Encourages logic in templates? No (positive)
  • Reusable client side? Yes (positive)
  • Allows bootstrap integration? Yes (positive)
  • IDE support? Webstorm = yes, Sublime = with plugin
  • Partials support? Yes and layouts (positive)
  • Other notes: great documentation

Bottom line, would I recommend it: Yes.

I’ve also done the same comparison on Jade, EJS, JSHTML and Mustache or checkout the series overview.

If you find this helpful, please share on your favorite social network! If you have suggestions or feedback, please leave a comment.

Matthew Nuzum

Posts Twitter Facebook

Web guy, big thinker, loves to talk and write. Front end web, mobile and UX developer for John Deere ISG. My projects: @dsmwebgeeks @tekrs @squaretap ✝
  • The Real Web Guy

    No more ejs now that i have handlebars.js.

  • Faron

    Excellent discussion. After finding this website a while ago, and I ended up finding myself going to your website for references and discreet thoughts. My scenario as a programmer is similar as yours. I came from the section of strong use of PHP +MySQL and never had an interest to dive into JavaScript because it was “too complicated” to get it.

    Until the buzz of node.js which got my attention last year, I decided to give it a shot and dove into it. After swimming around with JavaScript and node.js – I realized that I should have started with JavaScript long time ago. My main reason for the switch is because server-side scripting in JavaScript is now possible – and node.js is the reason for it.

    Now, my question regarding this discussion: as per your research and pro/con chart, I am trying to understand the scenario on this item: Encourages logic in templates :: if it is not presented, it is seen as positive. Why is that perspective positive?

    Thanks dude!
    ~Faron