Did you know that HAML and RAILS doing really good together?

Before start why “Haml” is good with rails let me say something about “ERB”. ERB is the default template system for rails. We embed Ruby into HTML using ERB just like we do in ASP, JSP and PHP.

Following example will show how we can embed ruby in an html.erb file.

<%= form_for @product, url: {action: "create"}, html: {multipart: true} do |f| %>
<table>
    <tr>
      <td>
        <label for = "product_name">Name</label>:
      </td>
      <td>
        <%= f.text_field :name %>
      </td>
    </tr>
    <tr>
      <td>
        <label for = "product_price">Price</label>:
      </td>
      <td>
        <%= f.text_field :price %>
      </td>
    </tr>
    <tr>
      <td>
        <label for = "product_item_id">Item</label>:
      </td>
      <td>
        <%= f.select(:item_id) do %>
          <% @items.each do |item| -%>
            <%= content_tag(:option, item.name, value: item.id) %>
          <% end %>
        <% end %>
      </td>
    </tr>
    <tr>
      <td>
        <label for = "product_description">Description</label>:
      </td>
      <td>
        <%= f.text_area :description, size: "60x12" %>
      </td>
    </tr>
    <tr>
      <td>
        <label for = "product_image">Image</label>:
      </td>
      <td>
        <%= f.file_field :image %>
      </td>
    </tr>
    <tr>
      <td colspan="2"><hr /></td>
    </tr>
    <tr>
      <td colspan="2">
        <%= f.submit "Create" %>
      </td>
    </tr>
  </table>
<% end %>

As you can see in the code segment, I have created a basic form in rails using a table layout. I have used the following delimiter to embed ruby within the html file.

<%    %> 
<%=   %>

when there is a huge code in an erb file, it is really annoying and I am like…

So I started using HAML instead of ERB.

HAML is a very attractive and popular alternative to ERB. HAML will eliminate repetitive tags in HTML. Ultimately it gives me a beautiful code where it is easy to read.

So, HAML is a beautiful, DRY, well-intended, clear markup

Indentation is the main key with HAML, which makes for well structured code. Sometimes you might feel unconformable when rails give indentation errors, anyway it won’t happen if you are so careful and you love this.

This is the above erb code using haml.

= form_for @product, url: {action: "create"}, html: {multipart: true} do |f|
  %table
    %tr
      %td
        %label{:for => "product_name"}> Name
      %td
        = f.text_field :name
    %tr
      %td
        %label{:for => "product_price"}> Price
      %td
        = f.text_field :price
    %tr
      %td
        %label{:for => "product_item_id"}> Item
      %td
        = f.select(:item_id) do
          - @items.each do |item|
            = content_tag(:option, item.name, value: item.id)
    %tr
      %td
        %label{:for => "product_description"}> Description
      %td
        = f.text_area :description, size: "60x12"
    %tr
      %td
        %label{:for => "product_image"}> Image
      %td
        = f.file_field :image
    %tr
      %td{:colspan => "2"}
        %hr/
    %tr
      %td{:colspan => "2"}
        = f.submit "Create"

I think you can just see the difference even by looking into the code. I like using HAML and it is super easy to handle my view files in rails. Not only the readability, its focus on cleanliness and production speed.

for more information please refer the following link

Haml

This is how I add HAML into the project

1. First add the GEM file.

haml | RubyGems.org | your community gem host

you can use the above link to read about HAML.

gem 'haml', '~> 4.0', '>= 4.0.7'

or

gem install haml -v 4.0.7

2. Do a bundle install, run the following command in the terminal

$bundle install

3. Done!

Now anytime you create a controller after bundle install. Rails will generate view in the formal for HAML.

Move from HTML to HAML

After adding HAML i got issue initially, How can i convert my existing html.erb to html.haml. I use following link to convert my existing code. Pretty easy.

Convert HTML to HAML

This is something I didn’t do. but if you need to convert the whole ERB project to a HAML project. you can use a shell script. See the following link for that.

Is there a bash command for converting an entire directory to HAML from HTML?

for file in $(find . -type f -name \*.html.erb); do
  html2haml -e ${file} "$(dirname ${file})/$(basename ${file} .erb).haml";
done

or use the following gem to convert

haml/html2haml

Tutorial

Basics you want to know is mention bellow

.      ----> for class
#      ----> for id
%      ----> for tags
-      ----> ruby
=      ----> output in ruby

Let’s see some examples, so you can get some idea.

ERB

<strong><%= item.title %></strong>

HAML

%strong= item.title

When we add attributes into tags

ERB

<strong class="code" id="message">Hello, World!</strong>

HAML

%strong{class: "code", id: "message"} Hello, World!

If you want to add dive with a class “content”

.content
  Anything inside the div

Same thing with an ID

#content
  Anything inside the div

ERB

<div class='item' id='item<%= item.id %>'>
  <%= item.body %>
</div>

HAML

.item{:id => "item#{item.id}"}= item.body

Consider using HAML next time. I mean start today :)