What is Turbo Frames in Rails?

While Ruby on Rails has always been regarded as an efficient framework for web application development, the introduction of Turbo Frames has taken it to another level. This article explores the concept of Turbo Frames in Ruby on Rails and how it brings both fluidity and responsiveness to applications built with Rails.

Overview

Turbo Frames is a component of the Hotwire toolkit introduced by the creators of Rails. This toolkit introduces a new paradigm shift in the way Rails applications work, bringing the responsiveness of single-page applications while maintaining the simplicity and ease of development inherent in Rails.
In essence, Turbo Frames allows Rails developers to have specific parts of their page reload instead of having to reload the entire page. This is all done without JavaScript, resulting in remarkable performance improvements.

How Turbo Frames works in practice

Assume you already have a User model created via a standard scaffold command in Rails and you want to use Turbo Frames to create a search feature for it. First, you'll start by creating a form for the search functionality in your index.html.erb:

<h1>Users</h1>

<%= link_to "New user", new_user_path %>

<%= form_with url: '/users', method: :get, data: { turbo_frame: 'search_results' } do %>
  <%= text_field_tag :query, nil, placeholder: 'search by name or email' %>
  <%= submit_tag "Search" %>
<% end %>

<turbo-frame id="search_results">
  <% if params[:query].present? %>
    <h2>Your search results:</h2>
  <% end %>
  <%= render partial: 'user', collection: @users %>
</turbo-frame>

Here, data: { turbo_frame: 'search_results' } instructs Turbo Frames that this form will be responsible for replacing the contents of a frame with the ID search_results. Next, we have created the frame itself with ID search_results. This is the area that will be replaced when a search is performed. The last step is to update our controller a bit to catch query param for searching.

class UsersController < ApplicationController
  def index
    @users = if params[:query]
               User.where('name ILIKE :search or email ilike :search', search: "%#{params[:query]}%")
             else
               User.all
             end
  end
end

This GET action will replace the original turbo-frame in the page, effectively updating the search result while keeping the rest of the page the same by filtering users by param query.

The advantage of Turbo Frames in Rails

By targeting specific parts of the page rather than the whole page, Turbo Frames creates a much smoother and more responsive experience for users. Because of the way it works, developers can code for the backend as they always have, but now with an improved user experience.

Conclusion

In summary, Turbo Frames gives Rails the power to deliver applications that are not only fast and responsive, but also retain the ease of development that Rails is known for. As such, Turbo Frames has become a key component when considering UX performance improvements for Rails applications.