Simple Refactoring of HTML

Simple Refactoring of HTML

By:, On:

This tutorial assumes you have already completed:

  1. Managing Users with Devise

As we're writing more and more code in our application templates, they become harder and harder to understand. Also, we often use same pieces of code inside of many templates. We need to have a way to extract those parts of our code or templates and reference them.

Step 1

We can refactor our code by creating a "partial" file that will hold our code. Let's try by creating a new file "_menu.html.erb" in app/views/layouts and move some code away from app/views/layouts/application.html.erb

app/views/layouts/application.html.erb


<!DOCTYPE html>
  <html>
    <head>
        <title>Demo</title>
        <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
        <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
        <%= csrf_meta_tags %>
    </head>
  <body>

  <% flash.each do |key, value| %>
      <div class="alert alert-<%= key %> alert-dismissable">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
        <%= value %>
      </div>
  <% end %>

  <!-- this is code we will cut out and put inside menu partial -->

    <nav class="navbar navbar-default" role="navigation">
        <div class="container">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <%= link_to "Demo App", root_path, class: 'navbar-brand' %>
            </div>

            <div class="collapse navbar-collapse" id="navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><%= link_to 'Posts', '#' %></li>
                    <% if current_user %>
                        <li><%= link_to 'Logout', destroy_user_session_path, method: :delete %></li>
                    <% else %>
                        <li><%= link_to 'Login', new_user_session_path %></li>
                    <% end %>
                </ul>
            </div>
        </div>
    </nav>

  <!-- this is code we will cut out -->

  <div class="container">
    <%= yield %>
  </div>

  </body>
</html>

Step 2

Paste code into new _menu.html.erb file:

app/views/layouts/_menu.html.erb


<nav class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <%= link_to "Demo App", root_path, class: 'navbar-brand' %>
    </div>

    <div class="collapse navbar-collapse" id="navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
            <li><%= link_to 'Posts', '#' %></li>
            <% if current_user %>
                <li><%= link_to 'Logout', destroy_user_session_path, method: :delete %></li>
            <% else %>
                <li><%= link_to 'Login', new_user_session_path %></li>
            <% end %>
        </ul>
    </div>
  </div>
</nav>

Step 3

We can do the same with our "flash messages."Create a new file in the same folder and call it "_flash_messages.html.erb"

app/views/layouts/_flash_messages.html.erb


<% flash.each do |key, value| %>
    <div class="alert alert-<%= key %> alert-dismissable">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
        <%= value %>
    </div>
<% end %>

Step 4

We can go back to the original file, remove all unnecessary code, and replace it with render


<!DOCTYPE html>
  <html>
    <head>
        <title>Demo</title>
        <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
        <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
        <%= csrf_meta_tags %>
    </head>
  <body>

  <%= render 'layouts/flash_messages' %>
  <%= render 'layouts/menu' %>

  <div class="container">
    <%= yield %>
  </div>

  </body>
</html>

Much better. Make sure everything works at this point (as our refactoring shouldn't change anything).

If you login you will be able to mark this tutorial as finished to track your progress



Comment

You can login to comment


Previous Next