Happy Templates with HAML
May 16th, 2007
The first time I saw HAML it weirded me out. That was a couple of months ago and now I can't live without it. Such is the power of Hampton...
HAML can look slight odd when you first see it. Rightly or wrongly, a lot of people feel that it has a python-esque feel due to it's use of indentation. However, if you put your worries aside, HAML can help you to produce clean, manageable and concise templates. Just looking at my HAML templates, give me the same sense of satisfaction as looking at a 2 line ActiveRecord class - does everyone have that or is it just me?
Anyway - What's all the fuss about?
Take a simple HTML document:
<html>
<head>
<title>Hello</title>
</head>
<body>
<h1>Hello to you all</h1>
<p>
This is a test page.
</p>
</body>
</html>
Look familiar? Most of us accept our fate to repeat ourselves, writing two tags for each block of HTML we need. Sure, editors can help us out with typing but it's not exactly easy on the eyes.
Let's look at the equivalent in HAML:
%html
%head
%title Hello
%body
%h1 Hello to you all
%p This is a test page
That's it. A '%' symbol creates an HTML tag. 2 spaces are used to indent the code into sub-elements.
The basic philosophy behind HAML is that everything in your template should mean something. On the latest Ruby on Rails Podcast, Hampton explained that he took a full HTML document and cut out all the repetition.
For example, most of us use a lot of divs in our markup:
<div id="wrapper">Content</div>
You could do this in HAML for the above div:
%div#wrapper Content
However, you'd still end up with tons of divs around the template - not very DRY. HAML has a shortcut for this commonly used markup:
#wrapper Content
It works for CSS classes too:
.menu Menu Content
produces:
<div class="menu">
Menu Content
</div>
How cool is that?
It's available as a Ruby gem and there's a Rails plugin available through the website.
Once you've installed the Rails plugin, you can just name your templates .haml and they'll automatically be rendered via HAML. You can also find syntax highlighting for all the main editors here.
I hope I've managed to convert you all. If not, you've probably not actually tried it properly, so pick a template, convert and I guarantee you'll be changed forever.
4 Responses to “Happy Templates with HAML”
Sorry, comments are closed for this article.
May 16th, 2007 at 01:26 PM Definitely inspiring. Will give it a try!
May 18th, 2007 at 12:31 AM
I've used Haml in the past, and found that it just gets in my way. It's slower than ERB, adds needless overhead, and breaks down for anything other than structure.
It looks nice at first, and tends to shine in simple examples like you've given here, but that's about it. As soon as you start using it more extensively, you realize that it's better to stick closer to the problem domain, which is to say, HTML.
May 18th, 2007 at 08:00 AM
Phillip: Sorry to hear you've not had such a great experience.
I think a lot is about personal preference. I feel that Haml does the same job as HTML - that is, structure the output of my data - but more concisly.
In terms of speed, I'm happy to take the hit in exchange for beautiful templates.
June 6th, 2007 at 06:02 PM
I've had a very different experience. I work on a pretty large web application. We switched entirely to using Haml and never looked back. We had written a lot of huge views with RHTML, and now we've written a lot of even bigger ones with Haml. Vastly easier to deal with the Haml ones. I think the benefits are actually much less obvious in small views/project.
WRT speed, the current stable version of Haml is ~ 3x slower than ERB. The current trunk version is ~ 1.7x slower than ERB. There is optimization in the works that should bring it to being about the same speed, hopefully by the end of this month. For my own project, I hacked around on the engine and did a proof of concept that ran 2x faster than ERB by throwing away all the work to make the output HTML pretty. There is no reason to think you will always incur a performance penalty just because the input template doesn't look exactly like HTML.