Haml

Short description: Computer code templating system

Haml

Paradigm	Template engine
Designed by	Hampton Catlin
Developers	Natalie Weizenbaum (past), Norman Clarke, Matt Wildig, Akira Matsuda, Tee Parham
Implementation language	Ruby
OS	Cross-platform
License	MIT License and Unspace Interactive
Filename extensions	.haml
Website	haml.info

Haml (HTML Abstraction Markup Language) is a templating system that is designed to avoid writing inline code in a web document and make the HTML cleaner. Haml gives you the flexibility to have some dynamic content in HTML. Similar to other template systems like eRuby, Haml also embeds some code that gets executed during runtime and generates HTML code in order to provide some dynamic content. In order to run Haml code, files need to have a .haml extension. These files are similar to .erb or .eRuby files, which also help embed Ruby code while developing a web application.

While parsing coding comments, Haml uses the same rules as Ruby 1.9 or later. Haml understands only ASCII-compatible encodings like UTF-8 but not UTF-16 or UTF-32 because these are not compatible with ASCII.

Haml can be used at the command line, as a separate Ruby module, or in a Ruby on Rails application.

History

Haml was originally introduced by Hampton Catlin with its initial release in 2006 and his work was taken up by a few other people. His motive was to make HTML simpler, cleaner, and easier to use. Since 2006, it has been revised several times, and newer versions have been released. Until 2012, Natalie Weizenbaum was the primary maintainer of Haml, followed by Norman Clarke until 2015. Natalie worked on making Haml usable in Ruby applications, while the branding and design were done by Nick Walsh.

Birth of a Frustration:

• Haml was born out of Hampton Catlin's frustration with the "heavy" nature of traditional HTML and its templating languages like ERB. He felt web development had advanced leaps and bounds, but template writing remained clunky.

Concise Experiment:

• Catlin set out on an experiment: what if we could condense and simplify HTML using whitespace and symbols? This resulted in the foundation of Haml, where tags and attributes are expressed in a more succinct manner.

Early Adopter and Refinement:

• Unspace Interactive, Catlin's company, became early adopters, using Haml for several production-level websites. The entire team found it superior to ERB and switched completely.

Community Contributions and Growth:

• While Catlin laid the groundwork, other individuals made significant contributions. Natalie Weizenbaum became the primary developer and architect, tirelessly fixing bugs, improving performance, writing documentation, and implementing new features. Nick Walsh contributed to branding and design.

Version history

Version 2.2.0 was released in July 2009 with support for Ruby 1.9 and Rails 2.0 or above. Version 3.0.0 was released in May 2010, adding support for Rails 3 and some performance improvements. The fourth major version broke compatibility with previous versions, only supporting Rails 3 and Ruby 1.8.7 or above, and marked the switch to semantic versioning. Several amendments like increasing the performance, fixing a few warnings, compatibility with latest versions of Rails, fixes in the documentation, and many more were made in the Haml 4 series. Version 5.0.0 was released in April 2017. It supports Ruby 2.0.0 or above and drops compatibility with Rails 3. A 'trace' option, which helps users to perform tracing on Haml template, has been added.

Features

Four principles were involved in development of Haml.

User-friendly markup

Markup language is user-friendly if it adheres to following features:

• Easy to understand the language
• Ease of use (Implementation)

DRY

Markup language should adhere to the Don't repeat yourself (DRY) principle. It should:

• Avoid unnecessary repetitions
• Focus on clean code

Well-indented

Markup language with good indentation improves appearance, making it easy to read for readers and also to determine where a given element starts and ends.

Clear structure

Markup language with a clear structure will help in code maintenance and logical understanding of final result. It is unclear whether Haml offers any differential advantage in this regard.

Examples

Haml markup is similar to CSS in syntax. For example, Haml has the same dot . representation for classes as CSS does, making it easy for developers to use this markup.

"Hello, World!"

Haml as a command-line tool

The following are equivalent as HAML recognises CSS selectors:

%p{:class => "sample", :id => "welcome"} Hello, World!

%p.sample#welcome Hello, World!

These render to the following HTML code:

<p class="sample" id="welcome">Hello, World!</p>

Haml as an add-on for Ruby on Rails

To use Haml with Ruby, the Ruby Gemfile should include this line:

gem 'haml'

Similar to eRuby, Haml also can access local variables (declared within same file in Ruby code). This example uses a sample Ruby controller file.

• file: app/controllers/messages_controller.rb

  class MessagesController < ApplicationController

 def index
   @message = "Hello, World!"
 end

end

• file: app/views/messages/index.html.haml

  #welcome

%p= @message

This renders to:

<div id="welcome">
    <p>Hello, World!</p>
</div>

Haml as a Ruby module

To use Haml independent of Rails and ActionView, install haml gem, include it in Gemfile and simply import [Usage: require 'haml'] it in Ruby script or invoke Ruby interpreter with -rubygems flag.

welcome = Haml::Engine.new("%p Hello, World!")
welcome.render

Output:

<p>Hello, World!</p>

Haml::Engine is a Haml class.

Basic example

Haml uses whitespace indentation (two spaces) for tag nesting and scope. This acts as a replacement for the open-end tag pairs, making it DRY and cleaner. The following example compares the syntaxes of Haml and eRuby (Embedded Ruby), alongside the HTML output.

Haml	ERB	HTML
%div.category %div.recipes %h1= recipe.name %h3= recipe.category %div %h4= recipe.description	<div class="category"> <div class="recipes"> <h1><%= recipe.name %></h1> <h3><%= recipe.category %></h3> </div> <div> <h4><%= recipe.description %></h4> </div> </div>	<div class="category"> <div class="recipes"> <h1>Cookie</h1> <h3>Desserts</h3> </div> <div> <h4>Made from dough and sugar. Usually circular in shape and has about 400 calories.</h4> </div> </div>

Key differences are:

• Haml doesn't have both opening and closing tags for each element like eRuby.
• eRuby syntax looks a lot like HTML and is thereby more HTML-like while Haml is more CSS-like.
• Haml uses indentation to nest tag elements whereas eRuby uses the same HTML representation.
• In Haml properties like class, id can be represented by ., # respectively instead of regular class and id keywords. Haml also uses % to indicate a HTML element instead of <> as in eRuby.

Example with embedded Ruby code

Note: This is a simple preview example and may not reflect the current version of the language.

!!!
%html{ :xmlns => "http://www.w3.org/1999/xhtml", :lang => "en", "xml:lang" => "en"}
  %head
    %title BoBlog
    %meta{"http-equiv" => "Content-Type", :content => "text/html; charset=utf-8"}
    %link{"rel" => "stylesheet", "href" => "main.css", "type" => "text/css"}
  %body
    #header
      %h1 BoBlog
      %h2 Bob's Blog
    #content
      - @entries.each do |entry|
        .entry
          %h3.title= entry.title
          %p.date= entry.posted.strftime("%A, %B %d, %Y")
          %p.body= entry.body
    #footer
      %p
        All content copyright © Bob

The above Haml would produce this XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <title>BoBlog</title>
    <meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
    <link href="/stylesheets/main.css" media="screen" rel="Stylesheet" type="text/css" />
  </head>
  <body>
    <div id='header'>
      <h1>BoBlog</h1>
      <h2>Bob's Blog</h2>
    </div>
    <div id='content'>
      <div class='entry'>
        <h3 class='title'>Halloween</h3>
        <p class='date'>Tuesday, October 31, 2006</p>
        <p class='body'>
          Happy Halloween, glorious readers! I'm going to a party this evening... I'm very excited.
        </p>
      </div>
      <div class='entry'>
        <h3 class='title'>New Rails Templating Engine</h3>
        <p class='date'>Friday, August 11, 2006</p>
        <p class='body'>
          There's a very cool new Templating Engine out for Ruby on Rails. It's called Haml.
        </p>
      </div>
    </div>
    <div id='footer'>
      <p>
        All content copyright © Bob
      </p>
    </div>
  </body>
</html>

Implementations

The official implementation of Haml has been built for Ruby with plugins for Ruby on Rails and Merb, but the Ruby implementation also functions independently. Haml can be easily used along with other languages. Below is a list of languages in which Haml has implementations:

• Ruby: hamlit
• PHP: Fammel, pHAML, phamlp, phpHaml (PHP 5), HAML-TO-PHP (PHP 5), Multi target HAML (PHP 5.3)
• Javascript: haml-js
• Python: HamlPy
• Common Lisp: cl-haml
• Dart: Hart
• Java: JHaml
• Lua: LuaHaml
• .NET: NHaml
  • ASP.NET: MonoRail NHaml
• Perl: Text::Haml
• Scala: Scalate

See also

• BBCode
• eRuby
• Markaby
• Ruby
• Ruby on Rails
• YAML
• Sass – a similar system for CSS, also designed by Catlin.
• Website Meta Language – another template language with similar functionalities
• Web template – general concept of template to HTML expansion

External links

• • Haml tutorial
• Learn Haml (basic)
• on GitHub
• phpHaml, Haml implementation for PHP
• Haml Google Group
• Haml 1.0, announcement on the official Ruby on Rails weblog