The Differences Between Jade, Haml, and Slim

Web developers have grown accustomed to the various tools for CSS preprocessing – a very popular subject at the moment. But HTML templating tools have only recently gained mass attention from frontend developers.

The online editor CodePen actually supports Haml, Slim, and Jade, along with Markdown. All of these languages build upon HTML specifications while shortening the code required to build a layout.

macbook haml syntax photo


For this post I’d like to focus on the 3 most used templating languages and explain the differences between them. Markdown is just a simplistic means of writing comments with stylized content, but the others are detailed pre-processed languages that can be used to build full-scale websites quicker and more accurately than traditional HTML.

HTML Templating Languages in Detail

Templating languages were invented to create dynamic content from static HTML. For example, Handlebars is an open source JavaScript library that can be paired with HTML. It creates a unique method of generating content that’s both easy to read and manipulate.

The HTML code languages in this post are based on raw HTML. They’re used to simplify the coding process for frontend developers who need to complete their work in less time. For example, take a peek at this CodePen snippet to see Haml in action.

haml html codepen syntax

Notice that not only is the code shortened, but it also has small bits of logic. The small line that reads each do |r| is a good example. Anyone who understands traditional HTML is going to have a tough time reading this gobbledygook.

But the true beauty of dynamic HTML is the simplicity found beyond the complexity. Yes it will take time and practice to learn a new language – but it doesn’t take as long as you’d think. And the power that you acquire from working in a templating language is inconceivable to the traditional HTML coder.

The Basics of Jade

Let’s start off with one of the classics known as Jade. This language runs through Node.js but it does not require your website to run Node. The jade files are simply compiled through Node as a service or extension of HTML.

Most people use Jade as a means of handling backend solutions on the frontend. What I mean is that traditional HTML needs to push content out to a server for it to be processed by Node or PHP or whatever.

Jade can include embedded code snippets which are processed at runtime, so there’s less back-and-forth between the server.

codepen jade syntax example

If you have no interest in learning Node.js then you can simply run Jade files through the platform as a compiler. This would save you a lot of time with closing tags and extra syntax requirements in traditional HTML.

If you want to learn how to write in Jade then take a look at this introductory tutorial. It should cover the basics and get you started on the right path.

Haml vs. Slim

The reason I’ve lumped these two together is because they work on the same engine. Haml and Slim both run on top of the Ruby framework and can be included with a Ruby on Rails webapp.

But neither of these languages actually require you to build a website in Ruby. You just need Ruby installed on your computer to use the Haml or Slim gem as a processor.

haml coding open source platform

Haml is perhaps more well-known as it gets a significant amount of press from developers. It has a slightly different syntax with quick methods for adding classes/IDs and other attributes.

slim code open source html

On the other hand, Slim is just as great with basically all of the same features. The Slim syntax does not require as many symbols and many people feel that it looks a little cleaner. Honestly it comes down to personal preference, but there are two things that make Slim jump out to Ruby developers:

  • Slim is about 8 times faster than Haml
  • Slim supports HTTP streaming

Honestly neither of these points are vital when it comes to basic HTML coding. If you intend on building a full scalable webapp then you might need to reconsider, but just for saving yourself a bit of time Haml and Slim are both great options.

Which Should You Choose?

In truth HTML is perfect if you just need a simple website. But if you’re getting into more complicated projects a templating language is great – especially if you already use SCSS or LESS.

All templating languages require time so expect to set aside practice sessions. Ultimately these are all great choices and your decision should be based on which processor you feel most comfortable using. If you like Ruby then Haml is a great choice. If you like Node.js then Jade is also fantastic.

One other consideration is your reaction to the syntax itself. Perhaps you read Slim code and just really like how it looks. In this case I say go with Slim.

HTML templating languages are mostly similar and perform very similar actions. The differences ultimately come down to personal preference and in the end you’re always compiling back to HTML, so the output should always be identical.

Jake Rocheleau

Jake is a freelance writer and web developer. He writes articles for numerous blogs on freelancing, Wordpress, CSS3, and jQuery. You can find him all throughout Google and follow his tweets @<a href="">jakerocheleau</a>. Connect with Jake on <a href="">Google +</a>

No Comments

Sorry, the comment form is closed at this time.