What is ERB (Embedded Ruby) in Ruby on Rails?
If you're learning programming and Ruby on Rails, you may have come across the term ERB, which stands for Embedded Ruby. In this blog post, we will dive into what ERB is, why it's essential in Ruby on Rails, and how to use it effectively in your applications. We'll also provide you with real code examples and intuitive analogies to help you better understand this concept.
What is ERB?
ERB (Embedded Ruby) is a templating system built into Ruby that allows you to embed Ruby code directly into your text files, including HTML, XML, or even plain text documents. It's a powerful feature that lets you create dynamic content by merging Ruby code with static text.
The main goal of ERB is to provide a way to separate the logic of your application (written in Ruby) from its presentation (HTML, CSS, etc.). This separation of concerns leads to cleaner, more maintainable code.
Imagine you're creating a website to showcase your favorite movies. Instead of creating separate HTML files for each movie, you could use ERB to dynamically generate the movie pages using a single template file. This way, you only need to update the Ruby code when adding new movies or making changes to the site's appearance.
How does ERB work?
ERB processes your text files and looks for special tags that contain Ruby code. These tags tell ERB where to execute Ruby code and insert the results into the final output. There are two types of ERB tags:
<% Ruby code %>: This tag is used to execute Ruby code without producing any output. For example, you can use it for looping, conditionals, or variable assignments.
<%= Ruby code %>: This tag is used to execute Ruby code and produce output that will be included in the final document. For example, you can use it to insert the value of a variable or the result of a method call.
When ERB encounters these tags, it will execute the Ruby code inside and replace the tag with the result of the code execution. Once all the tags have been processed, ERB will produce the final output, which can be an HTML, XML, or plain text file.
Let's look at a simple example to illustrate how ERB works. Imagine you have a list of movies, and you want to create an HTML page that displays their titles.
Here's a basic ERB template that does just that:
<!DOCTYPE html>
<html>
<head>
<title>My Favorite Movies</title>
</head>
<body>
<h1>My Favorite Movies</h1>
<ul>
<% movies.each do |movie| %>
<li><%= movie.title %></li>
<% end %>
</ul>
</body>
</html>
In this template, we have two ERB tags:
<% movies.each do |movie| %>: This tag starts a loop that iterates through the movies array. Notice that there is no equal sign (=) in this tag, which means it won't produce any output.
<%= movie.title %>: This tag outputs the title of the current movie in the loop. Since it has an equal sign (=), it will produce output that is included in the final HTML file.
When ERB processes this template, it will replace the tags with the appropriate content and produce the final HTML file. The result might look something like this:
<!DOCTYPE html>
<html>
<head>
<title>My Favorite Movies</title>
</head>
<body>
<h1>My Favorite Movies</h1>
<ul>
<li>Movie 1</li>
<li>Movie 2</li>
<li>Movie 3</li>
</ul>
</body>
</html>
As you can see, the Ruby code inside the ERB tags was executed, and the final output contains the generated content.
Using ERB in Ruby on Rails
Ruby on Rails uses ERB extensively for view templates, which are the files responsible for generating the HTML that is sent to the user's browser. In a Rails application, view templates are typically stored in the app/views directory and have the .html.erb file extension.
To better understand how ERB is used in Rails, let's create a simple Rails application that displays a list of movies.
First, create a new Rails application by running the following command in your terminal:
$ rails new movie_app
Next, navigate to the movie_app directory and create a new controller called movies:
$ cd movie_app
$ rails generate controller movies
This command will create a MoviesController class and a movies directory inside app/views.
Now, open the app/controllers/movies_controller.rb file, and update the MoviesController class like this:
class MoviesController < ApplicationController
def index
@movies = [
{ title: 'Movie 1', year: 2001 },
{ title: 'Movie 2', year: 2004 },
{ title: 'Movie 3', year: 2015 }
]
end
end
Here, we define an index action that sets an instance variable called @movies with an array of movie hashes. This instance variable will be accessible in our view template.
Next, create a new file called index.html.erb inside the app/views/movies directory, and add the following ERB template:
<!DOCTYPE html>
<html>
<head>
<title>My Favorite Movies</title>
</head>
<body>
<h1>My Favorite Movies</h1>
<table>
<tr>
<th>Title</th>
<th>Year</th>
</tr>
<% @movies.each do |movie| %>
<tr>
<td><%= movie[:title] %></td>
<td><%= movie[:year] %></td>
</tr>
<% end %>
</table>
</body>
</html>
In this template, we use ERB tags to loop through the @movies array and output the title and year for each movie.
Finally, we need to set up a route for our index action. Open the config/routes.rb file and add the following line inside the Rails.application.routes.draw block:
resources :movies, only: [:index]
Now, start your Rails server by running the following command:
$ rails server
Open your browser and navigate to http://localhost:3000/movies. You should see your list of movies displayed in a table.
Conclusion
In this blog post, we've learned about ERB (Embedded Ruby) and how it's used in Ruby on Rails to create dynamic content. ERB allows you to embed Ruby code directly into your text files, making it easy to separate your application's logic from its presentation. We've also seen how to use ERB in a Rails application and create a simple movie list using view templates.
As you continue learning programming and Ruby on Rails, you'll find that ERB is an essential tool for creating powerful, dynamic web applications. Keep practicing and experimenting with ERB templates to become more comfortable with this powerful feature.