Views in Rails

Welcome back! So far, you've explored the core structure of a Rails application and delved into controllers, which act as intermediaries facilitating HTTP requests and responses. It’s now time to focus on another crucial part of the Ruby on Rails framework — Views. In this lesson, we'll learn what views are and how they are used to present data to users in a web application.

Views in Rails are responsible for rendering the user interface of your web application. Recall that when we wrote controller class methods, we just assigned some instance variables to some values. So how did we get for example the bullet points in the preview? While controllers handle the logic and data flow, views take care of presenting that data to the user. Views can use controller instance variables, such as @todos in this case, to display the data. Specifically, in this lesson, you'll learn how to create .html.erb files that display lists of items and individual items. We'll use our to-do app as an example to make this concrete.

Here's a quick peek at what you'll be working on:

<!-- index.html.erb -->
<h1>Listing all todos</h1>
<ul>
  <% @todos.each do |todo| %>
    <li><%= todo %></li>
  <% end %>
</ul>

This snippet shows a list of to-do items, demonstrating how we can loop through data in our view. Notice the use of <h1>, <ul>, and <li> HTML tags to format the content:

• <h1>: Defines a large heading.
• <ul>: Creates an unordered list.
• <li>: Specifies list items within the unordered list.

These tags help structure the view to make the data visually appealing and organized.

Each controller action has its corresponding .html.erb file in the views folder. For instance, the code above is part of the index.html.erb file, which corresponds to the index action in the controller.

Embedded Ruby (ERB) allows you to embed Ruby code within HTML. There are two main ERB tags used in views:

• <% ... %>: This syntax is used for executing Ruby code that does not produce any output. For example, you can use it for flow control structures like loops and conditionals.

  ERB

  <% @todos.each do |todo| %>
    <!-- This is where you would output or process each `todo` -->
  <% end %>

• <%= ... %>: This syntax is used for executing Ruby code and outputting the result directly into the template. This is used when you want to display a variable or expression result in the view.

  ERB

  <li><%= todo %></li>

In the previous example:

• <% @todos.each do |todo| %> is used to start a loop that does not output anything by itself.
• <li><%= todo %></li> is used to output the todo item inside a list item (<li>).

Use <% when you need to execute Ruby code without output, and <%= when you need the result of the Ruby code to be inserted into the HTML.

The resources keyword in routes.rb not only generates a set of standard RESTful routes for the controller actions, such as index, show, new, edit, create, update, and destroy. Additionally, the resources keyword provides named route helpers, like todo_path and todos_path. These helpers can be used to generate paths to your resources easily and are particularly useful in your views and controllers. For example:

# config/routes.rb
Rails.application.routes.draw do
  resources :todos
end

This configuration generates paths that can be used in your views:

<!-- index.html.erb -->
<h1>Listing all todos</h1>
<ul>
  <% @todos.each do |todo| %>
    <li>
      <%= link_to 'Show', todo_path(todo) %> 
      - <%= todo %>
    </li>
  <% end %>
</ul>
<%= link_to 'Back to List', todos_path %>

In the example above:

• <%= link_to 'Show', todo_path(todo) %> generates a link to an individual todo item.
• <%= link_to 'Back to List', todos_path %> generates a link back to the list of to-do items.

These route helpers make your code more readable and maintainable, allowing you to reference routes without hardcoding URL paths.

Mastering views is essential for creating engaging and user-friendly interfaces for your application. While controllers manage the data and logic, views are what your users interact with directly. By understanding how to efficiently structure and render views, you can enhance the user experience significantly. Plus, views bring our data to life — turning abstract code into visually appealing and interactive content that users can engage with.

Excited to get started with views? Let's move on and build our index.html.erb and show.html.erb files together!