Hogan.js

Node.js template showdown: Mustache compared

Matthew Nuzum —  — Leave a comment

Mustache is described, simply, as “logicless templates.” The first time I used mustache I was pretty surprised at how minimalistic it was. And by surprised, I mean frustrated. You have extremely basic conditionals, an iterator loop and the ability to display information. There is no “if” (per se), no ability to call functions, mustache is not in any way a programming language.

You may think there is a lot missing, and there is, but this is not bad. It forces you to keep your logic all in one place, in the program. This increases the manageability of your code-base. It also allows Mustache to be easily ported to many programming languages. You can use it with Javascript, via Hogan.js, the library I used in this example, or Java, PHP, Ruby and numerous other languages.

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. There are multiple implementations of Mustache for Javascript. Twitter made a fast, capable and feature-rich version called Hogan.js. There is a version included in Express but I’ve found it to be limited. I’ve already written a tutorial on how to enable the newer version 2.0 and you can be sure that when the new 3.0 version is released, I’ll be revisiting it again.

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):

{{>head}}

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

{{>foot}}

I’ve seen a few template languages that use the “handlebars” syntax for denoting variables, for example, Django. You’ll see demonstrated here pretty much the full array of the template language. Version 2 of Hogan.js doesn’t have layouts (that comes with version 3 which includes Django-like template inheritance), it does include partials, which will meet most people’s needs. You simply place a greater-than symbol inside your curly brackets.

Then notice the hash symbol as seen in {{#hasData}}. This serves as both the IF and the LOOP of the language. Essentially, in the #hasData example, it looks for the existence of a variable to decide if it should proceed. Then {{variable}} will display a variable.

In the case of {{#data}} you can now loop. If the variable is a “truthy” javascript value then it will loop. In this case, #data is a javascript array and each element is an object that has properties called job, status and name.

I was surprised that I didn’t pick Mustache to be my favorite of the 5 libraries I’m comparing. In reality, after experimenting, I decided Handelbars.js was my favorite, but it is a minor quibble because Handlebars is compatible with Mustache and simply adds some enhancements.

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? Yes, but needs updated (neutral)
  • Allows logic in templates? No (good)
  • Encourages logic in templates? No (good)
  • Reusable client side? Yes (positive)
  • Allows bootstrap integration? Yes (good)
  • IDE support? Webstorm = yes, Sublime = with plugin
  • Partials support? Yes (good)
  • Other notes: Supported by many languages, hogan.js 2.0 reviewed here

Bottom line, would I recommend it: Yes.

I’ve also done the same comparison on Jade, EJS, JSHTML and Handlebars or check out 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.

If it helped, please share!Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

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 ✝