Rails View Helpers for Components

The purpose of this post is to collect feedback on new Rails feature proposals, and I’ve put together a Pull Request. I welcome any comments, either here or on X or BlueSky

Translation: Ph.D.

I’d like to propose an extension to Ruby on Rails TagHelpers that will allow us to create HTML structures that were previously cumbersome.

In short, the view helper code would be written like this:

   src="/path/to/image.jpg" alt="Alternate Text" />
  

It might look like this (with my extension proposal),

def figure(src, alt:, figcaption: nil)
  tag.figure do |b|
    b << tag.img(src:, alt:)
    b << tag.figcaption(figcaption) if figcaption.present?
  end
end

Instead of this (how we currently write this using view helpers),

def figure(src, alt:, figcaption: nil)
  figure_content = tag.img(src:, alt:)
  figure_content += tag.figcaption(figcaption) if figcaption.present?
  tag.figure do
    figure_content
  end
end

The proposed approach allows us to write more complex HTML using only tag helpers (without ERb), using code that closely reflects the structure of HTML. This will simplify the creation of UI components.

Note: The HTML and view helper code snippets above are from Garrett Dimon’s blog post.

Thanks to Garrett Dimon and Adam McCray

Garrett Dimon wrote a great article “Build your ERb and Partials for more maintainable front-end code in Rails” In it he discusses alternatives to using view helpers and partial views, as well as key points to consider when choosing between the two.

Adam McCrea wrote an article in response, “Say no to Partials and Helpers for a maintainable Rails frontend”proposed “to completely abandon the ERB part and helpers, and use Phlex instead”.

While I completely agree that Phlex is awesome and refreshing, I hope my proposal addresses at least one of Adam’s main complaints and allows us to actively re-evaluate traditional Rails ERb and view helpers.

In short, I don’t want to throw out the baby with the bathwater.

Let’s take a look at ViewComponents and Phlex first

Before delving into the details of my proposal, let’s take a look at how to write the above HTML using ViewComponents and Phlex.

I hope this illustrates my point, which can be summarized as “Why do we need to write a new category for 4 lines of HTML?”.

I think there is a better way.

view element

graph component.rb

class FigureComponent < ViewComponent::Base
  def initialize(src, alt:, figcaption: nil)
    @src = src
    @alt = alt
    @figcaption = figcaption
  end
end

graph component.html.erb

   src="<%= @src %>" alt="<%= @alt %>" />
  <% if @figcaption.present? %>
    

Flex

class Components::Figure < Components::Base
  def initialize(src, alt:, figcaption: nil)
    @src = src
    @alt = alt
    @figcaption = figcaption
  end

  def view_template
    figure do
      img(src: @src, alt: @alt)
      figcaption { @figcaption } if @figcaption
    end
  end
end

this proposal

def figure(src, alt:, figcaption: nil)
  tag.figure do |b|
    b << tag.img(src:, alt:)
    b << tag.figcaption(figcaption) if figcaption.present?
  end
end

Need a simpler way

Both ViewComponent and Phlex are class-based, making them ideal for components that need to encapsulate logic.

However, with the rise of Tailwind CSS, we were encouraged to write many smaller components whose sole purpose was to dry out our code and save us from writing tons of CSS classes – which had little to no internal logic. In these cases, ViewComponents and Phlex may be overkill.

In many cases, the traditional view helpers included with Rails are sufficient for this purpose. For example, for the following HTML, you can write a very easy-to-understand helper that mirrors the HTML structure as shown below.

hypertext markup language

   src="/path/to/image.jpg" alt="Alternate Text" />

View Assistant

def figure(src, alt:)
  tag.figure do
    tag.img(src:, alt:)
  end
end

However, when

   src="/path/to/image.jpg" alt="Alternate Text" />
  

def figure(src, alt:, figcaption: nil)
  figure_content = tag.img(src:, alt:)
  figure_content += tag.figcaption(figcaption) if figcaption.present?
  tag.figure do
    figure_content
  end
end

   src="<%= src %>" alt="<%= alt %>" />
  <% if figcaption.present? %>