Hotwire: Turbo Drive & Frames
This course covers Turbo Drive and Turbo Frames as they run in a Rails app set up with the turbo-rails gem and one import map pin. It explains how Turbo Drive intercepts a link click, fetches the page and merges the head and body, including morph refreshes. It shows where the app turns prefetch and Turbo Drive off, and how tracked stylesheets, confirm dialogs and submit text work. It then covers Turbo Frames matched by id and a discussion frame that loads only when its dialog opens.
What you'll learn
- ✓How Turbo Drive fetches a page and merges the head and body
- ✓How morph refreshes work and how the turbo:morph event restores state
- ✓When to turn off prefetch or Turbo Drive, as on OAuth buttons
- ✓How data-turbo-track, data-turbo-confirm and data-turbo-submits-with behave
- ✓How Turbo Frames and Turbo Streams match their target by id
- ✓How to delay a frame's load until a dialog opens
What Turbo Drive replaces
A plain server-rendered Rails app throws the whole page away on every click. The browser sends a request, the server sends back a full HTML document, and the browser discards the DOM and builds a new one. Stylesheets are parsed again, scripts run again, scroll position gone. This app doesn't do…
Read the full lesson free →Curriculum
7 lessonsWhat Turbo Drive replaces
Shows the full page reload Turbo Drive replaces and the two lines of setup that enable it.
How Turbo Drive intercepts a click
Explains how Turbo fetches a clicked URL, merges the head, swaps the body and uses morph refreshes.
Turning Turbo Drive off where it matters
Covers turning off hover prefetch on card grids and disabling Turbo Drive on the GitHub OAuth buttons.
Small Turbo Drive features built in
Covers tracked stylesheets that force a full reload, native confirm dialogs and loading text on submit buttons.
A Turbo Frame is its own scoped region
Explains Turbo Frames as scoped regions, using an admin image section updated by a Turbo Stream with a matching id.
Frames that load later, and the src attribute
Shows how a discussion frame uses data-src so its comments load only when a student opens the dialog.
Turbo Drive and frames put together
Reviews every tuning and frame from the course, traced through the discussion dialog from page load to posting.