Tech Talks: Haml In Rails
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
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.
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 = .
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.
Example of a Table
The table displays the name and age using embedded ruby in erb tags, <% %>, and there are lots of closing tags </ >.
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.
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!
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.