02.10.07

How about some HAML for lunch?

by Chris Abad

I wanted to see what all the fuss was about, so I decided to give HAML a try. HAML (HTML Abstraction Markup Language) is a replacement for your RHTML view templates in a Rails application. The goal of HAML is to provide a very simple and DRY way to produce properly structured XHTML .

Rails gives us a few pieces of magic which really help us cut down on our code. Both migrations and RJS templates are perfect examples of this. They help you to write boring, repetitive code in a fun and easy syntax. As a designer, I particularly feel there are two area that have received the short end of the “innovation stick”: XHTML and CSS . HAML looks to bring the XHTML side of things up to speed.

The Good

Overall, I have to say I’ve been thoroughly impressed with HAML . The syntax took a whole 10 minutes to pick up (although, I am very familiar with CSS , which probably helped). I decided to take one of our applications and convert all the views to HAML and it went of without a hitch.

Minimalist Syntax

The syntax is about as minimalist as you can get. To convert an RHTML template to HAML , you pretty much delete every repetitive or unnecessary character in your RHTML template, and there you go! Now you have HAML . Here’s a sample:

<table class="data">
<tr>
<th class="left">Campaign</th>
<th>Visitors</th>
<th>Leads</th>
<th class="right">Conversion Rate</th>
<th>&nbsp;</th>
</tr>
<%= render :partial => 'campaign', :collection => @campaigns %>
</table>

Here’s the same snippet in HAML :

%table.data %tr %th.left Campaign %th Visitors %th Leads %th.right Conversion Rate %th &nbsp; = render :partial => 'campaign', :collection => @campaigns

Whitespace Active

HAML is “whitespace active.” This enables you to cut down on a significant portion of your code because you don’t have to close your tags. HAML closes your tags for you based on your indentation.

Beautiful XHTML

This has got to be one of my favorite part about HAML . The final output of your XHTML is always perfectly formatted with proper indentation, even across your partials! Aside from appeasing the OCD in us all, this makes it much easier when you’re scanning through your source trying to find a particular section. HAML is even smart enough to automatically lines at 50 characters for the ultimate in XHTML -viewing pleasure.

The Not-So-Good

Maybe I just haven’t put enough miles on HAML yet, but it was difficult to find negatives to using it. Nonetheless, there were a few.

Inline Tags

HAML doesn’t really have great support for code with a lot of inline tags such as <br /><em> or <strong>. Let’s say you want to generate this code:

<p>
This is <strong>strong</strong> text, and this is <em>emphsized</em> text.
</p>

You can either type out the html tags, or do this:

%p
This is
%strong strong
text, and this is
%em emphasized
text

Not really ideal. On a positive note, HAML will soon enable “filters.” This feature is currently available in trunk. Using the textile filter, you could do this:

:textile
This is *strong* text, and this is _emphasized_ text.

Whitespace Active

There’s also a slight negative to the whitespace active aspect of HAML . It’s because this will probably be the biggest change for most Rails developers. None of the languages currently used in Rails utilize the whitespace. Just be careful, that’s all. Be sure to set your editor up properly (soft tabs, 2 spaces). Showing invisibles helps a lot to make sure you don’t have any “tabs” sneaking in there.

Conclusion

I’m probably only 3-4 hours into my HAML experience so far (not including writing this blog post), but I don’t see myself turning back. If you want to give it a shot, just install the plugin into your Rails application:

./script/plugin install svn://hamptoncatlin.com/haml/tags/stable

The great thing about it is you can mix your HAML templates and your RHTML templates, so just start off with one RHTML view template and convert it to HAML . Happy coding!

Comments

There are no comments.

Leave a Comment