Rails helpers tips for writing better view

1. DOM id convention with dom_id

The dom_id helper takes a string or any object as an argument that can be converted to a dom_id. And it helps us convert an object into a unique id like this:

post = Post.find(10)
dom_id(post)               # => "post_10"
dom_id(post, new_comment)  # => "new_comment_post_10"

dom_id helper is introduced a long time and is become more valuable when working with Hotwire concept like Turbo Frame or Turbo Stream.

Turbo Frames and the dom_id helper

Because turbo_frame_tag uses the dom_id helper under the hood, so when we write

post = Post.find(1)
turbo_frame_tag(post)

It will return

<turbo-frame id="post_1"></turbo_frame>

One of the most common use cases of Turbo Frame is in-line editing.
For example, inline editing comment

• Render comment with edit comment link:

<%= turbo_frame_tag comment do %>
  <div>
    <%= comment.body %>
    <%= link_to "Edit", edit_comment_path(comment) %>
  </div>
<% end %>

• When the user clicks on the edit comment link, the frame will replace by:

<%= turbo_frame_tag @comment do %>
  <%= form_with(model: @comment) do |form| %>
  <% end %>
<% end %>

2. Conditionally class name with class_names

class_names helper is supported from Rails 6.1, make easier to conditionally apply class names in views.

• Tag builder with class_names helper method

<%= tag.div class: class_names("hidden my-2", "flex": current_user == @post.author) do %>
  <%= link_to "Edit", edit_post_path(@post), class: "btn btn-primary" %>
<% end %>

• The tag helper method automatically uses class_names , so we can write like this:

<%= tag.div class: ["hidden my-2", "flex": current_user == @post.author ] do %>
   <%= link_to "Edit", edit_post_path(@post), class: "btn btn-primary" %>
<% end %>

• In case we need different styles for different user roles:

<%= tag.span class: ["p-2 radius-2", "bg-indigo-2": current_user.admin?, "bg-indigo-4": @post.author?] do %>
  <%= @post.category %>
<% end %>