Hotwire Bling!

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!