Using HAML Instead of ERB in your Rails Application

Saturday Jul 29, 2017 Kudzai Nyandoro


  • As an alterntive to ERB, developers can choose to use HAML which is described on
    it's website as "[...] a markup language that's used for inline templating
    systems sush as PHP, ASP, and ERB [...].".
    Also in their book "The Rails 4 Way",
    Obie Fernandez and Kevin Faustino write about HAML as "[...] a "whitespace-sensitive" HTML
    templating engine that uses indentation to determine the hierarchy of an HTML
    document. Haml was created because its creater, Hampton Catlin, was tired of
    having to type markup and wanted all his output code to be beautifully
    formatted."

  • If you're new to Rails and ERB, I'd suggest sticking with Rails' ERB convention for now until you get comfortable it.

  • It took me a while to warm up to HAML, but once I did, there was no turning
    back. Many thanks to Hampton Catlin and everyone working on HAML., this is a very useful and time saving tool. There
    is also a tutorial on the Haml website website, good place to get your feet wet. You can also find out more about Halm from "Rails 4 Way" book mentioned above, and also from Shane Howe's Learn to Code HTML & CSS

  • Below is a quick example of how much typing you can save by using Haml

  • To set up HAML as your templating engine in Rails, visit the rubygems.org website. Search for the haml-rails gem, to get the latest gem version and add it to your rails Gemfile as shown below. At the time of this writing, the latest version was version 1.0.

#Gemfile
gem 'haml-rails', '~> 1.0'
  • Run the following command
$ bundle install
  • As a next step, you might choose to convert all your current ERB files to HAML using the command below
$ rails haml:erb2haml
  • You will then be asked if you want to delete your current ERB files, at this point I delete mine. However for learning purposes you might want to save them so that you can compare the difference between the two and learn.

  • Another option is to start a haml branch before converting all your files

$ git checkout -b haml
$ rails haml:erb2haml
Below is an example of an ERB file
  <div class="form-group">
    <%= f.label :title, :class => 'control-label col-lg-2' %>
    <div class="col-lg-10">
      <%= f.text_field :title, :class => 'form-control' %>
    </div>
  </div>
  <div class="form-group">
    <%= f.label :details, :class => 'control-label col-lg-2' %>
    <div class="col-lg-10">
      <%= f.text_field :details, :class => 'form-control' %>
    </div>
  </div>
  <div class="form-group">
    <%= f.label :expected_completion_date, :class => 'control-label col-lg-2' %>
    <div class="col-lg-10">
      <%= f.text_field :expected_completion_date, :class => 'form-control datepicker' %>
    </div>
  </div>
  <br>
  <div class="form-group">
    <div class="col-lg-offset-2 col-lg-10">
     <%= f.hidden_field :tenant_id, value: params[:tenant_id], :class => 'form-control' %>
      <%= f.submit nil, :class => 'btn btn-primary' %>
      <%= link_to t('.cancel', :default => t("helpers.links.cancel")),
                root_path, :class => 'btn btn-default' %>
    </div>
  </div>
Compare the above with the HAML version below.
.form-group
  = f.label :title, :class => 'control-label col-lg-2'
  .col-lg-10
    = f.text_field :title, :class => 'form-control'
.form-group
  = f.label :details, :class => 'control-label col-lg-2'
  .col-lg-10
    = f.text_field :details, :class => 'form-control'
.form-group
  = f.label :expected_completion_date, :class => 'control-label col-lg-2'
  .col-lg-10
    = f.text_field :expected_completion_date, :class => 'form-control datepicker'
%br/
.form-group
  .col-lg-offset-2.col-lg-10
    = f.hidden_field :tenant_id, value: params[:tenant_id], :class => 'form-control'
    = f.submit nil, :class => 'btn btn-primary'
    = link_to t('.cancel', :default => t("helpers.links.cancel")), |
      root_path, :class => 'btn btn-default'                       |

If you have any questions or comments, please leave them below.