Going Haml

<html>
<head>
<title>Ruby Programming</title>
</head>
<body>

<h1>Don't Repeat Yourself</h1>

</body>
</html>

Moving from the world of Ruby programming to the world of HTML is no easy transition. I would guess that moving to HTML from anywhere, for that matter, is no easy transition. But Ruby especially – known for its syntactic sugar – clashes with the repetitive, cumbersome tags and unwieldy composition of HTML.

When Embedded Ruby (ERB) is added to the mix, it becomes even less appealing to look at and harder to parse (visually – i.e. with your eyeballs). Experienced Web developers, especially those who work on Rails projects, probably don’t feel this way. But as a newcomer to software programming, I felt and still feel a little overwhelmed when I have to mix the three different syntaxes in one document.

Of course, this is all by design. The World Wide Web needs standards and conventions. And HTML has to account for almost everything you see on a website. If you have a website with a lot of stuff, you’re going to need a lot of HTML. If there was a better way, I would assume that the ‘best practices’ of the Web would be guided in that direction. So far, it doesn’t seem like ERB and HTML are going away any time soon.

BUT WHAT IF THERE WAS A BETTER WAY?

Haml has more than 45.5 million downloads on rubygems.org

If you haven’t met, let me introduce you to Haml (HTML abstraction markup language).

Haml is a Ruby gem that I recently stumbled upon while learning Ruby on Rails. Already mesmerized by the magic of Rails, I first breezed past a mention of Haml while searching for something else. Once it dawned on me that I might have found something else of interest, I immediately looked back in my browser history to retrieve what I had quickly passed by.

COOL, BUT WHAT IS IT?

Haml is an abstraction of HTML written in Ruby. That means with Haml, you can build a static or dynamic web app with fewer characters and fewer lines of code than with HTML. I’ll be honest though, I have a sparse understanding of how Haml actually works. We could continue with my unsophisticated explanation, or we could just go straight to the source:

Haml is a markup language that’s used to cleanly and simply describe the HTML of any web document without the use of inline code. Haml functions as a replacement for inline page templating systems such as PHP, ASP, and ERB, the templating language used in most Ruby on Rails applications. However, Haml avoids the need for explicitly coding HTML into the template, because it itself is a description of the HTML, with some code to generate dynamic content.

The Haml reference

But is it simpler? Well, if you take the time to teach yourself and become skilled in its ways, I’d have to say yes, Haml is simpler. Gone are the cumbersome tags, which have to be opened and closed. Gone are the ‘less than’ and ‘greater than’ symbols ( < > ) which litter every ERB and HTML document. Instead you get several single-symbol tags like %, #, -, and =.

SWEET, CAN WE SEE SOME EXAMPLES?

We’ll go back and forth from ERB/HTML to Haml, starting with this contrived HTML:

<body>Hi, I am HTML.</body>

…which turns into this in Haml:

%body Hi, I am Haml.

ERB:

<%= @erb  %>

…turns into this:

= @haml

Ok, on to the real examples. Let’s start with something short and sweet:

<html>
<head>
<title>Hello</title>
</head>
<body>

<h1>My name is Inigo Montoya</h1>
<h2>You killed my father</h2>
<h3>Prepare to die</h3>

</body>
</html>

Not too bad. But look at how Haml handles this:

%html
%head
%title Hello
%body

%h1 My name is Inigo Montoya
%h2 You killed my father
%h3 Prepare to die

Wow, that’s some funky looking code. But that’s all it takes. You don’t need the closing tags! I could get used to this.

WHAT ABOUT THE ATTRIBUTES?

HTML wouldn’t be as functional without all those attributes you can sprinkle into tags:

<strong class="code" id="message">I'm bold.</strong>

But Haml’s got its own, Ruby-like way of handling attributes:

%strong{class:"code", id:"message"} I'm also bold.

And when you get really good, you can render the same content with this special syntax:

%strong.code#message I'm bold too.

For my money, though, Haml is most useful when it comes to shortening ERB. Consider this code sample with ERB and HTML:

<h1><%= @artist.name %></h1>

<h2><%= pluralize(@artist.songs.count, "song") %></h2>

<ul>
  <% @artist.songs.each do |song| %>
    <li><%= link_to song.title, song %></li>
    <% end %>
</ul>

…and the equivalent using Haml:

%h1= @artist.name

%h2= pluralize(@artist.songs.count, "song")

%ul
  = @artist.songs.each do |song|
    %li= link_to song.title, song

Alright, one last example. How do we make a form?

<h1>Add an Artist</h1>

<%= form_for @artist  do |f| %>
  <%= f.label :name %>
  <%= f.text_field :name %>

  <%= f.submit %>
<% end %>

…but in Haml…

%h1 Add an artist

= form_for @artist do |f|
  = f.label :name
  = f.text_field :name

  = f.submit

REALLY THOUGH?

Do I expect Haml to gain mainstream adoption? No. Am I going to continue learning Haml? Probably not. In terms of my priorities list, at least for the moment, I’d say learning Haml is actually toward the bottom. It just doesn’t make sense right now, before I even have the slightest grip on Rails, to go off and learn another language. But who knows, maybe some day I will work on a project that uses Haml. Or maybe I will even create my own app and decide Haml’s crispness is something I’d like to incorporate into my codebase.

I encourage you to take a little time and try it. I was skeptical at first but I can’t deny its allure. Whether you’re feeling the urge to learn, or you’re just a little bit curious, why not give it a shot?

For more information about Haml, check out these links:
Haml
The Haml reference
Learn X in Y Minutes

Leave a comment