As the new Which? Birth Choice website was released a few weeks ago it’s time for a retrospective of the technologies used and whether they were a suitable choice for the project. As developers our job is not just to slam the keyboard and output code but also to manage and eliminate complexity – for our own and our team’s sake.

In our Rails application for the Birth Choice website redesign we decided to experiment and use a different template engine. We were choosing between the most famous in the Rails community, ERB (the default one), HAML (which we used in the legacy Birth Choice) and Slim. So here is a brief comparison between the three and the reasons why we decided to “Slim” things a little.

Syntax

Not only was Slim new to me but Ruby template engines as a whole. When it was suggested that I should use it, I actually found out it was pretty easy to learn. This is due to the most obvious of its features:

Much cleaner and logical syntax

Here’s the evidence – a comparison between the ERB, HAML and Slim syntaxes:

ERB:

   <%= render 'layouts/header' %>
       <%= render 'layouts/search_box' %>
       <%= yield %>
    <%= render 'layouts/footer' %>
    <%= fragment_client_footer %>
  <%= render 'partials/survey_bar' %>
  <%= @body_code_block %>
  <%= render partial: 'partials/live_chat' if html_page.live_chat? %>

HAML:

%section#featured-articles
    .l-inner.group
      %ul.categories
        - @categories.each do |category|
          - next if category.articles.empty?
          %li.category
            %div.expandable
              %span.icon.icon-more
              %span.icon.icon-less
              = category.title
            %ul.articles
              - category.articles.each do |article|
                %li
                  %article.article-many
                    %h3.title
                      = link_to article do
                        %span= article.title
                        %span.icon.icon-right
                    - if article.summary?
                      %p= article.summary
      %aside.promotion-container.l-complementary-with-margin{role: 'complementary'}
        = render partial: 'promotions', locals: { promotions: @promotions }

Slim:

.bc-navigation-wrapper
      = render 'partials/global_navigation'
    #page
      header#page-header
        = render 'partials/local_navigation'
      main#page-body
        = yield
      footer#page-footer
        = render 'partials/local_footer'

The main difference you can notice are the closing tags which are absolutely gone in the Slim syntax. ERB is quite verbose, yes, HAML is clean, but Slim is even cleaner! It seems a little strange when first using Slim but it soon becomes quite intuitive, especially if you are familiar and work with Sass. Yes, Slim is like Sass for HTML. It removes as much as possible from HTML and reveals only the essential parts without becoming too cryptic. This leads to the next of its great features:

Improved code readability

I’m sure you can see this for yourself. The saying “less is more” is at its full power here. You need just a glance at the code to understand what’s going on.

Performance

The following data shows the performance results of the comparison between the three engines. The test has been made within Rails.

Erb render:    41.091 [ms] (average)
Haml render:   43.508 [ms] (average)
Slim render:   40.387 [ms] (average)

Erb render:    36.021 [ms] (median)
Haml render:   37.316 [ms] (median)
Slim render:   35.349 [ms] (median)

You can read more details about the test here: https://medium.com/@mario_chavez/rails-template-engines-performance-9ba18446895d

As we can see the three engines do a good job but Slim is the fastest of them all.

Support

Some of the frameworks that are using Slim are Bootstrap, Angular2 and Sinatra. HAML is still the more popular alternative of the built-in ERB, but Slim is getting up to speed on popularity.

Conclusion

Slim has contributed to our Rails app with its elegant syntax, better readability and speed. It also is highly configurable and supports HTTP streaming. It is easy to learn and has definitely made our work more productive and fun. In case you’re intrigued and decided to try it, here is its GitHub repo https://github.com/slim-template/slim and documentation http://www.rubydoc.info/github/slim-template/slim/master/frames.  In the meantime you can take a look and browse through the new Which? Birth Choice website here: http://www.which.co.uk/birth-choice .