Getting Started with HAML on Rails

The HAML syntax is like installing all the software updates on your computer: at first it seems like upgrading is going to take forever and it's not worth it, but once you're up to date the time saved pays for itself and you could never imagine going back to your old ways. 

You can also learn a ton from the official HAML reference, but consider this a cheatsheet to bootstrap your proficiency and get started with some of the major use cases. 

The .html.haml view file extension is an alternative to the .html.erb format in Ruby on Rails and as you'll see here, it's much faster and easier to use once you've achieved a baseline level of familiarity. Let's look at some basic examples of simple scaffolded views using HAML instead of ERB. 

TAGS

Heading tags are pretty simple in ERB, but they get even easier in HAML as you'll never have to close a tag again. Just use the % sign at the beginning, followed by the name of the tag. 

ERB: <h1>Welcome To The Show</h1> 

HAML: %h1= "Welcome To The Show"

If you're dealing with instance variables within your app, you can even ditch the quotes necessary to print text: 

ERB: <p> @post.title </p>

HAML: %p= @post.title

LOOPS

The best part about learning to write loops in HAML is that you'll never get that "syntax error, unexpected end-of-input, expecting keyword_end" error message again. 

ERB:
<% @notes.each do |note| %> 
    <h2><%= note.title %></h2>
    <p><%= note.content %></p>
<% end %> 

HAML: 
- @notes.each do |note| 
    %h2= note.title
    %p= note.content

If you're someone who is always forgetting those pesky <% end %> blocks and closing tags in HTML, then HAML is definitely for you! 

DIVS

Working with divs in HAML is devilishly simple, just a period before the class name and HAML will interpret it as a div. Check out how much we can slim down this code example. 

ERB:
<div class="header">
    <div class="wrapper"> 
        <%= @course.teacher %> 
    </div> 
</div> 

HAML: 
.header 
    .wrapper 
        = @course.teacher

Extrapolated over the course of a large mark-up or view file, your fingers will begin thanking you for all the extra work they're not doing. 

NESTING

The last and most important thing to remember if you're switching over from ERB to HAML is to properly space nested attributes. ERB is more forgiving in this instance; if you've got one indent off in HAML the entire page will be compiled incorrectly and likely throw an error.  

Another great way to get an error is to forget to add the HAML gem in the first place, so if you're building a rails app make sure you throw it into the Gemfile when you get started using HAML. Good luck with HAML and let me know if you have any questions or comments below!