The Haml Mammal

Do you ever feel tired of looking for closing html and end erb tags? Do you feel like it looks kind of spaghetti-like when you have a complicated view page?

Haml might be the transpiler solution you didn’t know you needed. What is Haml? It stands for “HTML Abstraction Markup Language” and according to http://haml.info/ it gives you the power to write “beautiful, DRY, well-indented, clear markup”. Sounds like a dream, right?

HAML PRINCIPLES

1. Markup should be beautiful
2. Markup should be DRY
3. Markup Should be Well-Indented
4. HTML Structure Should be Clear

Let’s first compare some code. Here is a simple form using html and erb:

<div class="container"
<h1 id="large"> Title </h1>
<% if @condition == true %>
<%= form_for @post do |f| %>
<p><%= f.text_field :title %></p>
<p><%= f.text_area :content %></p>
<p><%= f.submit %></p>
<% end %>
<% end %>
</div>

Now, let’s see what the exact same code would look like in Haml:

.container
%h1#large Title
- if @condition == true
= form_for @post do |f|
%p= f.text_field :title
%p= f.text_area :content
%p= f.submit

This might look intimidating at first, but notice that Haml actually looks a lot like CSS: dots before classes and #s before ids and familiar “p” and “h1” tags. Different from CSS is that in Haml the indentation is *very* important and determines how things are wrapped rather than using end tags.

.container is a class that encapsulates everything that is indented below it.

%h1 is a tag with words after it and it will generate the familiar html:

<h1> Title </h1>

Yet, you don’t need to worry about end tags! As mentioned, anything starting with # is an id and notice you can chain together tags and classes and ids before the code they encapsulate. If I wanted to also add a class “red” to that beginning h1 tag, it would look like: %h1#large.red Title

The  is the equivalent of the erb tags <% %> and everything afterwards will be interpreted as ruby code, but not displayed.

The = is basically equivalent to the erb tags <%= %> and the result of the code after will be displayed.

You can see that the form is wrapped in a condition which is denoted by the fact that the form is indented after the conditional line.

Conventions

There is a standard when using Haml to name your classes with downcase and chained with dashes instead of underlines. For example, here is a button that implements multiple Bootstrap classes:

%button.btn.btn-sm.btn-outline-secondary= link_to “View”, item

Using HAML

There are HAML packages for Atom like “language-haml” or “htmltohaml” which helps you convert your html to HAML. There are also really cool websites like http://htmltohaml.com/ where you can just paste in your html and it spits out the equivalent HAML.

First start with installing the Haml gem:

gem install haml

You use HAML just like you would .erb files, except the name would be something like “show.html.haml” instead of “show.html.erb”.

I think you’ll see that in general, HAML is far more compact and readable than standard html and erb once you understand the syntax.

Are Transpilers the Future?

With the exponential growth of languages that transpile to other languages, it has me wondering: are we entering a new era where no one has to write in a language they don’t like? For example, if you don’t like JavaScript, you have the option to instead opt for something like CoffeeScript, TypeScript, or Elm.

REFERENCES:

Haml (HTML Abstraction Markup Language)

Haml.info