🎶 The Partial Refactor Shuffle 🎶
(To the tune of "The Hokey Pokey")
You take some messy code,
You put it in a _partial,
You render it right there—
That's refactor magic!
You DRY up all the views,
No more repeats for you,
You shake the bloat away—
That's how Rails do!
Chorus:
That’s what it’s all about! (Clap clap!)
That’s what it’s all about! (Clap clap!)
Keep your views clean, no need to scream—
That’s what it’s all about!
Now that we’ve set the mood with a little refactoring jingle, let’s get down to business. Partials in Rails are like breaking a giant LEGO castle into smaller, reusable chunks—except with fewer foot injuries. This article will walk through how we chopped up Salt & Tar’s monolithic view into tidy partials, setting the stage for some helper magic later.
This article is going to be a little quirky. There is a lot of work to do and some of these partials will require the data from the helper. However, we can get started and figure out this partial concept before geeking out on helpers. Before we get too far into it, here is the gist for the original page code.
This article will deal with layout or structure, and lay the groundwork for building helpers. With that in mind, here is a image of the new file structure. There are so many ways this could have gone, and it is likely I will re-organize this later, but the goal here is to just get the page refactored. You get to where you want to go, one step at a time.
In the above image you can see the file structure for the new partials. So what is a partial? Well it is a reusable chuck of code, typically html, that allows for modular construction and better management of data in the view. If you are coming from the multiverse of javascript frameworks, a component. They are essentially templates you can create that allow for code reuse.
Partials aren’t just about organization—they’re about sanity. By splitting views into modular pieces, you:
Avoid copy-paste disasters
Make updates easier (change once, render everywhere)
Prepare for helper-powered dynamism (coming soon!)
Let’s see how Salt & Tar’s page got a partial makeover.
Review the code in the gist mentioned earlier. To help me navigate it I left comments for sections and used the id attribute for targeting help if I needed it. It would be nice to pull those sections out. Make them their own block of code and then just plug them in where they are needed. Partials give you that flexibility so you can make your html, modular.
So now salt_and_tar/ holds partials like _header.html.erb and _hero.html.erb, while social cards live in social_cards/.
Pro tip: Rails magically finds "
header" when you call<%= render "header" %>, no underscore needed!
Funny right? Not like, ha ha funny. More like WHAT THE Funny, funny. Promise, not the last weird thing you will learn about Rails. Here is my index.html.erb:
<section class="bg-swabbie-st-drk-primary flex flex-col justify-center items-center w-full text-base-dark">
<%= render "header" %>
<%= render "hero" %>
<%= render "promotion" %>
<%= render "features" %>
<%= render "video" %>
</section>Where the partials are is important. I can get by with calling them straight because they are in the same folder. If one was in the “social_cards” folder then I would need to provide that location as well, like “<% render “social_cards/card” %>”, because the card partial is in the social_cards folder. You can take a moment to look through the docs for more.
<div id="home" class="mt-8 <%= responsive_width_class %>">
<header class="static max-w-5xl">
<div class="block rounded-t-lg bg-white">
<div class="block max-w-5xl">
<%= link_to root_path, class: "relative mt-1 ml-1" do %>
<%= image_tag("saltandtar/logo.svg", class: "block ml-5") %>
<% end %>
</div>
</div>
</header>
</div>Here is my header partial. If you read the other articles, you have seen this already and have a idea of where the logo.svg image is and what the tag “<%= responsive_width_class %>” means.
For a quick review, the images for the page are in app/assets/images/saltandtar. This allows then to be loaded and used through the assets pipeline in Rails. The Ruby tag points to a helper method, which we have not got to yet. Seeing as you have seen this one before, here is the “hero” partial:
<div id="home" class="flex items-center justify-between bg-white <%= responsive_width_class %>">
<div class="flex flex-col items-center justify-center w-full">
<div class="flex flex-col sm:flex-row justify-evenly w-full">
<div class="flex flex-col items-center justify-center">
<h1 class="text-center font-fell mt-10 text-5xl lg:text-7xl drop-shadow-dark">Salt and Tar</h1>
<h3 class="text-center font-Inconsolata text-xl lg:text-2xl">
Journey of a wooden boat
</h3>
<div class="flex justify-around my-16 w-full">
<%= standard_link("Archive", archive_salt_and_tar_index_path, class: "text-swabbie-st-drk-primary bg-white border-swabbie-st-drk-primary") %>
<%= standard_link("MILK-00", root_path, class: "text-white bg-swabbie-st-drk-primary border-swabbie-st-drk-primary") %>
</div>
</div>
<div class="flex justify-center items-center">
<%= image_tag("saltandtar/hero_image.png", class: "w-[15rem] drop-shadow-dark") %>
</div>
</div>
<div class="mt-4">
<%= image_tag("saltandtar/divider.svg", alt: "border bottom") %>
</div>
</div>
</div>I encourage you to match these up with the original code in the gist. You can get a idea of how this works and keep moving forward with building your own partials. In the social cards folder you will have noticed one called grid and one called list. If you review the gist you will see that one set of cards is in a grid, and one is a list.
Here is a look at the grid partials. This grid partial is where the magic starts: it loops through data, slices it into pairs, and hands each piece to the _card partial, like a conveyor belt of reusable UI. Helpers will supercharge this later, but even now, it’s chef’s kiss for DRY code. Here is the code:
<div class="hidden md:flex flex-col justify-evenly w-full md:w-1/2">
<% social_media_data.each_slice(2) do |slice| %>
<div class="flex justify-evenly my-3 w-full">
<% slice.each do |platform, data| %>
<%= render "salt_and_tar/social_cards/card", platform: platform, data: data %>
<% end %>
</div>
<% end %>
</div>I don’t think I need to lay out all the partials in this article. That would be a little silly I think. Here is the Github if you are interested and I am sure I will dive into more as we work through helpers. I want to show you how it all plugs up. Besides, code is fun.
I hope you have enjoyed the series so far. Next up,
🎶 HELP, I need some helpers 🎶, where we’ll turn repetitive code into Ruby-powered wizardry.