One of the first things that made me uncomfortable about learning Rails was taking a look at the views. I found some weird files with some weird syntax. Their name was something like ‘name.html.erb’ and I was like what? Why does this file which seems to be an HTML file with kind of HTML syntax has a .erb extension after the .html extension?
Those weird symbols which were somehow like HTML tags were a mystery for me at that point. So, I started investigating and this is what I found:
What is erb?
'erb' Refers to Embedded Ruby, which is a template engine in which Ruby language embeds into HTML. To make it clearer: Is the engine needed to be able to use the Ruby language with all its features inside HTML code. We’ll see its application in the next sections.
Rails use erb as its default engine to render views. It uses a specific implementation called erubi.
To use erb in Rails, files should all have a .html.erb extension for Rails to process them in its asset-pipeline.
How does it work?
During the course of my investigation I found that there are three elements used:
Expression tags <%= %>
This tag indicates that there will be an expression inside it. The main point: The application will render the result of executing the code inside this tag. Let’s check an example to make it clearer:
I assume you already understand the MVC architecture in Rails, but if you don’t, worry not. I’ll try to explain it as clear as I can:
Imagine we have a User model which has the following attributes:
The controller will ask the model to retrieve the first user from the database. Then it will store it in an instance variable called @user:
If we would like to display the first three user attributes in a view, we would use HTML and erb code like the following:
<h1>First User Information</h1>
<ol>
<li>User id: <%= @user.id %></li>
<li>User name: <%= @user.name %></li>
<li>User email: <%= @user.email %></li>
</ol>
And the browser will display the results like this:
Remember: The app will render the result of executing code inside expression tags. For example <%= 2 + 2 %> would render 4.
Execution tags <% %>
Like expression tags, they embed Ruby code inside HTML. The difference is that the application won't render the result of executing the code. They are frequent on ruby expressions. Let’s review an example to understand it better:
Imagine you are building a view to display all the users in your database. The controller will ask the model to retrieve all the users from the database (10 total). Then it will store them inside an instance variable called @users. You have two ways to do this: The efficient one and the inefficient one. Let’s start with the later:
A very inefficient way to display a list of users would be building a view like the following one:
<h1>All Users</h1>
<ol>
<li> <%= @users[0].name %> </li>
<li> <%= @users[1].name %> </li>
<li> <%= @users[2].name %> </li>
<li> <%= @users[3].name %> </li>
<li> <%= @users[4].name %> </li>
<li> <%= @users[5].name %> </li>
<li> <%= @users[6].name %> </li>
<li> <%= @users[7].name %> </li>
<li> <%= @users[8].name %> </li>
<li> <%= @users[9].name %> </li>
</ol>
That view will render:
Imagine there are not 10 users but thousands of them. That’s when a loop becomes useful, and we can use it with the help of execution tags and expression tags as shown below:
<h1>All Users</h1>
<ol>
<% @users.each do |user| %>
<li> <%= user.name + ' efficiently displayed' %> </li>
<% end %>
</ol>
Note three important points:
- We use an 'each' loop to iterate over the users. That way our code is no longer dependent on how many users are there in the database.
- We use execution tags (<% %>) to wrap the block structure. That is the Ruby code the application won't display.
- We use expression tags (<%= %>) to wrap the chunks of code the application will display. In this case, every user name + text " efficiently displayed".
Below you can check the results of the implementation:
Comment tags <%# %>
Used for placing Ruby comments inside your code. For example:
<h1>All Users</h1>
<ol>
<%# loop through every user %>
<% @users.each do |user| %>
<li> <%= user.name + ' efficiently displayed' %> </li>
<% end %>
</ol>
The code inside the comment tags gets ignored at the moment of building the template.
How to master it?
Let me tell you something great: Mastering erb will be a matter of minutes if you are already good with Ruby and HTML. Otherwise, It will be a matter of hours practicing until you get it.
If you plan to become a professional Rails developer, you will practice this skill a lot, so don't worry. You will master it sooner or later.
An advice that always works is: Practice and experiment a lot, that’s the only way to master a tool.
Important: Avoid using logic heavy erb code in your views. For those cases, it is always better to create a helper method to deal with that.
You can check these sites too if you want to learn more about erb: