Building Responsive Rails Apps With Hotwire | by Aleksandr Ulanov | Jul, 2022

In this article we’ll go through the basics of Hotwire, as well as build a sample app using Hotwire and Ruby on Rails

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 really 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, but without writing a ton of JavaScript. Well, sounds great, but what is Hotwire?

In this article, we’ll go through the basics of Hotwire, as well as build a sample app using it.

On June 25, 2013, Rails 4 was released introducing Turbolinks. What Turbolinks are doing for “responsiveness” of Rails? Turbolinks intercept all link clicks and instead of sending regular GET request it sends asynchronous JavaScript request (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 bodynot only changed parts of the page.

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

Then we can get to some JS components on the frontend (eg 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 nice, 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 frontend to use only client-side rendering, ie so-called Single Page Application (SPA). With this approach, the frontend is a separate application that sends AJAX requests to the Rails server, and Rails is 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.

Hotwire is an alternative approach to building SPA-like web apps, rendering all of the HTML server sides using Rails templates while keeping the app fast and responsive.

Keeping rendering on the server side makes your development experience simple and more productive. Hotwire name basically is an abbreviation for HTML Over the Wirewhich 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.

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 into components that can be partially updated utilizing WebSockets as a transport. If you 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 Trubo gem consists of Turbo Drive, Turbo Frames, and Turbo Streams.

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. The same case as with Turbolinks — no full page reload, which may be fast for some pages, but not really 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.

You can simply make a part of a page a Turbo Fram — 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.

When a user interacts with an element on the page (eg 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 of this without writing any of the Javascript code. But even if you need some custom Javascript for any reason (eg some animation, date picker, etc.), Hotwire got you covered here with Stimulus.

Just like Rails which has its controllers with actions, Stimulus allows you to organize client-side code in a similar way. You have a controller, which is a Javascript object, which defines actions, ie 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.

Now having read all of the above, you might be wondering: how do I work with it? Hotwire is pretty simple to use, all that we need is a standard Rails app and 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 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 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 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 the rails server with rails server command or ./bin/dev (which will also watch CSS and JavaScript changes) in your terminal and, when you visit http://localhost:3000 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 tell Hotwire to use WebSocket for updates of a frame identified with :book_idand turbo_frame_tag identifies a frame, which can be replaced with a 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 one tells Turbo to use :books Turbo Stream for updates on create, and the second one 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 to also 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 just 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 frontend, it might be much more productive to give Hotwire a try. There’s a big chance it will make you happy.

Leave a Comment