Hotwire for Rails Developers

Welcome! We start by getting a visual overview of all the shiny parts of Hotwire, how they fit together, and the problems they solve. And we get your development environment set up so you can run the Rails app and follow along with us.

Next we take a quick tour of the Rails app we'll "hotwire". It's all about fishing... and hopefully catching! While touring the app, we identify areas we'd like to incrementally improve using Hotwire. (Give the final app a spin!)

Before starting to change the application, we quickly help you get familiar with how it's designed. Since you're an experienced Rails developer, you won't find anything out of the ordinary in the code. The initial version is a classic server-rendered, RESTful Rails app.

Now we're ready to start incrementally introducing facets of Hotwire into the app to make it feel faster and more responsive. And the first step is a no-brainer: use Turbo Drive to speed up page navigation across the entire app. We explore how using it avoids full page loads.

Turbo Drive is a great, easy start, but it's usually not enough. The next level is using Turbo Frames to independently update parts of a page. Major refactoring? Nope. Once you understand how frames work, it's just a minor code change. And no custom JavaScript required.

Hold up, there's a problem! Navigating within a Turbo Frame only changes the frame's contents. But you often need a link that navigates outside of a frame. When is that necessary, and how do you target things outside a frame? That's what this short module is all about.

To dynamically change multiple parts of a page in one go, we introduce Turbo Streams and explore exactly how they work. Again, no sweeping code changes. You can reuse your existing Rails partials to render Turbo Stream responses with ease. And still no custom JavaScript.

Behind the scenes, how does Rails handle a Turbo Stream request? And how do we use that knowledge to respond to Turbo Stream requests differently than regular HTML requests? The answers are very empowering!

When using a search form, you often want to dynamically update the results while not losing form focus. What's the best practice for doing that? We'll show you a trusty technique you can use to get snappy results on any search page.

Up to this point, we haven't written any custom JavaScript. But JavaScript is powerful stuff, and sometimes a small amount of it is exactly what you need. Stimulus gives us an easy way to organize reusable bits of JavaScript and attach them to server-rendered HTML.

Here's another common scenario: pop some data into a form, submit it to create a record in the database, and dynamically add the new thing to a list. Using Turbo Streams we can efficiently append and prepend elements to a list without changing the existing contents. And as a bonus, we also update totals on another part of the page.

How do you display validation errors on a form with Hotwire? Inline and instantly, of course! And since everything is server-rendered in one unified code base, we can reuse all the ActiveRecord model validations already set up to ensure data integrity.

One of the compelling benefits of Hotwire is that it makes easy things easy. You know, things like dynamically zapping an item from a list. Whereas historically you may have written custom JavaScript to keep everything on the page in sync, now we can use Turbo Streams.

When do you use Turbo Frames vs. Turbo Streams, and why? Inline editing is a great example for working through these types of design decisions. In this case, we end up using both and you understand the interplay between them. The takeaway is a clear mental model and nifty technique you can apply with confidence.

Once you start integrating Hotwire into your app, you'll need to render flashes a bit differently than you're used to. Using a Turbo Stream and a Stimulus controller, we animate flash messages the Hotwire way.

Almost every app has tabular data that needs to be filtered, sorted, and paginated. Using the techniques we've learned so far (along with a few new tricks) we turbo-charge a datatable. That way, when you change the filter criteria or sort a column—boom!—the page dynamically updates. And we make sure the URL automatically updates so pages can be bookmarked. This example has you covered top to bottom!

The role of Stimulus is easily misunderstood. When do you reach for it? And how do you use Stimulus to complement what's already possible with Turbo? The best way to answer these questions is to see Stimulus used in a variety of real-life examples. So here's another one! And it deals with performing more complex operations when a page changes.

Want to invite your favorite JavaScript library to the Hotwire party? For example, we want a JS range slider library to filter catches. This gives us an opportunity to learn Stimulus in more depth with yet another real-life example. And this one involves a little of everything: lifecycle callbacks, values, targets, and handling and dispatching custom events. Everything you'll need to integrate pretty much any JS library!

Zip, zap, zooey! Real-time updates are expected in modern web apps. And with Hotwire, you don't have to jump through a bunch of hoops to get in on the action. Zing! We broadcast Turbo Streams to keep an activity timeline in sync across multiple browsers.

The more examples you see, the more experience you gain. And this app has a double whammy of real-life broadcasting features. In this extended example, we use both Turbo Frames and Streams to update a page differently depending on who's viewing it.

Why load everything on a page from the get-go when you can fetch content lazily? One powerful aspect of Turbo Frames is they can be lazy-loaded. Leave your JavaScript at the door. After a basic example, we use this technique to implement infinite scrolling.