Turbo

Miha Rekar Turbo

The speed of a single-page web application without having to
write any JavaScript. © 2020 DHH hotwired/turbo-site/commit/7d9a0ad

The Holy Hotwire Trinity

Turbo • Turbo Drive: Navigate within a persistent process •
Turbo Frames: Decompose complex pages • Turbo Streams: Deliver live page changes • Turbo Native: Hybrid apps for iOS & Android (more ore less merged with Strada to create Hotwire Native) • Morphing*

Turbo 8 • Nothing to do with Rails 8 •
Came out back in February • Morphing • InstantClick • ! TypeScript

Turbo Drive • Basically a rewrite and rebrand of what
Turbo Links once was • It just works™ • Unless when it doesn’t (cough, cough, jQuery plugins) • Might be tricky to introduce into legacy apps • Replaces the contents of <body> with the contents of the response <body> • Merges the contents of their <head> • if <title> or <meta> tags change, they will be updated as expected • if links to assets are the same, they won’t be touched so browser won’t process them again

Turbo Frames

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.

Turbo Frames • Allow parts of a page to be
updated independently • Without reloading the entire page • Links and forms inside a frame are captured • Only that frame's contents are updated when navigating or submitting. • Can be lazy-loaded • Improve cache efficiency by separating page segments that change at diﬀerent rates or for diﬀerent people • Easy to introduce, it won’t break anything

Turbo Streams • What if Frames but smaller? • HTML
fragments wrapped in <turbo-stream> elements • Partial page updates without full reloads* • CRUD-like actions: append, prepend, before, after, replace, update, remove, and refresh* • HTTP or over WebSockets or even Server-Sent Events (SSE) • Reuse existing server-side templates for both initial page loads and subsequent updates • Deep Rails integration with Action Cable and Active Job via turbo-rails gem

Structure • Frames use <turbo-frame> elements • Streams use <turbo-stream>
elements Frames vs Streams

Scope • Frames update predefined regions • Streams can target
any element on the page Frames vs Streams

Initiation • Frames typically user-triggered • Streams often server-pushed Frames
vs Streams

Actions • Frames primarily replace content • Streams oﬀer multiple
actions (append, prepend, replace, remove, etc.) Frames vs Streams

Use cases • Frames for lazy-loading and modular components •
Streams for real-time updates and form submissions Frames vs Streams

Navigation • Frames can scope navigation to specific regions •
Streams don't aﬀect navigation directly Frames vs Streams

Content loading • Frames load content on demand • Streams
push content from the server Frames vs Streams

Flexibility • Frames are more rigid and self-contained • Streams
are more flexible for any sorts of use cases Frames vs Streams

Performance impact • Frames can reduce initial page load •
Streams can minimize data transfer for updates Frames vs Streams

Implementation complexity • Frames are simpler to implement • Streams
may require more server-side logic (unless you use Rails) Frames vs Streams

Real world examples • Infinite pagination • External API calls
• Slow SQL Turbo Frames

Real world examples • removing a div after destroying •
relies on dom_id • Update items • Insert a new item when it gets created Turbo Streams

• TL;DR: Completely diﬀerent • Both do partial page updates
without custom JavaScript • They are completely independent of each other and have quite diﬀerent use cases • Turbo Frames only manipulate themselves, and this manipulation is always an update • Turbo Streams can manipulate any DOM element anywhere on the page Frames vs Streams

*until now Turbo*

Morphing

Morphing • A new refresh Turbo Stream action • Janky
out of the box - it does an actual reload of the page • idiomorph enters the stage • Add broadcasts_refreshes to the model • Hooks into existing turbo_stream_from • Add turbo-refresh-* meta tags to HTML

Now what? • Try Turbo Frames • It’s easy to
introduce • It won’t break anything • It delivers value quickly • Add the rest later, if you want • Subscribe to Radan’s blog

Questions?

Turbo

Turbo

More Decks by Miha Rekar

Other Decks in Technology

Featured

Transcript