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...
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.
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 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:
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!
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!
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.
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.
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!