Ruby Templating Engines: ERB vs Haml vs Slim

The Ruby on Rails framework follows the MVC pattern and lets you create views to render the HTML content in your web applications.

These views can be created with plain HTML or with a templating engine.

By default, Rails uses the Embedded Ruby or ERB templating engine. It lets you embed Ruby code directly in your HTML views.

ERB is not the only templating engine though. The other two popular engines are Haml and Slim.

Live dive into what makes them unique and the reasons for picking each one.

Table of Contents


ERB

I think of ERB as an extension of HTML that gives you access to special <% %> tags that let you add raw Ruby code to your views.

Your typical index.html would become index.html.erb.

This templating engine lets you sprinkle Ruby code into HTML like this:

<div class="title">
    <h1><%= @object.name %></h1>
</div>

HTML syntax is unchanged, and to insert dynamic Ruby code, you just start a tag with <% and end it with %>.

Common ERB Tags

Render Output

<%= %>

This will print the output into your HTML. This is why we used the = in the example earlier when we wanted to print the @object.name inside of our h1.

Again, it could look like this:

<h1><%= @object.name %></h1>

Execute Ruby

<% %>

This will execute the code within the tags. It's great for things like looping over a list of objects and can open and close a block like so:

<% @objects.each do |object| %>
   <h1><%= object.name %></h1>
<% end %>

Comments

<%# %>

This tag denotes a comment and will not render anything in your HTML. It matches Ruby's comment syntax by using a #.

<%# don't forget to use indexes in your database %>

There are a few other tags you can use but this should get you familiar with the basics.

That's really all there is to ERB.


Haml

Haml is named after HTML Abstraction Markup Language.

You would extend the filenames of your views in a way similar to ERB by appending the Haml extension like index.html.haml.

Otherwise, Haml is quite different from ERB. It really is an abstraction of HTML and unlike ERB, it does not support standard HTML syntax.

If we wanted to create the example above in Haml, it would look like this:

.title
  %h1= @object.name

It certainly is less verbose, but clearly looks nothing like HTML.

The HTML output would be unchanged though and would still resemble our original example.

Let's say @object.name evaluates to Foo, then the output from this Haml would look like this:

<div class="title">
    <h1>Foo</h1>
</div>

An important note about Haml, is that whitespace matters. This templating engine relies on whitespace to determine the structure of your elements. If you mess up the whitespace here, you're gonna have a bad day.


Slim

Slim is the last templating engine to cover. It's similar to Haml in that its syntax does not resemble HTML.

div(class="title")
  h1 = @object.name

Slim exists to offer an alternative templating engine that is less verbose than ERB but much faster than Haml.

It also relies on whitespace to evaluate the hierarchy of HTML elements.

The resulting HTML would be the same as the other examples:

<div class="title">
    <h1>Foo</h1>
</div>


Performance

ERB is and will always be faster than the alternative templating engines. It wins in every benchmark and does not require any third-party gems.

Every case study will be rendering different code and as a result you will see different results when comparing benchmarks.

Many experiments paint Slim as being about 8x faster than Haml.

But ERB is usually still much faster than Slim.


Pros & Cons

All three of these templating engines are widely used and as a result there is no clear winner. So let's go over the pros and cons for each and talk about the tradeoffs.

ERB

Pros

  • fastest parsing performance of all templating engines
  • supports plain HTML syntax
  • not dependent on whitespace

Cons

  • more verbose
  • need to be familiar with HTML

Haml

Pros

  • DRY and less verbose than ERB

Cons

  • slowest performance of all templating engines
  • does not support regular HTML syntax
  • syntax is whitespace dependent

Slim

Pros

  • faster than Haml
  • highly configurable

Cons

  • slower than ERB
  • does not support regular HTML syntax
  • syntax is whitespace dependent


So which templating engine is the best?

Ultimately, all three are widely supported and used so it does come down to personal preference and what you value most as a developer and as a team.

When bringing on new developers I would expect more people to be familiar with HTML syntax than Haml or Slim, and so ERB doesn't have as steep of a learning curve.

ERB is also the fastest.

But, Haml and Slim can provide potentially cleaner and safer code. You don't have to dwell on a missing opening or closing bracket. Although whitespace is a whole new problem too.

I think abstracting away HTML with Haml or Slim do provide cleaner-looking concise code, but in the long run the additional learning curve and maintenance make it less appealing as your team grows. So there, I said it. ERB is my favorite.

Resources
Interview Tips
Up your interview skills
Tips and tricks for all developers
About Me

Hey, I'm Nicholas Dill.

I help people become better software developers with daily tips, tricks, and advice.

Level up
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.