The Understated Power of ERB (Embedded Ruby)

Any software engineer will tell you that it's imperative to know how to "mix-and-match" various technologies, programming languages, and/or frameworks in order to design and build a sound final product. For example, we typically use HTML to build the structure and content of a web page, CSS to add styling and formatting, and Javascript to add certain functionality and dynamics. While this trifecta may be the front-end standard, there's an unsung hero at your disposal (if you code in Ruby) - ERB, or Embedded Ruby.

An ERB file allows you to embed Ruby directly into HTML, providing a convenient and practical way to render dynamic content on a web page.

Let's say you're creating a simple web application and want to greet the user when they log in. Simple HTML won't work, because it's not dynamic! So how do you render the current user's username on the page? With ERB, it's incredibly intuitive.

Assuming that @user, an instance variable made available to us via the current route in our controller, is equal to the current user object, it's as simple as:

<p>Welcome <%= @user.username %>!</p>

Here we are embedding the user's username attribute directly into the <p> element in our HTML by using the following opening and closing tags around our Ruby code, also known as "expression tags": <%= some ruby code %>. Expression tags will run and display the return value of your code. Pretty cool, right?

Well, it gets better. We can also use what are called "execution tags" to run code without rendering! This is where the power of ERB really shines. For instance, referring back to our welcome message example - you would only want to render that message if the user was signed in, right?

For this example, let's also assume that we have access to a '#logged_in' helper method, which returns the status of the user's session:

<% if @user.logged_in? %> 
  <p>Welcome <%= @user.username %>!</p> 
<% end %>

Note how the conditional if statement is wrapped with a <% tag on each end - these are execution tags! They won't render the code between them to the front-end, instead they'll just run that code on the indicated snippet of HTML. In this case, the "welcome" message will only render if @user.logged_in? returns true.

Even with just this one simple example, you can already see how powerful and versatile ERB can be - you could essentially write all of your Ruby code in ERB if you wanted to (but, separation of concerns, right?).

I used a ton of ERB in my most recent project, a CRUD, MVC Sinatra web application which allows users to create and share movie reviews (available via Heroku). Here are a few slightly more complex examples of how ERB can be used to dynamically render HTML.

Iterating through an array of objects and rendering table data for each:

<% Movie.all.each do |movie| %>
  <tr>
    <td><a href="/movies/<%= movie.slug %>"><%= movie.title %></a></td>
    <td><%= movie.director %></td>
    <td><%= movie.genre %></td>
    <td><%= movie.release_date.strftime("%-m/%-d/%Y") %></td>
  </tr>
<% end %>

Rendering a link in a nav bar based on the current URL:

<% unless @request.env["PATH_INFO"].include?("welcome") %>
  <a href="/welcome/<%= current_user.slug %>"><button type="submit">Home</button></a>
<% end %>

Or dynamically setting the value of an input element:

<input id="director" name="director" value="<%= @movie.director %>"><br>

In summary, ERB is a key technology for full-stack Rubyists and should not be overlooked. Whether you leverage it just to add some simple logic to your web page, or to create a layout template (<%= yield %>, anyone?), it is an undeniably powerful tool. This blog only scratched the surface, so be sure to dig into the documentation! Rubyapi.org provides a good starting point.