HAML: HTML Abstraction Markup Language

Recently, I got to learn about HAML for supporting my Rails Application and I found out some very interesting facts which I wanted to share with you guys. The learning experience was excellent and now I want to make sure the sharing experience is excellent too. Hope you will catch it easily! Okay, so here we go and some very basic stuff about HAML would be, HAML stands for HTML Abstraction Markup Language. It is a new template engine for Ruby on Rails. It is a replacement for the RHTML templates which we are so used to in rails applications.

The principles of HAML are that the markup should be beautiful, markup should be DRY (Don’t Repeat Yourself) and markup should be indented. Hope this is not rocket science.

Rails “embedded Ruby” by default i.e., .erb files describe HTML output with some necessary Ruby code to generate the dynamic parts of a page. HAML does the same but it takes a minimalist approach when it comes to the syntax. White space rules in HAML are very strict. Nesting is handled by indentation. In HAML the tags begin with % and there is no need to close them. They are self closed by indentation. id=”abc” will be just #abc and class=”abc” will be .abc div is the default tag and for all others, we have to use %tag <%= Some ruby code%> will be just =some ruby code in HAML. For loops <% some code%> will become -some code in HAML. Syntax : !!! – doctype specifier: e.g. !!! Strict Inserts an HTML DOCTYPE or XML declaration. Default is XHTML 1.0 % – element specifier, e.g. %h1: Wraps everything following in the same line *or* nested in following indented lines with open/close ‘element’ tags. # – id specifier: e.g. #main or %div#main Sets an ‘id’ attribute on an element. If %element is not specified, creates an implied ‘div’ element. . – class specifier: e.g. .error or %li.error Sets a ‘class’ attribute on an element. If %element is not specified, creates an implied ‘div’ element. Classes can be chained with multiple periods. {} – attributes: e.g. %input{:name => “title”, :length => “30”} Sets attributes on an element, taking either Ruby hash key/value pairs or one or more Ruby methods which return a hash. / (at end of tag definition) – self-closing tag: e.g. %br/

Specifies a self-closing tag. (Some tags are self-closed by default.) / (at start of line) – comment: e.g. / Here there be tigers. Creates an HTML comment from the content in the same line or the one nested beneath. – escape characte: e.g. . (to render a period at the start of a line) Allows ‘special’ characters from this list to be rendered as plain text. = – Ruby expression: e.g. %h1= @content.title or = @content.title Works just like the Erb = marker: the Ruby expression following it is evaluated and its result inserted into the document. May follow a tag or stand in a line by itself. – – Ruby non-printing code: e.g. – for content in @contents do Works just like the Erb – marker: the Ruby expression is evaluated but no output goes into the document. Primarily used for flow control and the quirky Rails form_for syntax. == – Ruby interpolated string: e.g. %h1== Now editing #{@content.title} Works just like = followed by a double-quoted string. Content is treated as literal with Ruby variable substitutions. -# – Silent comment, e.g. -# The users are all idiots. Content is never output. In HAML, there is no need to write the DOCTYPE, we can include it with the help of !!! and !!!XML tags.

The simplicity is that the RHTML version have about 261 tokens compared to HAML version which has just about 117 tokens. For example, the equivalent of the following html code <h1>HAML is a templating engine,Mona</h1> in ERB will be <h1>HAML is a templating engine,<%= @name%></h1>

Can be written as the following in HAML %h1 = “HAML is a templating engine,#{@name}” Installation is quite simple, you can either install it by downloading the plugin or by gem installation. $ sudo gem install haml #haml -rails I just took a file from an existing project i.e., .erb file and renamed it to have a .haml extension. This is my old .erb file : <center> <table cellspacing=”5″ cellpadding=”5″> <tbody> <tr> <td> <ul> <li> <%= link_to @story.name, @story.link %></li> </ul> </td> </tr> </tbody> </table> <%= link_to “Add New story”, :action =>’new’ %> </center> and here is my new .haml file: %center %table{:cellpadding=>5,:cellspacing=>5} %tr %td %ul %li= link_to @story.name, @story.link = link_to “Add New story”, :action =>’new’

Noticed something?

14 lines were reduced to 7 lines and it looks beautiful too

So, lets make some very beautifully coded rails applications.

Get in touch with us.