Screencasts

Introduction to Haml

Show Notes

Haml is the brain child of Hampton Catlin. In this screencast we’re going to show how Haml can simplify your markup and speed up front-end development.

As developers we naturally gravitate towards products or languages that help keep our work clean and organized. Haml is just one of those things. Watch this screencast to see why!

Links

You may also be interested in our Introduction to Sass screencast.

Script

Today we’re going to show how Haml can simplify your markup and speed up front-end development.

Haml is the brain child of Hampton Catlin and stands for HTML Abstraction Markup Language.

As developers we naturally gravitate towards products or languages that help keep our work clean and organized.

Most of us prefer webkit-based browsers that render things properly, and can even let you get by with a couple mistakes here and there, but sometimes we still have to hack code for hours just to get a site to render correctly in IE6.

When given the choice we try to use one of the increasing number of RESTful JSON services for data, but sometimes we still have to deal with XML and crazy SOAP services.

We all prefer the jobs where we get to create a fresh site with clean markup, but sometimes we still have to maintain a site written in an obtrusive version of Dreamweaver.

So being a developer today means tolerating the ugly code when we have to, but we should always be proactively searching for new ways to write beautiful, simple code.

So why Haml? Let’s start by looking at a piece of HTML

HTML is XML’s ugly cousin.

Like XML, HTML is a nested data structure.

<div id="profile">
  <div class="left column">
    <div id="date"> 11 November 2010 </div>
    <div id="address"> 1 Infinite Loop </div>
  </div>
  <div class="right column">
    <div id="email"> steve@apple.com </div>
    <div id="bio"> Makes magical tablets </div>
  </div>
</div>

If we write our HTML in an indented style like this, the closing tags aren’t really needed, because the new lines and indentations can also help us understand where each element is nested in the DOM.

<div id="profile">
  <div class="left column">
    <div id="date"> 11 November 2010
    <div id="address"> 1 Infinite Loop

  <div class="right column">
    <div id="email"> steve@apple.com
    <div id="bio"> Makes magical tablets

Lets tuck that right column up to the left column, just for niceness.

<div id="profile">
  <div class="left column">
    <div id="date"> 11 November 2010
    <div id="address"> 1 Infinite Loop
  <div class="right column">
    <div id="email"> steve@apple.com
    <div id="bio"> Makes magical tablets

Ok, done.

OK now lets make it a little more beautiful. Let’s remove the less-than and greater-thans.

%div(id="profile")
  %div(class="left column”)
    %div(id="date") 11 November 2010
    %div(id="address") 1 Infinite Loop
  %div(class="right column")
    %div(id="email") steve@apple.com
    %div(id="bio") Makes magical tablets

OK, now let’s remove the id-equals and the class-equals. Basically, we’re getting rid of all the things that are repeated.

%div#profile
  %div.left.column
    %div#date 11 November 2010
    %div#address 1 Infinite Loop
  %div.right.column
    %div#email steve@apple.com
    %div#bio Makes magical tablets

So now it’s starting to look simple, and more like CSS.

But as you can see we’re still repeating %div. Lets assume that if an element isn’t specified it’s just a div.

#profile
  .left.column
    #date 11 November 2010
    #address 1 Infinite Loop
  .right.column
    #email steve@apple.com
    #bio Makes magical tablets

So this is what we’re left with... Haml!

When using Haml as a templating language, it looks like this:

#profile
  .left.column
    #date= print_date
    #address= user.address
  .right.column
    #email= user.email
    #bio= user.bio

To render a ruby expression, all you have to do is put the equal sign after the selector.

As you can see from this, it’s a lot like CSS. So Haml makes the syntax for writing your markup more in line with what you’re familiar with from CSS.

You don’t have to remember to remove the # symbol from IDs, or the period before classes. If you’re already speaking in CSS selectors with CSS and jQuery, you’re already talking in HAML.

So Haml has...meaning.

Your markup is semantic.

It’s DRY. Your not repeating yourself.

It’s concise and to the point.

You can focus on what matters. There’s very little switching between contexts in writing your markup for content and style.

You’re not worrying about closing tags or the mechanics of HTML. You can write your markup much quicker. And it’s beautiful. Look...

<div id="profile">
  <div class="left column">
    <div id="date"> 11 November 2010 </div>
    <div id="address"> 1 Infinite Loop </div>
  </div>
  <div class="right column">
    <div id="email"> steve@apple.com </div>
    <div id="bio"> Makes magical tablets. </div>
  </div>
</div>
#profile
  .left.column
    #date 11 November 2010
    #address 1 Infinite Loop
  .right.column
    #email steve@apple.com
    #bio Makes magical tablets

And as you can see Haml is easier to read. This is especially true when it comes to ERB.

It’s a lot easier to see where the user’s address is in the Haml, compared to the ERB.

<div id="profile">
  <div class="left column">
    <div id="date"><%= print_date %></div>
    <div id="address"><%= user.address %></div>
  </div>
  <div class="right column">
    <div id="email"><%= user.email %></div>
    <div id="bio"><%= user.bio %></div>
  </div>
</div>
#profile
  .left.column
    #date= print_date
    #address= user.address
  .right.column
    #email= user.email
    #bio= user.bio

Haml is currently implemented in a number of languages. Ruby, Python, Lua, .NET, Scala, PHP and even Java.

Syntax

Most of us haven’t memorised the XHTML Transitional or Strict doctype declaration.

Thankfully Haml does all of the proper conversion for you, so you only need remember the Haml 3-exclamation-mark declaration - !!!.

The percent sign before a line indicates an element, %html means the html tag, %head for the head tag, and so forth.

If your want to add attributes to an html tag, you include a structure like this. It’s very similar to HTML.

Elements that don’t have the element specified are assumed to be divs.

Haml relies on indenting for formatting, and you indent with two spaces. Add an additional two for every nested level of tags. We have to do this because HTML is a nested data structure, like XML. The indentation of the document is translated into HTML’s opening and closing tags. This is necessary for the page’s construction, and also for search engine spiders to interpret meaning. Installation & Usage

To get started with Haml, you simply need to install it by running gem install haml.

You can use Haml as a command line tool to output HTML.

In it’s command line form, Haml outputs as XHTML transitional by default.

So when we type in haml index.haml (which is our input) index.html (which is our desired output file) we see this file generated.

However you can pass in an argument using -f with the format you’d like to use for output.

haml -f html5 index.haml index.html

As you can see an HTML5 document has been generated.

You can also give haml a try online without installing it, by visiting haml-lang.com/try.html

We hope you’ve enjoyed having a taste of what Haml has to offer, and hopefully it will be another tool in your arsenal that can be used in your upcoming web development projects.

We’ll be covering Haml usage in upcoming Screencasts using Sinatra and Rails 3... So we hope to see you then!

← Latest Episodes

blog comments powered by Disqus