On Haml and jQuery

03 May 2009

Someone recently posted a polemic on Hacker News deriding Haml. The author slammed it for being unnecessary abstraction.

Well, that was me until about the 3rd time I played around with Haml. Then it occurred to me how much noise I got rid of by using it, after which I was hooked, especially since I use jQuery quite a bit. jQuery + Haml is a very close impedance match and a real pleasure to use for development.

Take the following Haml that defines a div with an id of “foo” along with a span with class “bar” and content “Hello World”:

  #foo
  %span.bar Hello World

If I wanted to hide those elements, I’d write the following jQuery in a separate file:

  $('#foo').hide();
  $('span.bar').hide();
  $('#foo').hide();

  $('span.bar').hide();



That’s really powerful stuff. The Haml syntax for defining elements looks exactly like the CSS3-style selectors used by jQuery, so much so that I often cut and paste my Haml markup into my javascript files.