Node.js template showdown – 5 options compared

Matthew Nuzum —  — 6 Comments

Recently I was using a Node.js library that incorporated EJS and I wondered what factored into the decision to choose that template engine over some of the others. I realized that because of my familiarity with Mustache, when I started using Node.js I immediately started with Hogan.js (see my tutorial on how to supercharge Hogan with Express) and I hadn’t checked out the other popular options. What are the differences between Jade, EJS, Hogan, Handelbars and JSHTML? I’d never used most of them in a real project.

I decided it was time to change that, and figured that if I were going to do the research I might as well share the results with you. I thought I could just make one long post but wow it turned out to be long so I’ve chosen to split it into 5 separate articles, which I’m linking below. Before we get into the specifics, let me take a moment to explain my biases and tell you what I value so you can use my comparisons to make your own decisions.

My biases

First of all, I prefer template engines that discourage the use of logic in the templates themselves. I started doing serious web development with PHP 3 and in that era we didn’t separate our code from our markup very well. We’ve since learned how that can make it difficult to scale and manage non-trivial applications and I’ve embraced tools that limit my ability to do bad things.

Second, I happen to like HTML. I am very comfortable with it and I don’t highly value tools that shield me from it. That said, I was surprised at how beautifully concise and clean my templates were with Jade. I’ll get into details in the appropriate breakdown.

Last, I feel that we are nearing the point where client side templating will be as important as server side for web applications, therefore I see value in engines that can be easily repurposed in the browser as well as in Node.js.

You’ll see in the data I collected that I also considered if the template engines were being used in various other popular projects. For example, Handelbars is used by Ghost and EJS is used by Sails. Jade is the default choice for Express. I think that it’s important to consider the ecosystem and how well your work will integrate with the various other tools you select.

The end result of this is that I am seriously thinking about changing my preferred template engine from Mustache to Handlebars. Handlebars supports a few helpers modules that make conditional blocks a little more clear and flexible and includes better support for partials and template inheritance.

As I alluded to above, I was surprised at how much I liked Jade. While I was writing it I grumbled because it was so different than HTML, but when I was done I was stunned by how clean and easy to read the templates were. In-browser support is not as solid as Handlebars, and really, I like HTML, so I don’t see myself making the switch, but my eyes were opened and I grew to appreciate the benefits Jade offers.

Comparisons

Here are the details about each template framework:

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

Here’s my feature matrix I used while comparing.

Built into Express Allows logic in templates Encourages logic in templates Reuse templates client side Allows Bootstrap Integration IDE Support Partials Notes
Jade yes yes no No Yes Webstorm, sublime with add-in Yes + Layout Default for Express. Lots of add-ons available via npm. Documentation is incomplete but passable. Very clean syntax. Easily readable.
EJS yes yes yes yes Yes Webstorm, sublime with add-in No Default for Sails.js. Very messy syntax.
JSHTML yes but no yes no ??? ??? ??? No Appears to be built in but isn’t. Instead need jshtml-express. No partials support. Missing variable in template is fatal error. Website is outdated. Automated tests are failing. Difficult to find documentation. Seeks to be familar to .net developers.
Mustache yes (older version of hogan) no no yes yes Webstorm with plugin, sublime with plugin Yes Very popular client-side templating library, supported by many languages. Using logic-less templates can be frustrating at first
Handlebars no, use express3-handlebars no no yes yes Webstorm with plugin, sublime with plugin Yes + Layout Template engine used by Ghost. Very popular client side library, superset of Mustache. Supports an easier to understand if syntax for those who want minimal logic.
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 ✝
  • Faron

    As quoted, “I prefer template engines that discourage the use of logic in the templates themselves.” — did I understand you correctly with this?

    Scripting does not have static systematic approach because it is fluid, just like English when comparing with math. English have many many ways how to form a sentence about one very same object, meanwhile math doesn’t but, have rules in determine whether t’s right or wrong….period. (i.e. 2+2=4).

    Scripting is so fluid and open and you can write anything you want, as long as if output works, as we have console to show it (I couldn’t image living without it). With your quote, does you mean, you can put any logics into handlebars and is not a good thing because, we need some limitation and restriction in how we put logics in so that way we don’t scripting and end up going outside of the project scope?

  • александр

    EJS has include directive (i.e. for ‘partials’)

  • Jake Wilson

    You say that Handlebars.js doesn’t allow logic in templates but that is incorrect. If definitely supports if/then/else etc statements in templates.

  • Antonio Brandao

    Something is wrong in the comparison table regarding Jade. It is perfectly possible to use / reuse Jade templates in the client side. It’s actually really simple, using “jadeify”, a basic Browserify transform. I use Jade is all my projects, both server-side and client-side.