Tech Insights
Asitha Bandara
June 11, 2018

Haml and Rails Are a Match Made in Heaven – Here’s Why

Haml and Rails Are a Match Made in Heaven – Here’s Why

Before I tell you why Haml is so good with Rails, let mesay something about ERB - the default template system for Rails.

We embed Ruby into HTML using ERB just like we do inASP, JSP and PHP. For example, this is how we embed Ruby in an html.erb file:

https://gist.github.com/CreativeSoftware99/262ff1e94a30468497a459ffecb562c1

As you can see in the code segment, I created a basic formin Rails using a table layout.

I used this delimiter to embed Ruby within the HTMLfile:

<% %>
<%=%>

It really annoys me when there is a huge code in an ERBfile, so I started using Haml instead.

Haml is a popular alternative to ERB, and a really goodone at that. Haml will eliminate repetitive tags in HTML and ultimately give mea beautiful code that is easy to read.

 

Indentation is the key with Haml, and it makes for awell-structured code. True, Rails giving you indentation errors can put youoff, but it won’t happen – at least not often – if you are careful.

 

This is the above ERB code, but using Haml:

https://gist.github.com/CreativeSoftware99/7ef7b9899c7169336f8c58c0bb4d7fee

I think you can clearly see the difference just byglancing at the code.

Now you see why I like using Haml! Plus, it is supereasy to handle my view files in Rails now. Besides readability, you have tocommend it for cleanliness and production speed.

 

                                                                                                                                                   Formore information check out this link: Haml.info

 

This Is How I Add Haml into a Project

1. First add the GEM file.

Click here to readabout Haml

gem 'haml', '~> 4.0', '>= 4.0.7'

or

gem install haml -v 4.0.7

2. Do a bundle install:

$bundle install

3. Done!

Now anytime you create a controller after bundle installRails will generate view in the format for Haml.

Move from HTML to Haml

After adding Haml I had an issue. I couldn’t figure outhow to convert my existing html.erb to html.haml. Then I discovered thisplatform that does the job:

Convert HTML to Haml

Pretty easy!

If you need to convert the whole ERB project to a Hamlproject, you can use a Shell script, but please note that this is something Ihaven’t done yet. Here’s more info on it:

 

Is there a bashcommand for converting an entire directory to HAML from HTML?

for file in $(find . -type f -name \*.html.erb); do
html2haml-e ${file} "$(dirname ${file})/$(basename ${file} .erb).haml";
done

or use this gem to convert:

haml/html2haml

Tutorial

Here are some basics:

. ----> for class
#----> for id
%----> for tags
-----> ruby
=----> output in ruby

And here are some examples, so you can get a betteridea:

ERB

<strong><%= item.title %></strong>

Haml

%strong{class: "code", id: "message"}Hello, World!

If you want to add div with a class “content”

.content
Anythinginside the div

The same thing with an ID

#content
Anythinginside the div

ERB

<div class='item' id='item<%= item.id %>'><%= item.body %> </div>

Haml

.item{:id => "item#{item.id}"}= item.body

So consider using Haml next time… Actually, start today!:)