Hotwire: Unlocking Your Rails Apps’ Full Potential!

At mmtm, we love Hotwire. We started using Hotwire before it was even officially released and quickly found it easy to use and extremely powerful. Since then, it’s changed how we build our client-facing applications, and significantly sped up our development workflow.

Hotwire allows us to mix the responsiveness of Single Page Applications (SPAs) with the reliability of traditional web applications — a real win-win... Even the creator of Ruby on Rails is a fan 👇

Credit: @dhh - twitter.com

We use Hotwire on almost every project. We've even gone as far as transitioning our legacy apps over to Hotwire wherever possible. Hotwire consists of 3 parts, Stimulus JS, Turbo, and Strada. Each facilitating a different part of the process.

When Should I Use Hotwire? 🤔

Hotwire is great when you want to update small sections of a page using Turbo — like a flash message or toast. You can either trigger these updates using traditional interactions attached to a Turbo Frame to avoid refreshing the page, or stream changes made elsewhere down to the user using Turbo Streams.

Turbo's Stimulus inclusion allows you to easily sprinkle in interactivity at any point, such as a close button or automatic removal after 5 seconds without complex event listeners.

Turbo's final trick is Turbo Drive, allowing you to navigate around your web application without causing entire page refreshes. It allows you to avoid reloading your web application resources for snappier interactions.

When Should I NOT Use Hotwire? 🙅‍♂️

We find Hotwire suitable for almost all of our projects at mmtm. However, there are a few scenarios in which we might not use it:

1. With Existing SPAs — It can be tricky to integrate with existing complex SPAs and/or in places where you're using the Shadow Dom e.g. Vue.

2. To Keep Things Simple — Turbo can complicate the development process; you might need to update multiple parts of a page at the same time e.g. a message count in the sidebar as well as a message thread itself. Sometimes a plain old page refresh is easier, especially with Turbo 8 Morphing.

3. To Give Loading Feedback — Because Turbo integrations hijack the normal browser loading process, it can be hard for a user to understand something is loading. Where this is unclear, you may need to create additional loading spinners or fallbacks.

What about iOS and Android Development? 📱

The final part of the Hotwire package is Strada. Strada enables us to create mobile applications with ease on both iOS and Android, acting as a bridge between the web application and the mobile application. It allows us to create native mobile apps without having to rely on other technologies and build functionality twice over.

Conclusion

Hotwire is more than just a development tool — it's a new way to approach creating applications. Its simplicity and power have allowed us to streamline our work, reducing complexities that often bogged us down. Thanks to Hotwire, we’ve also greatly enhanced the user experience of our applications.

In short, Hotwire is a game-changer, and we can't wait to see where it takes us in the future... ⚡

Useful Resources 🔗

• See it in action at Hotwired.dev.
• Discover Hotwire components at Stimulus Components and at Stimulus Use.
• Explore StimulusJs at Awesome StimulusJS.
• Enhance your Rails application with Turbo 8 Morphing.
• A roadmap for building Turbo Native mobile apps.