Ruby on Rails View Components with Trailblazer Cells

JavaScript is now more composable than ever, and it feels it won’t change for a long time as it’s one of the most efficient ways of creating websites and web apps now. But how do Ruby on Rails and View Components cooperate with each other? Is it possible to include component-based structure within RoR applications? With Trailblazer Cells, it is.

Mikolaj Grygiel

October 03, 2016 • 7 min read

In recent times view components became a really popular web design pattern. View component is standalone part of view, which can be used at many views.

Most common JavaScript frontend frameworks like React, Ember or Angular use view components pattern. Even last hot topic in web world "Web Components" is just implementation of view components.

Ok, but it’s all about JavaScript world. What if we want to stay in Rails world? Can we use view components in RoR app? Yes, We can! We can do it with Trailblazer Cells.

On the first page of Cells documentation we read:

A cell is an object that represent a fragment of your UI. The scope of that fragment is up to you: it can embrace an entire page, a single comment container in a thread or just an avatar image link.

I could just list adventages of cells, but you can find them in the documentation. I would like to show simple example of cells’ usage. I hope it will show you benefits of view components in rails app.

The example is a simple app with CRUD actions for below database.

Let’s start by creating the app with scaffolds.

rails new cells-app
cd cells-app
rails g scaffold company name:string city:string
rails g scaffold department name:string company:references
rails g scaffold employee first_name:string last_name:string department:references
rake db:create db:migrate
add root to: ‘companies#index’ to config/routes.rb

We’ve created base app with scaffolds for company, department and employee. Now we can configure cells’:

Add to gemfile:
- gem "trailblazer-cells"
- gem "cells-erb"
- gem "cells-rails"
Run bundle install
Run mkdir app/cells

So, finally we can go to most interesting part – cells implementation. If we list the app/views we will see that we already have a lot of views:

We will use code from these views in our cells.

We will create cells for each type of view:

IndexCell
ShowCell
NewCell
EditCell

And some view components cells:

TableCell
TitleCell
FormCell
NoticeCell

We will replace each template with cell. Completed project you can find on GitHub. Here I will just show two examples of cells: TableCell and IndexCell.

TableCell

Firstly, we need to create files structure. TableCell is built from one ruby file and four erb(html) files. Our cells’ directory should look like below.

table_cell.rb is the core of our cell, it contains all helpful methods.

table_cell.rb

1  class TableCell < Cell::ViewModel
2    def items
3      model[:items]
4    end
5
6    def attributes
7      model[:attributes]
8    end
9
10    def model_name
11      model[:model_name]
12    end
13
14    def header
15      render
16    end
17
18    def body
19      render
20    end
21
22    def row(item)
23      @item = item
24      render
25    end
26
27    def row_attributes(item)
28      attributes.map do |attribute|
29        item.send(attribute)
30      end
31    end
32
33    def show_path(item)
34      polymorphic_path(item)
35    end
36
37    def edit_path(item)
38      edit_polymorphic_path(item)
39    end
40  end

tsx

The main view part of TableCell is show.erb, it will be rendered while we will use the cell. It contains table tag and renders header.erb and body.erb views.

table/show.erb

1  <table>
2    <%= header %>
3    <%= body %>
4  </table>

tsx

In header.erb we put thead tag and th tag for each attribute provided to cell.

table/header.erb

1  <thead>
2    <tr>
3      <% attributes.each do |header| %>
4        <%= content_tag :th, header.capitalize %>
5      <% end %>
6      <th colspan="3"></th>
7    </tr>
8  </thead>

tsx

In body.erb we render table row for each item provided to cell.

table/body.erb

1  <% items.each do |item| %>
2    <%= content_tag :tr, row(item) %>
3  <% end %>

tsx

row.erb creates td tag for each attribute of the item.

table/row.erb

1  <% row_attributes(@item).each do |attribute| %>
2    <%= content_tag :td, attribute %>
3  <% end %>
4  <td><%= link_to 'Show', show_path(@item) %></td>
5  <td><%= link_to 'Edit', edit_path(@item) %></td>
6  <td>
7    <%= link_to 'Destroy', show_path(@item), method: :delete, data: { confirm: 'Are you sure?' } %>
8  </td>

tsx

IndexCell

At first we need to add abstract PageCell with html layout, the main job of layout is including javascript and stylesheets assets. Each view needs to load the layout, so views cells will inherit from the PageCell. We have to create app/cells/page_cell.rb and app/cells/page/layout.erb files.

page_cell.erb

1  class PageCell < Cell::ViewModel
2    layout :layout
3  end

tsx

page/layout.erb

1  <!DOCTYPE html>
2  <html>
3    <head>
4      <title>CellsApp</title>
5      <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
6      <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
7    </head>
8    <body>
9
10    <%= yield %>
11
12    </body>
13  </html>

tsx

Let’s speed up. I’ve already created TitleCell and NoticeCell. We need them for IndexCell. IndexCell displays all of needed components on index page.

index_cell.erb

1  class IndexCell < PageCell
2    def items
3      model[:items]
4    end
5
6    def attributes
7      model[:attributes]
8    end
9
10    def model_name
11      model[:model_name]
12    end
13
14    def notice
15      model[:notice]
16    end
17
18    def new_path
19      new_polymorphic_path(model_name)
20    end
21  end

tsx

index/show.erb

1  <%=cell NoticeCell, notice: notice %>
2
3  <%=cell TitleCell, title: "Listing #{model_name.pluralize.capitalize}" %>
4  <%=cell TableCell, items: items, attributes: attributes %>
5
6  <br>
7
8  <%= link_to "New #{model_name.capitalize}", new_path %>

tsx

Implementation of others cells you can see at the repository. So, we have all cells ready. Let’s use them.

companies_controller.rb

1  class CompaniesController < ApplicationController
2    before_action :set_company, only: [:show, :edit, :update, :destroy]
3
4    def index
5      render html: cell(IndexCell, items: Company.all, model_name: 'company',
6        attributes: [:name, :city], notice: notice)
7    end
8
9    def show
10      render html: cell(ShowCell, item: @company, model_name: 'company',
11        attributes: [:name, :city], notice: notice)
12    end
13
14    def new
15      render html: cell(NewCell, item: Company.new, model_name: 'company',
16        attributes: [:name, :city])
17    end
18
19    def edit
20      render html: cell(EditCell, item: @company, model_name: 'company',
21        attributes: [:name, :city], notice: notice)
22    end
23  ...

tsx

departments_controller.rb

1  class DepartmentsController < ApplicationController
2    before_action :set_department, only: [:show, :edit, :update, :destroy]
3
4    def index
5      render html: cell(IndexCell, items: Department.all, model_name: 'department',
6        attributes: [:name, :company], notice: notice)
7    end
8
9    def show
10      render html: cell(ShowCell, item: @department, model_name: 'department',
11        attributes: [:name, :company], notice: notice)
12    end
13
14    def new
15      render html: cell(NewCell, item: Department.new, model_name: 'department',
16        attributes: [:name, :company_id])
17    end
18
19    def edit
20      render html: cell(EditCell, item: @department, model_name: 'department',
21        attributes: [:name, :company_id], notice: notice)
22    end

tsx

employees_controller.rb

1  class EmployeesController < ApplicationController
2    before_action :set_employee, only: [:show, :edit, :update, :destroy]
3
4    def index
5      render html: cell(IndexCell, items: Employee.all, model_name: 'employee',
6        attributes: [:first_name, :last_name, :department], notice: notice)
7    end
8
9    def show
10      render html: cell(ShowCell, item: @employee, model_name: 'employee',
11        attributes: [:first_name, :last_name, :department], notice: notice)
12    end
13
14    def new
15      render html: cell(NewCell, item: Employee.new, model_name: 'employee',
16        attributes: [:first_name, :last_name, :department_id])
17    end
18
19    def edit
20      render html: cell(EditCell, item: @employee, model_name: 'employee',
21        attributes: [:first_name, :last_name, :department_id], notice: notice)
22    end

tsx

As you can see we have used the same cells for all controllers. That is the power of cells. Now If you want to change title header size for all pages, you have to just change one file, the TitleCell:

1  diff --git a/app/cells/title/show.erb b/app/cells/title/show.erb
2  index 580040d..f8704a2 100644
3  --- a/app/cells/title/show.erb
4  +++ b/app/cells/title/show.erb
5  @@ -1,3 +1,3 @@
6  -<h1>
7  +<h3>
8     <%= title %>
9  -</h1>
10  \ No newline at end of file
11  +</h3>
12  \ No newline at end of file

tsx

That’s all. The change at one file is propagated to all views. How cool is that? And that is the sense of cells.

Of course, cells have more advantages, but I had only one goal in this article. I wanted to show you that with cells you can create flexible and reusable views at rails. I hope that now you can see it.

Web Development

Let’s Create a Great Website Together

We'll shape your web platform the way you win it!

Ruby on Rails View Components with Trailblazer Cells

TableCell

IndexCell

More posts in this category