Working the hotrails.dev tutorial - Chapter 3 Turbo Drive
As noted in part 1 of this blog series, I am working thru the HotRails.dev tutorial and building a set of personal notes.
Note: Don’t read this; this is my learning notes. Go read HotRails.dev which is an ASTONISHINGLY GOOD, FANTASTIC, WONDERFUL tutorial. Seriously. Go there NOW and stop reading this.
Notes on Chapter 3 – Turbo Drive
Turbo Drive makes things faster by causing web pages to only have the content between the BODY elements to be loaded – all the other page superstructure including fonts and css only comes down one time.
Turbo Drive works by intercepting “click” events on links and “submit” events on forms.
As discussed in chapter 1, there is a breaking change in Rails 7: Invalid form submissions have to return a 422 status code for Turbo Drive to replace the <body> of the page and display the form errors. The alias for the 422 status code in Rails is :unprocessable_entity. That’s why, since Ruby on Rails 7, the scaffold generator adds status: :unprocessable_entity to #create and #update actions when the resource couldn’t be saved due to an invalid form submission.
Turbo Drive is the descendant of Turbo Links; the difference is Turbo Drive works on forms as well as links.
To disable Turbo Drive on a link or a form, we need to add the data-turbo=”false” data attribute on it.
The performance increase from Turbo Drive is dramatic and it reflects:
- Less html over the wire
- No need to redownload CSS and JS
- No need to requery the database for things like sidebar content, a username shown in the page header and so on
Steps
touch app/assets/stylesheets/components/_turbo_progress_bar.scss