In Web Development
What is Hotwire? - read the full article about Vue Js update, Web Development and from The Pragmatic Studio on Qualified.One
- [Mike] So, what is Hotwire, and what problems does it solve? To answer that, say we have a typical Rails app, and on this page, theres an interactive element.
It sends an HTTP request to a controller action and a new page of HTML is sent back as the response.
Then the whole page is reloaded even if only part of the page changed.
- [Nicole] And we know we could do better.
So, before Hotwire, there was a grab bag of options for making Rails apps feel more responsive.
For starters, we could have used Turbolinks.
With Turbolinks, all link clicks are automatically intercepted.
Turbolinks then automatically merges the HTML document head and replaces the body.
So theres no full page reload, which means page navigation is faster with Turbolinks.
- But its still replacing the entire body of the page.
What if we want to dynamically update only parts of a page? Well, to do that we could have used Rails AJAX helpers and marked interactive elements as being remote.
Instead of a link click sending a normal GET request or a form submission sending a normal POST request, these interactions send AJAX requests.
The component sends an AJAX request to fetch data, the Rails app sends a hunk of JSON back as a response, then the component transforms that JSON to DOM elements, and the DOM is dynamically updated to reflect any changes.
And who doesnt like neatly isolated components? - Yeah, but this approach can be kind of clunky since the page is a mix of server-side rendering and client-side rendering.
- And the more components we add, the clunkier it gets.
And the Rails app is strictly a JSON API.
So all the rendering happens client-side.
Now, if youve been down this path, you know its not lined with roses.
Theres a whole lot of inherent complexity when it comes to building and maintaining two separate apps that interchange data.
- And you know, when that happens, its all too easy to end up with duplicate logic.
- Plus, its on your shoulders to design an API that allows the front end to efficiently fetch exactly the data it needs, no more, no less.
- On top of that, you have the challenge of keeping state and sync across two applications.
- Oh, and dont forget about all the additional tooling needed to bundle and deploy two separate apps.
- Now, there are cases where building an SPA is warranted, but they should be the exception, not the rule.
It lets us return to the classic approach of rendering all the HTML server-side using Rails templates while keeping our app fast and reactive.
- Heres how it breaks down.
Hotwire is made up of Turbo and Stimulus.
It includes Turbo Drive, Turbo Frames, and Turbo Streams.
Lets glance at each of these in turn.
Remember how Turbolinks intercepts all link clicks and instead of sending regular GET requests, it sends AJAX requests? Well, Turbo Drive does that and also does the same thing for form submissions.
In both cases, page navigation is faster because Turbo Drive automatically replaces the current pages body and merges the head.
No full page reloads.
- Now, replacing the body alone may make some pages of your app fast enough.
But you might want to accelerate other pages even more by updating only part of the body, and thats where Turbo Frames comes in.
Lets say you have a link or form here, you would make this part of the page a Turbo Frame by putting it in a turbo-frame tag with a unique id.
Now, any interactions within this frame are scoped to the frame.
Clicking the link or submitting the form fires off an AJAX request to a typical Rails controller action.
And a Rails template then only needs to render HTML for that frame.
Turbo then automatically replaces just that part or frame of the page.
- But what if you want to dynamically update multiple parts of a page? Well, thats when you need Turbo Streams.
In response to a user interaction, you return HTML consisting of Turbo Stream elements.
And these are basically directions that Turbo follows to update affected parts of the page.
Replace this, update this, prepend this, and so forth.
You get the idea.
- But wait, theres more to Turbo Streams.
Lets say you want to stream partial page updates to multiple browser sessions.
Turbo Streams uses ActionCable under the hood to deliver updates asynchronously over a WebSocket connection.
Well, these sorts of user interactions need to change the DOM but dont require a round trip to the server.
And that brings us to Stimulus.
Then, using HTML attributes, you connect the Controller Action to an interactive element.
These actions then run in response to DOM events being triggered.
- Now, what we really like about Hotwire is that it, well, turbocharges whats already in Rails.
Things like server-side rendering and routing, controllers and actions, templates and partials.
- Yeah, Hotwire isnt an all-new way of building Rails apps.
Its about taking your traditional Rails app and incrementally improving it.
For some pages, Turbo Drive may give you all the boost you need.
No application change is necessary.
Just drop it in and youre off to the races.
- On pages that have some interactivity, you can strategically use Turbo Frames.
Oftentimes, thats as simple as taking an existing template, wrapping its HTML in a tag, and youre done.
- And in scenarios where you need to broadcast partial page updates, you can layer in Turbo Streams with relatively minor code changes.
- So thats our take on Hotwire.
Everything you know and love about Rails is still in play.
Hotwire just brings new tricks to the game.
The Pragmatic Studio: What is Hotwire? - Web Development