In Web Development
What is Hotwire? - read the full article about Vue Js update, Web Development and from The Pragmatic Studio on Qualified.One
Youtube Blogger
- [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.
And instead of sending regular GET requests, it sends asynchronous JavaScript requests to fetch pages.
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.
And the Rails app generates JavaScript code thats executed by the browser to dynamically update affected parts of the page.
- Taking it a step further, we might have whipped up a React, Vue, or similar JavaScript component to make part of the page feel more responsive.
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.
- Another approach is to go all in with client-side rendering by creating a so-called "single-page app." In this scenario, the frontend is a separate application built with React, Vue, or another client-side JavaScript framework that sends AJAX requests.
And the Rails app is strictly a JSON API.
- Yeah.
So all the rendering happens client-side.
Now, if youve been down this path, you know its not lined with roses.
- Yeah.
Theres a whole lot of inherent complexity when it comes to building and maintaining two separate apps that interchange data.
First off, youre always context switching between JavaScript and Ruby.
- 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.
What if there was a way to get the speed and responsiveness of an SPA without the complexity of an SPA, and without writing custom JavaScript? - Well, as you may have guessed, Hotwire gives us a practical alternative.
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.
Turbo is a set of technologies for dynamically updating parts of a page without writing any custom JavaScript.
It includes Turbo Drive, Turbo Frames, and Turbo Streams.
- And for those situations where you need a dash of JavaScript, Stimulus is a lightweight JavaScript framework that nicely complements Turbo.
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.
No JavaScript required.
- 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.
No problem.
Turbo Streams uses ActionCable under the hood to deliver updates asynchronously over a WebSocket connection.
And again, we get all this without writing any JavaScript.
- But what if you need a sprinkle of JavaScript? For example, you need a snazzy animation, a way to show/hide content, or you want to use a JavaScript library such as a datepicker.
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.
You know how Rails has Controllers and Actions? Well, Stimulus gives us a way to organize clients JavaScript code in a similar way.
You write a Stimulus Controller, its just a JavaScript object, that defines Actions, which are just JavaScript functions.
And those Actions can do pretty much anything JavaScript-y.
Then, using HTML attributes, you connect the Controller Action to an interactive element.
These actions then run in response to DOM events being triggered.
So, Stimulus gives us a structured, unobtrusive way to add in bits of JavaScript.
- 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.
- Finally, when you need to reach for JavaScript, Stimulus is right at hand.
- 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