folder is already the heaviest object in the universe.
What is Hotwire?
Hotwire, short for HTML Over The Wire, is a collection of tools and ideas that work together to help you build modern web applications with fast page loads by sending server-side rendered HTML over the wire (Websockets). Your Rails app can now boast the same speed and responsiveness as a Single Page App (SPA) without the added complexity of maintaining a client-side router or managing state. Just like the good old days, all your logic can now live on the server, and all the browser needs to do is render the HTML it receives.
Hotwire is made up of the following tools:
- Turbo: This is where the magic happens, and what we’re going to focus on in this article.
- Strada: At the time of writing this article, this has not yet been released but it promises to “standardize the way that web and native parts of a mobile hybrid application talk to each other via HTML bridge attributes.”
Before we get into what Turbo does, let’s discuss how we can set everything up so we can go through some code together.
If you have a Rails 7+ app, Hotwire is ready to go out of the box, so you don’t have to do anything. If you’re on Rails 6, you can install it manually by following the steps below:
- Add the
turbo-railsgem to your Gemfile
rails turbo:install:redisto change the adapter used by Action Cable in development to Redis. The
Asyncadapter, which is the default, does not support Turbo Stream broadcasting. Check out Redis.
Turbo Drive is a successor to Turbolinks which, for a number of years now, made navigating around Rails apps faster. This was achieved by Turbolinks intercepting clicks on all qualifying links (
links to the same domain), automatically fetching the requested page in the background and replacing the current page’s
element with that in the response from the server. The page would then get updated without doing a full reload. That functionality still lives on in Turbo Drive. In addition to that, Turbo Drive now supports submitting forms asynchronously and processing the response in much the same way it does for link clicks. Now, you don’t have to add
to the form anymore as we used to do with Rails UJS. It just works.
Turbo Frames helps you decompose a page into multiple components (turbo frames) so that any link clicks and form submissions within that frame replace the contents of the frame with the response from the server. Rails makes these requests in the background and provides updates to the page without doing a full reload. This may sound a bit like Turbo Drive but the difference is that the updates happen within a frame and the rest of the page stays the same. Let us look at the example below.
In the demo above, the “Add A Post” link is in a turbo frame with an ID of
and links to the
The HTML in the
file is wrapped in a turbo frame whose ID is also
When you click on the “Add A Post” link, Rails makes a request to
and, in the response, finds a turbo frame with the same ID as the turbo frame that contains the link. It extracts the HTML in the turbo frame from the response and replaces the contents of the frame. This happens without leaving the page.
The “Back” link goes to
so, clicking it will break out of the
turbo frame if the response from the server does not include a turbo frame with the same ID.
Let’s look at one more example to help us demonstrate how turbo frames work. In the example below, we have a list of posts. You can click on the “Edit” link to edit a post. Normally, this would open the edit form within a new page but, in this case, the edit form is rendered inline and replaces the post itself. Clicking “Submit” or “Cancel” will dismiss the edit form and bring back the post. The rest of the page stays the same.
The HTML to display a specific post is enclosed in a turbo frame with the ID computed by
. This translates to
is the ID of the post in the database. For this example, let us assume the post ID is 6. The ID of the turbo frame becomes
When we click on the “Edit” link, Rails makes a request for
and responds with
which looks like this:
Rails will find a turbo frame with an ID of
. It will grab this frame from the HTML response and replace everything in the frame where the “Edit” link was.
I hope that was clear enough. If not, you can take a look at this Github repo and see this in action.
Eager-load Parts Of The Page With Turbo Frames
Sometimes, we may want to load certain sections of a page separately in order to improve page load speeds. In the example below, we have a section of the page that lists out all the posts. We also have a post count in the navbar. In this example, we won’t see any noticeable change in performance but you can imagine how it will work for a more complicated app.
” turbo frame will have a loading spinner as we wait for
to return a response. This request in our case is handled by the
action will respond back with the
partial which looks like this:
The key thing to note here is that the turbo frame where the posts count is going to be rendered and the one contained in the
partial have the same ID. Once the request to
is successful, the spinner will get replaced by the posts count.
As you can see in the demo below, the posts list gets rendered on the first load, while the posts count in the navbar gets loaded separately. If you’re wondering why loading the posts count is taking that long, I added a
in the action to demonstrate the fact that we are loading something so we can see the spinner in action.
I think that just about does it for Turbo Frames. It can take some time to wrap your head around it but it is simple to implement.
And, to round out the holy trinity of tools in our Turbo toolbox, we will dedicate a separate upcoming article to Turbo Streams. Just to whet your appetite a little bit, it allows you to deliver partial updates to your pages asynchronously via WebSockets. Watch this space!
Andela’s Community of technologists features talented specialists who are experts in their respective fields. To celebrate their talent, we’re created the Writer’s Room program, where we offer writing workshops to our community and encourage them to write blogs and tutorials around their areas of expertise.
Want to be part of the Andela Community? Then join the Andela Talent Network!
With more than 175,000 technologists in our community, in over 90 countries, we’re committed to creating diverse remote engineering teams with the world’s top talent. And our network members enjoy being part of a talented community, through activities, benefits, collaboration, and virtual and in-person meetups.
All you need to do to join the Andela Talent Network is to follow our simple sign-up process.
Submit your details via our online application then…
Complete an English fluency test – 15 minutes.
Complete a technical assessment on your chosen skill (Python, Golang, etc.) – 1 hour.
Meet with one of our Senior Developers for a technical interview – 1 hour.
Visit the Andela Talent Network sign-up page to find out more.
If you found this blog useful, check out our other blog posts for more essential insights!