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.
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.
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.|