DRYing Up Rails Views and Controllers

DRYing up
Views and Controllers
Layouts, partials, helpers, and ﬁlters

The Problem

I said Rails was big on DRY (don’t repeat yourself)

The Problem

I said Rails was big on DRY (don’t repeat yourself)
But we are duplicating a lot of code so far!

Add an Article Form
A trivial page containing a form

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Add an Article</title>
</head>
<body>
<h1>Add an Article</h1>
<% form_for @article do |f| %>
<%= f.error_messages %>
<%= f.label :title %><br><%= f.text_ﬁeld :title %><br>
<%= f.label :body %><br><%= f.text_area :body %><br>
<%= f.submit "Post Article" %>
<% end %>
</body>
</html>

Add an Article Form
A trivial page containing a form

Update Article Form
Nearly the exact same page

<html>
<head>
<title>Update Article</title>
</head>
<body>
<h1>Update Article</h1>
<%= f.submit "Save Article" %>
<% end %>
</body>
</html>

Update Article Form
Nearly the exact same page

Solutions
Rails has many different tools to reduce repetition

Solutions
Layouts

Solutions
Layouts
Partials

Solutions
Layouts
Partials
Helpers

Solutions
Layouts
Partials
Helpers
Filters

Solutions
Layouts
Partials
Helpers
Filters
Let’s take a look at what each of these is good for

Layouts
A tool for separating page header
and footer code

Repetitive HTML

Layouts help you to handle header and footer code

Repetitive HTML

This is handy for HTML <head> … </head>
sections and common site design code

Repetitive HTML

This is handy for HTML <head> … </head>
sections and common site design code
Rails will render a layout for each page, if available

Layout Selection
class ArticlesController <
ApplicationController
# ...
end

Layout Selection
Each controller can ApplicationController
have it’s own layout # ...
end

Layout Selection
end

If a controller doesn’t,
Rails will check parent
controllers

Layout Selection
end

If a controller doesn’t,
Rails will check parent
controllers
application.html.erb
is the easiest way to
set a global layout

A Basic Layout
Just yield where you want to insert
the page content

<html>
<head>
<title>My Blog</title>
</head>
<body>
<%= yield %>
</body>
</html>

A Basic Layout
Just yield where you want to insert
the page content

The Revised Add Form
This code is inserted into the layout by Rails
to create a full page

<% end %>

The Revised Add Form
This code is inserted into the layout by Rails
to create a full page

The Revised Edit Form
There’s still some duplication,
but things are deﬁnitely improving

<% end %>

The Revised Edit Form
There’s still some duplication,
but things are deﬁnitely improving

Fixing the Title

<% content_for :name, "Content" %>

<% content_for :name do %>
<script type="text/javascript"
charset="utf-8">
// ...
</script>
<% end %>

<%= yield :name %>

Fixing the Title
content_for() can be
used to pass content <% content_for :name, "Content" %>

between ﬁles <% content_for :name do %>
charset="utf-8">
// ...
</script>
<% end %>

<%= yield :name %>

Fixing the Title

charset="utf-8">
One ﬁle sets content, // ...
</script>
using a Ruby String or <% end %>

a block of HTML
<%= yield :name %>

Fixing the Title

charset="utf-8">
One ﬁle sets content, // ...
</script>
using a Ruby String or <% end %>

a block of HTML
Another ﬁle yields to it <%= yield :name %>

by name

Set Title Content
Each page sets relevant title content

<% content_for :page_title, "Add an Article" %>



<% content_for :page_title, "Update Article" %>



Set Title Content
Each page sets relevant title content

Read the Title Content
The layout will now make use of the title content
if it exists

<title>
<%= ["My Blog", yield(:page_title)].compact.join(" : ") %>
</title>

Read the Title Content
The layout will now make use of the title content
if it exists

Content Sharing in Action

We now have dynamic
titles based on the
page you are viewing

Content Sharing in Action

We now have dynamic
titles based on the
page you are viewing
content_for() is also
handy for sidebars and
other shared content

Partials
A tool for separating repeated
chunks of view code

Duplicate Form Fields
We need to remove more duplication,
but be pragmatic about what to leave

<% end %>

Duplicate Form Fields
We need to remove more duplication,
but be pragmatic about what to leave

Shared HTML

Any shared HTML can be placed into a “partial”

Shared HTML

This is often used for form ﬁelds, and code that
displays the details of an individual model

Shared HTML

That partial can then be inserted into all needed places

Shared HTML

That partial can then be inserted into all needed places
By convention, partial ﬁles begin with an _ in Rails (for
example: _article.html.erb)

_form.html.erb
I’ve moved the form ﬁelds into a separate HTML
ﬁle, starting with an _ so Rails knows it’s a partial

Forms render() the Partial
We can render() the partial anywhere we need
to reuse it and even pass variables into it


<%= render "form", :f => f %>
<% end %>


<% end %>

Forms render() the Partial
We can render() the partial anywhere we need
to reuse it and even pass variables into it

Partials for Models

Rails is smart about partials used to show a model

Partials for Models

It can recognize them by name (more conventions!)

Partials for Models

It will render() the proper partial for a model or
repeatedly render() the same partial for an entire
collection of models

Partials for Models

It will render() the proper partial for a model or
repeatedly render() the same partial for an entire
collection of models
A local variable is set holding the model, again named
by the type

Manual Iteration
This code works, but Rails is smart enough to
help us if we follow some conventions

<h1>Articles</h1>
<ul>
<% @articles.each do |article| %>
<li>
<%= link_to h(article.title), article_path(article) %>
<%= link_to "edit", edit_article_path(article) %>
</li>
<% end %>
</ul>

Manual Iteration
This code works, but Rails is smart enough to
help us if we follow some conventions

_article.html.erb
I moved the Article display code into
an _article.html.erb partial

<li>
<%= link_to h(article.title), article_path(article) %>
<%= link_to "edit", edit_article_path(article) %>
</li>

_article.html.erb
I moved the Article display code into
an _article.html.erb partial

Partial Found by Name
Rails looks for an _article.html.erb to render()
the Article (matching the names)

<h1>Articles</h1>
<ul>
<% @articles.each do |article| %>
<%= render article %>
<% end %>
</ul>

Partial Found by Name
Rails looks for an _article.html.erb to render()
the Article (matching the names)

One Step Further
Rails can even recognize a collection (an Array),
render()ing the partial once for each member

<h1>Articles</h1>
<ul>
<%= render @articles %>
</ul>

One Step Further
Rails can even recognize a collection (an Array),
render()ing the partial once for each member

Helpers
A tool for separating out view logic

Where to Hide View Logic

Views should be pretty dumb template ﬁlling code


Logic in your views is hard to maintain and needs to be
moved


moved
Move business logic into model methods


moved
If it’s really view logic, write a helper method


moved
If it’s really view logic, write a helper method
A helper is just a Ruby “Mixin” Rails adds to the view

These can be Combined
This is some logic though, so it belongs in a
helper method


<% end %>


<% end %>

These can be Combined
This is some logic though, so it belongs in a
helper method

Adding a Helper Method
I added this method to the Module (“Mixin”) in
app/helpers/application_helper.rb

module ApplicationHelper
def page_title(title)
content_for :page_title, title
"<h1>#{title}</h1>"
end
end

Adding a Helper Method
I added this method to the Module (“Mixin”) in
app/helpers/application_helper.rb

Switch to Using the Helper
The views are a little cleaner now with the logic
moved to the helper

<%= page_title "Add an Article" %>

<% end %>

<%= page_title "Update Article" %>

<% end %>

Switch to Using the Helper
The views are a little cleaner now with the logic
moved to the helper

Built-in Helpers
Rails comes with a ton of helpers, available in all views

Built-in Helpers
Date and time methods

Built-in Helpers
Number and currency methods

Built-in Helpers
Link and form builders

Built-in Helpers
Image, CSS, and JavaScript support methods

Built-in Helpers
Image, CSS, and JavaScript support methods
…

An Article Show Page
Uses helpers to escape HTML, show time, and
add simple formatting (like paragraphs) here

<%= page_title h(@article.title) %>

<p>posted <%= time_ago_in_words @article.created_at %> ago</p>

<%= simple_format @article.body %>

An Article Show Page
Uses helpers to escape HTML, show time, and
add simple formatting (like paragraphs) here

Filters
A tool for separating repeated
chunks of controller code

Controller Duplication
It’s very common for show, edit, update, and
destroy to start with the same lookup code

class ArticlesController < ApplicationController
# ...

def show
@article = Article.ﬁnd(params[:id])
end

def edit
end

def update
# ...
end

def destroy
# ...
end
end

Controller Duplication
It’s very common for show, edit, update, and
destroy to start with the same lookup code

Before or After an Action

Rails has ﬁlters that can be run before or after an action


before_ﬁlter() is often used to lookup model instances
or check access control


You can choose to skip the action that follows


You can choose to skip the action that follows
after_ﬁlter() isn’t used as much, but it can be handy
for statistics tracking

Using a before_ﬁlter()
You can specify a method to call before
certain actions are run

class ArticlesController < ApplicationController
before_filter :find_article, :only => %w[show edit update destroy]

# ...

def show
end

def edit
end

def update
# ...
end

def destroy
# ...
end

private

def find_article
end
end

Using a before_filter()
You can specify a method to call before
certain actions are run

DRY up Your Views Lab
Your book has instructions on how to remove
the duplication in your code

DRYing Up Rails Views and Controllers

Recommended

More Related Content

What's hot

What's hot (20)

Similar to DRYing Up Rails Views and Controllers

Similar to DRYing Up Rails Views and Controllers (20)

More from James Gray

More from James Gray (18)

Recently uploaded

Recently uploaded (20)

DRYing Up Rails Views and Controllers

Editor's Notes