Tech Talks: Haml In Rails

January 27, 2017
Vanessa Bastien

As a junior developer, I found that if I was going to stay programming in Rails, I was going to need to know haml. I have come across haml in four different project within two months of my graduation at LEARN academy and I am under the impression I will see more haml being a Ruby on Rails developer.

I first saw a haml document in a friend’s project he had built. He said it was a language to replace html tags using indentation. Though I could kind of understand the code, I wanted to know about this markup. Since then, I have helped many other junior developers learn about haml because it was in their internship projects or code challenges.

My advice, LEARN HAML if you are going to be a Rails developer!

It’s clean, simple and you’ll see it in future projects.

What is Haml?

Haml is Html abstraction markup language. Yes, that is a mouth full but that is exactly what it is. Haml takes away the Html tags and replaces it as indented, very clean and easy to read markup. What does indentation have to do with any of this? Haml uses indentation instead of end tags. So while Html will guide you from one side of the screen to the next with open and close divs, Haml will only have a “%” sign instead of div tags. This causes the document to be more organized and have a lot less tags.

Haml focuses on cleanliness, readability, and production speed. It is a templating engine for ruby on rails that replaces erb files of html, to embed ruby without all the markup. Haml implements rails templates with the .haml extension instead of the .erb extension with html.

To add haml into your project,

add the the gem to your Gemfile:

gem ‘haml’, ‘~> 4.0’, ‘>= 4.0.7’

Or install straight on the commandline

gem install haml

https://rubygems.org/gems/haml/versions/4.0.7

Comparison between html and haml differences

As you saw above, a div is defined a little differently. As for classes and Ids, they are defined like they are in CSS, with a . and # inside documents and ruby code is implemented with a = instead of the erb tags <% %>.

Lets see what the differences are between html and haml next to each other so that it is easier to see.

Examples from a project

Let’s look at examples of actual code where you can see the difference between a form and table in html vs haml.

_form.html.erb

Example of a form

We can see that the form has inputs for a name and age. Embedded Ruby code is within erb tags, <% %>, and classes are defined within a div and labeled with class = .

_form.html.haml

Example of same form

The form takes a name and age, embedded ruby code with = , no erb tags, classes are defined with only a . , and the div does not need to be defined.

index.html.erb

Example of a Table

The table displays the name and age using embedded ruby in erb tags, <% %>, and there are lots of closing tags </ >.

index.html.haml

Example of same tableThis table also displays the name and age using embedded ruby code. However it uses = instead of erb tags. You can already see the major loss of closing tag

*Notice how the table is set up. The tbody is on the outside, tr is indented inside the tbody and the tds are indented inside of the trs. If elements are not properly indented or lined up, the code will break.

Javascript and Haml

You can pass ruby variables easily to javascript and you can place javascript directly into a haml file if it is small and simple.This is an alert message showing string interpolation. I adding the ruby variable to pull the name of the hippo that was submitted in the form. The colon : in front of javascript is letting the file know it is javascript within the file. Though many people will use separate .js files to put their javascript in, if it is needed to put directly into the html.haml file, this is how you do so.

Things that will go wrong

Haml will break if it is not properly indented or spaced correctly.

Example of a nesting error

Thanks to rails, we can see where exactly things are broken and why!

Resources:

If you would like to learn more about haml, these are the resources that I found to help me

I use Atom as my text editor and the language-haml package is provided for installing and would highly recommend for any Atom users.

Sitepoint

https://www.sitepoint.com/an-introduction-to-haml/

Haml.com

http://haml.info/docs/yardoc/file.REFERENCE.html

Github