Hotwire stands for HTML over the wire. It is a suite of front-end frameworks shipped with Rails that tries to get the best of both worlds, keeping the original, simple web architecture of sending HTML over the wire, while not losing the performance benefits of Single Page Applications.
Hotwire is not a single framework; it’s a suite of different frameworks that allow you to send HTML responses over the wire.
Turbo uses different techniques to reduce the amount of JavaScript most web applications have to write. Turbo lets you send HTML from the server (both in response to user interaction, such as clicking links or submitting forms, or via WebSockets) which updates parts of the page dynamically, without any custom JavaScript.
Stimulus is a JavaScript framework when you absolutely need to use (or sprinkle, as DHH would say) some JavaScript. You use Stimulus where you need client-side interactivity. Learn how Stimulus works.
Strada works with native applications, making it easy to progressively level-up web interactions with native replacements.
Turbo
Turbo is the most important framework in Hotwire. It uses multiple techniques to provide a SPA-like experience, while still keeping the simplicity of traditional web applications, i.e. sending HTML over the wire.
Turbo Drive accelerates links and form submissions. It listens for link clicks or form submissions, performs them in the background, and updates the page without a full reload.
Turbo Frames divides pages into independent contexts called frames (not iframes). Turbo captures link clicks and form submissions inside a frame, automatically updating the frame contents after receiving a response.
Turbo Streams delivers page changes over WebSocket, SSE, or in response to form submissions using just HTML and a set of CRUD-like actions.
If all these different frameworks and techniques are already sounding confusing, don’t worry. You won’t be using all of them equally, all the time. Here’s a diagram that might help you understand how it all fits together.
Turbo makes the majority of Hotwire. When you need to work with some JavaScript, you use Stimulus, and you only need Strada when your application needs to have native apps on Android and iOS.
Inside Turbo, Turbo Drive will satisfy most of your needs for fast performance. When you need additional responsiveness, you use Turbo Frames, and finally, in a few cases where you need to bring your application alive, such as sending live updates from the server, you will use Turbo Streams.
I have found Turbo's development experience much more intuitive and pleasurable than the countless SPA frameworks I've tried over the years. Now after working full-time for almost two years on a Hotwired app that replaced a big React codebase, I am more convinced than ever that Hotwire is here to stay.
I hope this brief introduction helped you get a big-picture overview of Hotwire and understand how different parts of it fit together to provide a cohesive solution for the front-end ecosystem. In the next section, we will explore each component of Turbo i.e. Drive, Frames, and Streams, in detail.