Sounds awesome, right? 100% agree. Thus, I decided to take Hotwire for a spin having been motivated by a number of talks at RailsConf 2021 this past week.
Strada is the third component, but there is not much information available on it yet. It will support mobile app development.
There are two installation commands to run. First, the standard bundle install and then a specific Hotwire installation.
If you are migrating an existing app, at least in my case, I was greeted with an unexpected surprise at this point. Form submissions ceased working immediately after the Hotwise install. I was surprised by this, but discovered that changes made to the default application layout modified it such that requests expected Turbo Streams responses by default.
My application was still returning the same valid HTML as it had before, however there were no Turbo Frames or Streams tags yet. Thus, the client side basically ignored the completely valid content that was being returned to it.
After the initial panic wore off, I settled in and was able to migrate my app without too much trouble.
The key concepts to understand with Hotwire are:
- Controller responses are for named segments of the page as identified by Turbo Frame or Stream elements.
- A Turbo Frame is a single section of the page (think Rails-managed iframe) that maintains its own navigation context. By contrast, a Turbo Streams response can include many fragments used to update multiple, arbitrary sections of your page. Thus, the simplest application migration would be to wrap each existing html.erb in a Turbo Frame tag. This is somewhat analogous to what Turbo Drive does, a component I didn’t list earlier because I doubt it will be used for much. It treats your entire page as a logical frame, so while you get rid of the page reload flicker, you are still always regenerating the entire HTML content to send over the wire.
The phrase “game changer” is wildly overused in this industry. It's amusing to me now how often it shows up needlessly, and thus I find myself on the lookout for its occurrences. But I do actually feel like the Hotwire paradigm is a game changer. Why do I say that?
This feels like a new framework/library/components that will actually improve productivity rather than add to the technology bloat many projects end up becoming. That is a transformative change. Sometimes less is more, and this is a perfect example of that.
Here is a screen capture from my Instant Poll application annotated with the named divs that will be updated by Turbo Streams.
The form submission is handled by the PollController as normal, but instead of a poll/submit.html.erb rendering the page, a new poll/submit,turbo-streams.erb is used, Note that it provides updated HTML for our named divs. It doesn’t just update the div where the form originated, it updates two other divs as well. For this reason, Turbo Streams gives you the most flexibility.
Here is the response from the controller request.
<turbo-stream action="replace" target="poll_title"><template> You chose <span style="font-weight: bold">Gaming</span>. Overall results:<br/> </template></turbo-stream> <turbo-stream action="replace" target="poll_message"> <template></template> </turbo-stream> <turbo-stream action="replace" target="poll_body"><template> <div class="panel-body"> <ul class="list-group"> <li class="list-group-item"> <div><label>Netflix: 494</label></div> </li> <li class="list-group-item"> <div><label>Gaming: 363</label></div> </li> <li class="list-group-item"> <div><label>Dining: 517</label></div> </li> <li class="list-group-item"> <div><label>NightClub: 800</label></div> </li> </ul> </div> </template></turbo-stream> <turbo-stream action="replace" target="poll_footer"><template> <div class="panel-footer text-center">Thank you for participating!</div> </template></turbo-stream>
I also added a comments section below the article on this sample app using a Turbo Frame to show the difference between the two approaches. My poll page changes were localized and thus easily could have been implemented using either mechanism. You can imagine banners with shopping cart totals or other information completely separate from the form element being updated with Turbo Streams.
I’ll say it again, and I don’t use the term lightly. Hotwire truly is a game changer, I encourage you to check it out now if you haven’t already,
We will take a look at Stimulus in a future article. Follow me on Twitter at @DarrenBroemmer so you don’t miss any episodes of Ruby Unbundled. Have fun with those Hotwire apps!