We "hotwired" a Rails app. Want to see how?

We’re considering cranking up a new course… and we need your help!

You know we’re big fans of both Ruby/Rails and Elixir/Phoenix. They each have their place depending on various project and people factors. And it’s always good to have options.

Last year we leaned heavily into Phoenix and created an in-depth (and popular!) LiveView course. And about the time we were wrapping up that course, Hotwire arrived on the Rails scene. Hotwire is to Rails what LiveView is to Phoenix.

So we started looking at how to use Hotwire in our Rails apps. You may not know that our entire business runs on Rails, and has for the past 15 years. And we identified a couple areas that we wanted to “hotwire”.

But we stalled out…

Initially Hotwire didn’t “click” for us and that felt frustrating!

It wasn’t because the fundamental concepts were tricky to understand. Conceptually, Hotwire is fairly straightforward. It lets you dynamically update parts of a page in response to user interactions without writing JavaScript.

It’s is a pragmatic alternative to the complexity of building single-page apps. And, no surprise, we love pragmatic solutions!

But we were puzzled with how to use Hotwire in practice.

• What’s the diff between Turbo Drive, Turbo Frames, and Turbo Streams?

• Where does Stimulus fit in?

• When do you use one versus the other, and why?

• How do you incrementally enhance an existing Rails app to take advantage of Hotwire?

To answer these and other questions, we did what we always do.

We hunkered down and hammered through it. 🤓 That involved weeks of research, a bunch of back-of-the-napkin sketches, and experimenting with lots of code.

Then we “hotwired” a Rails app.

No, not our production app. It has waaay too much code to work around when we’re in “learning” mode, not to mention being critical to the business. We much prefer learning with a small, carefree application. A safe environment where we could really kick the tires and throw caution to the wind.

And it just so happens we had such an app sitting on the shelf. So we upgraded it to Rails 6, gave it a little polish, and worked through how to add facets of Hotwire one page at a time.

Along the way there was plenty of head scratching, troubleshooting, and refactoring. You know how it goes, yeah? Lots of trial and error. 🤪 But in the end we were really pleased with the results.

And we learned a ton!

Now we can enthusiastically say, “Aha, we get it!” With a good mental model for how Hotwire works, everything “clicks” together.

Better yet, we know when, where, why, and how to use it with confidence.

So we’re ready to start using Hotwire in our Studio apps. 🙌

Are you in the same boat we were?

You’ve heard about Hotwire but you’re frustrated by having a lot of unanswered (and important) questions:

• What is it?

• How do the major parts of Hotwire fit together?

• Why and when would I use it?

• How does it work?

• Is it a substitute for using React, Vue, or other JS?

• If it’s so cool, how do I take full advantage of it?

😫 😫 😫

Imagine skipping the sour face and going straight to the sweet spot.

For reals? You betcha.

We have an example application and an outline for a course that will teach you Hotwire (and help answer these questions) without swallowing up enormous amounts of your time.

Hotwire isn’t a completely new way to write Rails apps. It builds on skills you already have. Everything you know about Rails is still in play. Hotwire just brings new tricks to the game. ✨

So by assuming you already know Rails – and we have a comprehensive Rails course for that – it’ll only take a couple hours to learn Hotwire.

😀 😀 😀

Yeah, with the right course, you can learn Hotwire lickety-split!

Basically, we’d distill everything we learned into a compact, clear set of videos and notes for you.

The course would start with the big picture of Hotwire and then break down the concepts. Without a good mental model, Hotwire can be puzzling (or at least it was for us).

Then we’d make the concepts concrete by applying them step-by-step to the Rails app we used to learn Hotwire. In our usual style of animations, super clear explanations, and live coding, you’d see how to incrementally add Hotwire to an existing Rails app.

You’d come away with a solid understanding of how Hotwire works, along with ideas and examples for adding it to your Rails apps.

Imagine learning (in hours, not days) how to increase the speed and responsiveness of your apps through incremental enhancements. 🚀

Would you dig a course like that?

If so, please let us know by adding your name to our Hotwire-specific mailing list. That way we can notify you if we green-light the course, and send you progress updates along the way. Don’t worry, you can unsubscribe at any time. Thanks!