Building Responsive Rails Apps With Hotwire

If you're developing modern single-page applications with Ruby on Rails, you're most likely using some fancy JS framework for your UI to be updated nicely without page reloads. And there is not much you can do without using them; that's kind of a standard these days... until Rails got Hotwire.

With Hotwire, you can get fast and responsive web applications without writing a ton of Javascript. Well, sounds great, but what is Hotwire? In this article, we'll go through the basics of Hotwire and build a sample app using it.

What Options Are There for Responsive Rails Apps?

On June 25, 2013, Rails 4 was released, introducing Turbolinks. What are Turbolinks doing for the "responsiveness" of Rails? Turbolinks intercept all link clicks, and instead of sending regular GET requests, it sends asynchronous Javascript requests (AJAX) to fetch HTML. It then merges the head tag of the fetched page and replaces the whole body tag of the page, so there is no full page reload. No stylesheets or scripts reloading, which means faster page navigation. But it still is replacing the whole body, not only changing parts of the page.

But what if you want to reload only parts that changed? You could use Rails AJAX helpers when you mark some elements as data-remote='true', which makes those elements send AJAX GET/POST requests instead of regular GET/POST requests. And Rails responds with generated JS code, which then is executed by the browser to dynamically update those parts of the page.

Then we can get to some JS components on the front end (e.g., using React) to make an app feel even more responsive. So, the JS component sends an AJAX request, and the Rails server responds to it with JSON data. Then frontend framework transforms received JSON to DOM elements and updates DOM to reflect those changes. And it works nicely; the only downside is that it's mixing server-side rendering and client-side rendering on a page.

Another, more traditional way these days is going all in and using React, Vue, or another JS framework on the front end to use only client-side rendering, i.e., so-called Single Page Application (SPA). With this approach, the front end is a separate application that sends AJAX requests to the Rails server, and Rails is solely a JSON API. As you probably know, there's a whole lot of complexity in building, maintaining, and deploying two separate apps with interchangeable data.

But what if you could build a SPA without all that complexity of building two separate apps and writing lots of Javascript code? Here's what Hotwire can help you with.

What Is Hotwire?

Hotwire is an alternative approach to building SPA-like web apps, rendering all HTML server sides using Rails templates while keeping the app fast and responsive. Keeping rendering on the server side makes your development experience simpler and more productive. Hotwire name basically is an abbreviation for `HTML Over the Wire,` which means sending generated HTML instead of JSON from the server to the client. It also does not require you to write much custom javascript code. Hotwire is made of Turbo and Stimulus.

What Is Turbo?

Turbo gem is the heart of Hotwire. It's a set of technologies to dynamically update the page, which speeds up navigation and form submission by dividing pages into components that can be partially updated utilizing WebSockets as a transport. If you have ever worked with WebSockets in Rails, you most likely know that Rails is using ActionCable to handle WebSockets connection, and it's included in Rails by default. And Turbo gem consists of Turbo Drive, Turbo Frames, and Turbo Streams.

Turbo Drive

Turbo Drive is used to intercept link clicks (just like Turbolinks were doing it previously) and also intercept form submissions. Turbo Drive then merges the head tag of a page and replaces the body tag of the page. In the same case as with Turbolinks, no full page reload, which may be fast for some pages, but not as responsive as the 2022 app is expected to be, so you might consider updating only some parts of the pages, not the whole body. Here's where Turboframes come in handy.

Turbo Frames

You can simply make a part of a page a Turbo Frame by simply wrapping it in a turbo-frame tag with a unique id.

<turbo-frame id="13">
  ...
</turbo-frame>

This makes any interactions within the frame to be scoped to that frame. Any interaction within that frame sends an AJAX request to the Rails server, and the server responds with an HTML only for that frame, which allows Turbo to automatically replace only that frame on a page. And this does not require writing any Javascript.

But what if you want to update multiple parts of the page at the same time? That's what Turbo Streams can help you with.

Turbo Streams

When a user interacts with an element on the page (e.g., form/link) and Turbo Drive sends an AJAX request to the server, the server responds with an HTML consisting of Turbo Stream elements. And those are like directions for Turbo to follow in order to update affected parts of the page. Turbo Streams include seven available actions: append, prepend, (insert) before, (insert) after, replace, update, and remove:

<turbo-stream action="append" target="target_a">
  <template>
    HTML
  </template>
</turbo-stream>

<turbo-stream action="prepend" target="target_b">
  <template>
    HTML
  </template>
</turbo-stream>

<turbo-stream action="replace" target="target_c">
  <template>
    HTML
  </template>
</turbo-stream>

Turbo Streams are using ActionCable to deliver updates to multiple clients via WebSockets asynchronously. Again, you're getting all this without writing any Javascript code. But even if you need some custom Javascript for any reason (e.g., some animation, date picker, etc.), Hotwire got you covered here with Stimulus.

What Is Stimulus?

Like Rails, which has its controllers with actions, Stimulus allows you to organize client-side code similarly. You have a controller, which is a Javascript object which defines actions, i.e., Javascript functions. Then you connect the controller action to the interactive element on a page using HTML attributes. The action is then run in response when DOM events are triggered.

Let's Create a Sample Rails App With Hotwire

Having read all of the above, you might wonder how I work with it. Hotwire is pretty simple to use; all that we need is a standard Rails app and a Redis server.

First, you need to have Ruby 3 and Rails 7 and the Redis server to be installed, I'm not going to cover the installation process of those, but you can easily find any instructions you need based on your platform.

So, let's set up a new Rails app (we'll be using Bootstrap as a CSS option, just to make our app look a bit better):

rails new bookstore --css bootstrap

After Rails generated all the needed files, cd into the app directory:

cd bookstore

Rails 7 initial app has everything we need to start using Hotwire; the Gemfile includes Redis gem, Turbo-rails gem, and Stimulus-rails.

Make sure that you have the Redis server up and running. Redis is required because it's used by ActionCable to store WebSockets-related information.

The default address and port for Rails to connect to the Redis server are set in the config/cable.yml

development:
  adapter: redis
  url: redis://localhost:6379/1

Then we can generate our model, controller, and migration, which will be "Books" in our case of Bookstore. It'll have a string title, description of type text, and likes counter as an integer:

rails g scaffold books title:string description:text likes:integer

Let's fix generated migration so we have 0 likes by default for any book we add to the DB:

class CreateBooks < ActiveRecord::Migration[7.0]
  def change
    create_table :books do |t|
      t.string :title
      t.text :description
      t.integer :likes, default: 0
      t.timestamps
    end
  end
end

Don't forget to create a database for our app and run it in the terminal:

rake db:create db:migrate

Let's make the books list page the root page of the app, open config/routes.rb, and add the missing root declaration:

Rails.application.routes.draw do
  root 'books#index'
  resources :books
end

Then you should be able to run rails server with rails server command or ./bin/dev (which will also watch CSS and js changes) in your terminal, and when you visit this page in your browser, you should see something like this:

Let's change the Book partial app/views/books/_book.html.erb to this:

<%= turbo_stream_from "book_#{book.id}" %>

<%= turbo_frame_tag "book_#{book.id}" do %>
  <div style="background: lightblue; padding: 10px; width: 400px;">
    <h2><%= book.title %></h2>
    <p><%= book.description %></p>
    <br>
    <%= button_to "Like (#{book.likes})", book_path(book, book: { likes: (book.likes + 1) }), method: :put %>
  </div>
  <br/>
<% end %>

turbo_stream_from tells Hotwire to use WebSocket for updates of a frame identified with :book_id, and turbo_frame_tag identifies a frame which can be replaced with partial on update.

To tell Turbo that we want to add each newly created book to the start of the books list and update the likes count on each like button click, we need to add  the following callbacks to app/models/book.rb file (also let's add a validation):

class Book < ApplicationRecord
  after_create_commit { broadcast_prepend_to :books }
  after_update_commit { broadcast_replace_to "book_#{id}" }
  validates :title, :description, presence: true
end

The first tells Turbo to use :books Turbo Stream for updates on create, and the second tells to use :book_id to replace partial with updates.

Then let's fix the ordering in our books controller and also add the new book variable assignment (so we could create a book from the root path) in app/controllers/books_controller.rb:

...
def index
  @books = Book.order(created_at: :desc)
  @book = Book.new
end
...

We should also edit app/views/books/index.html.erb to add our Turbo Streams and Turbo Frames:

<h1>Books</h1>
<%= turbo_stream_from :books %>

<%= turbo_frame_tag :book_form do %>
  <%= render 'books/form', book: @book %>
<% end %>

<%= turbo_frame_tag :books do %>
  <%= render @books %>
<% end %>

To avoid redirects when we create a new book or update an existing one and stay on the same main page, we need also to edit, create and update actions in app/controllers/books_controller.rb:

...
def create
  @book = Book.new(book_params)

  respond_to do |format|
    if @book.save
      format.html { redirect_to root_path }
    else
      format.turbo_stream { render turbo_stream: turbo_stream.replace(@book, partial: 'books/form', locals: { book: @book }) }
      format.html { render :new, status: :unprocessable_entity }
    end
  end
end

def update
  respond_to do |format|
    if @book.update(book_params)
      format.html { redirect_to root_path }
    else
      format.html { render :edit, status: :unprocessable_entity }
    end
  end
end
...

At this point, our bookstore app should look like this:

Any time you create a new book using the form on the main page, Turbo prepends it to the books list without page reloads. If you open multiple tabs in the browser - it will update all of them. "Like" buttons are also working without page reloads, and update likes counts for the book in all of the tabs. And all of this with not a single line of Javascript code. How cool is that?

This sample application is a basic example of what you can do with Hotwire in Rails, but you can do much more complex things with Turbo and Stimulus.

So if you want to start a new SPA with Rails, think twice if you need React, Vue, or any other framework on the front end; it might be much more productive to give Hotwire a try. There's a big chance it will make you happy.