I was listening to the Remote Ruby podcast a few days ago and came across an episode featuring DHH, the creator of Rails. In the episode he introduced a very intriguing topic...
Hotwire is an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire.
As a developer who has used Rails as both a fullstack solution and as an API coupled with React on the frontend, I was immediately intrigued. I have experienced the struggles of managing complicated state in order to create a 'responsive' SPA. I have also experienced the lack of responsiveness in my apps before implementing JS. Maybe this new approach could be the future of development, a happy medium of responsive webpages without megabytes of JS. Before we dive into what Hotwire is, let's talk about the problem it is attempting to solve.
The Rise of SPAs
Currently JavaScript dominates web development. Most modern applications utilize some sort of JS library or framework to create snappy web apps. These single page applications offer a very responsive feeling page but require large bundled files of JavaScript. Managing state in these web apps can also prove difficult. I have had my fair share of fun managing complex form state in a React app and it can/did prove difficult. Hotwire seeks to replace these JavaScript heavy SPAs. Obviously attempting to solve these problems with good old HTML does not make the development task easy but one could argue JavaScript + HTML = complexity; therefore, take most of the JavaScript out of the equation and things do get simpler. DHH argues that sending JSON back and forth between the client and server is unneccessary when HTML serves the same purpose of being a data format.
Hotwire
Hotwire is made of three components: Turbo, Stimulus JS, and Strada. Combined these make up this new approach to web development. Let's dive into each component.
Turbo
Turbo is the heart of Hotwire. I like to think of it as an HTML focused React - complete with components, lazy loading, and even native tooling. The official site states that Turbo can be broken down into 4 main parts:
Turbo Drive
Instead of requesting and rendering a new page when your user clicks a link, Turbo Drive will, with the help of JavaScript, make a fetch request for the new page, render the HTML result from the fetch, and update the URL using the History API. Take that SPAs! The same goes for form submission. All AJAX here!
Turbo Frames
This is the component part I was referring to. We can break up various parts of our page and each of them can have their own scoped navigation. The frames can also be lazy loaded and allow for parallel execution. The benefit of frames is also apparent when we think of mobile development. Our frames are already ready for native screens!
Turbo Streams
Streams allow us to make changes to the DOM outside of our frames based on data in our server whether it is sent via SSE (server-side events) or WebSockets. Talk about responsive!
Turbo Native
This is not so much a replacement for native development but a way to speed up native development by using your backend's native language, HTML.
I highly recommend checking out the brief handbook/tutorial on Turbo.
Stimulus JS
Stimulus is described as a JavaScript library made to enhance server-side rendered HTML. A rather different approach compared to Angular, Vue, or React where JavaScript does all the heavy lifting. The team at Basecamp describes this approach quite magically in the Stimulus origin story: "All our applications have server-side rendered HTML at their core, then [we] add sprinkles of JavaScript to make them sparkle." Stimulus is a controller centered library.
Controllers
Controllers are the bread and butter of Stimulus. They are simply JS objects mapped to page elements. Controllers in Stimulus are appropriately called controllers as they control what happens to specific DOM elements and what methods to call depending on different events.
- Actions: connect the controller's methods to DOM events
- Targets: markers on DOM elements to allow the controller to locate them
- Values: keep track of data attributes of the controller's elements
Read more about Stimulus JS here.
Strada
Unfortunately, at the time of writing Strada has not been released. All we have is this brief description of Hotwire's final puzzle piece:
Standardizes the way that web and native parts of a mobile hybrid application talk to each other via HTML bridge attributes. This makes it easy to progressively level-up web interactions with native replacements.
I would love to hear your thoughts on Hotwire! It's an exciting time to be a web dev!
Top comments (2)
This is a well written article that deserves more comments, personally I haven't dig into Hotwire especially the new stuff with the turbo frames yet. I did look into StimulusJS when it first came out and 2.0 release as well which had a lot welcoming improvements. Honestly I think more business and web applications would benefit from this kinda of architecture.
Thanks for the kind words! I haven't used Stimulus or Turbo much, but I plan on starting a new project using these tools. It's a great time to be a Rails dev!