Node.js template showdown: Jade compared

Matthew Nuzum —  — Leave a comment

According to the Jade website, “Jade is a terse and simple templating language with a strong focus on performance and powerful features.” Similar to Python, it uses indentation to help keep track of tag nesting which forces you to keep your markup looking clean. Because there are no closing tags, the end result is very concise. I suspect that if you used CoffeScript and Stylus, Jade would feel very comfortable.

Furthermore, it is the default template language enabled in new Express.js apps. Therefore it is commonly featured in beginners tutorials and documentation. At first glance I found it very confusing. The tutorial featured on the homepage is quite trivial, and therefore isn’t very representative of real-world work. However, there is decent documentation that you can dig into. You’ll find that much of the documentation focuses on standard HTML syntax and less on the dynamic capabilities.

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.

In order to get a feel 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.

Because of it’s syntax, Jade is a very unique choice. Let’s start by looking at an example view (view on Github):

extends layout

block content

  if data
      h1= title
        each person in data

The first thing you’ll notice is that Jade supports layouts, or template inheritance or partials, depending on what you want to call it. In this case, there is a master template named “layout” that can be used by other templates. They simply “extend” that template and then define “blocks” which will be injected into the appropriate region. In this case there is a single block called “content”.

We then check for the existence of a data set called “data” and if it exists we show some additional content. First, a div with class “container” and inside that an H1 where the variable “title” is shown. Then a UL where we loop through each element of data and return the person’s name.

Personally, I like HTML. I didn’t like the fact that Jade shielded me from it. However, after I was done, I was astounded at how clean and easy to read my templates were.

I thought it would be difficult to use Bootstrap with Jade but I was wrong. It turned out to be pretty trivial. However, the conciseness of Jade does show how verbose some of the class names in Bootstrap are. For example:

a.btn.btn-default(href="list", role="button") View details

If that doesn’t make sense, notice that it will create an <a> tag with two classes btn and btn-default and two attributes, href=”list” and role=”button”. The button text will say “View details.”

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 (good)
  • Allows logic in templates? Yes (neutral)
  • Encourages logic in templates? No (good)
  • Reusable client side? Not really, though there are some less-mature libraries you can use (negative)
  • Allows bootstrap integration? Yes (good)
  • IDE support? Webstorm = yes, Sublime = with plugin
  • Partials support? Yes (good)
  • Other notes: Lots of libraries in npm support and extend Jade, Documentation isn’t superb but isn’t bad

Bottom line, would I recommend it: Definitely.

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