Syed Humza Shah


Engineering leader. Likes coffee. Loves to travel. Runs on a combination of optimism and pragmatism.

Read more about him here.

Stick with ERB when working in Rails with designers

In my opinion, there are three kinds of front-end people you’ll be working with:

  1. the front-end dev who knows his stuff (client side frameworks, the ins and outs of CSS, principles of design, etc.)
  2. the CSS guy who can write code using JavaScript
  3. if you are less fortunate, somebody who know little beyond CSS - ‘designers’

You won’t know what kind of people you’re getting, which is why whenever working with designers, I recommend not using HTML markup like HAML or Slim for views (despite being a huge fan of both).

With ERB, all you have to do is instruct designers to overlook anything resembling the following:

<%= some_code %>

and work with the rest i.e. adding classes/CSS/whatever to the explicit HTML e.g.

<div id='#i_am_a_div' class='designer-modify-this'>
  <%= some_code %>

However with HAML, for example, the code above becomes this:

  = some_code

That is where your designers will scratch their heads. And, to be fair, for somebody who knows only HTML and CSS, the HAML stuff doesn’t make much sense. Of course, you could do the following to simplify the problem:

%div{id: 'i_am_a_div', class: 'designer-modify-this'}
  = some_code

But why use HAML in a “bad” way? I’d prefer clean ERB.

“Ok, but what does ‘clean’ ERB mean?”

Imagine what a designer’s reaction to the following would be:

<div class='something'>
  <% colors.each_with_index do |color, i| %>
    <div id='<%= "color_div_#{i}" %>' class='color-div'>
      <%= "This is #{color}." %>
  <% end %>

Potentially, a lot of time would be wasted in the designer trying to figure out how to style the inner div element. This is where you should clean it up and use helpers. Something that would look like this in the view:

<div class='something'>
  <%= divs_for_each_color(colors, html_class: "color-div") %>

That is descriptive enough to be easily understandable, in my opinion.

Conclusion? Never assume that your designers will “get it”. That assumption can lead to adopting a markup language (like HAML) for all your views and complicating them; only when it is too late will you find out that you made a bad decision (I speak from experience).