Image from robbieMacphotos on Flickr, used under Creative Commons license.

Partials Simplify Rails Web Design

In working with the Ruby on Rails based TerraCycle site, I’ve become a huge fan of the code framework from a web designer’s point of view. The simplicity and convention based aspects of Rails extend beyond the back-end code and functionality, and make my front-end work significantly easier too. One of the most basic benefits of Rails for web design is the flexibility offered by “partials”, which allow the division of web pages and the sharing of content across widely different areas of the site.

Bite size chunks

I use simple Rails partial files as building blocks for full web pages. For example a partial might contain the code necessary for the header section of the site, or a sidebar, or can be subdivided even further. Partials can also be nested for even greater convenience. You could, in theory, create a website from multiple partials each containing a single line of HTML (though this would be ridiculous in practical terms).

This is not to say that Rails is unique in providing the opportunity to break code into sections like this. I work a lot in PHP as well, and so have used the “include” statement regularly (or WordPress template tags such as get_header, which are in some senses a more direct comparison to the Rails partial). Personally I find Rails partials a little more elegant and easy to use, providing greater flexibility for less work.

How it works

We take an application.html.erb file, which is the default layout file for our web page. I want to be able to call our header from a partial, _header.html.erb (one of the simple aspects of partials I like is the ‘_’ prefix on all partial files, which makes it very easy to see at a glance which files are partials and which aren’t).

The application.html.erb file

...
<body>
  <%= render 'header' %>
  ...
</body>
...

The _header.html.erb file

<header>
  <nav>
    <ul>
      <li><a href="#">Option 1</a></li>
      <li><a href="#">Option 2</a></li>
      ...
    </ul>
  </nav>
</header>

The final rendered code

...
<body>
  <header>
    <nav>
      <ul>
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>
        ...
      </ul>
    </nav>
  </header>
  ...
</body>
...

Greater flexibility

This is a very simple example of the use of a Rails partial. The call provides me with far greater flexibility in structuring web pages and helps to simplify Rails web design coding. A home page like the TerraCycle website can become quite an extensive piece of coding, yet the actual home.html.erb layout file is only 34 lines. Fully rendered as the final HTML, the page is 1393 lines! The initial home.html.erb pulls in various partials, often with further partials nested inside them. These partials contain both HTML and Rails code, which ultimately collate into the complex TerraCycle home page.

It’s also easy to conditionally load partials using Rails’ “if” or “unless” statements. This provides further flexibility, for example allowing certain content to be loaded dependent on a user state (the TerraCycle site loads different content for a user dependent not simply on whether they are logged in or not, but also on whether their profile has been completed).

Part of Rails’ overall ease of use

Rails partials are not unique in their function, but they are just part of a general ease-of-use that makes Rails a highly flexible and convenient framework for design and deployment of front end code. As a further advantage, I’ve found that reducing the code to small sections has also made it far easier for me to learn some of the more in-depth aspects of Rails. Small sections of code make for easier identification of specific functions, an important step in going beyond simply a surface understanding of Rails but a far deeper knowledge that allows me to more effectively link my front-end design work with back-end functionality.

If you enjoyed this post, why not subscribe to receive all the latest stories from Shiny Toy Robots?

Tagged as: ,