Tweet
Tweet

Slide 1

Slide 1 text

Miha Rekar Turbo

Slide 2

Slide 2 text

Turbo

Slide 3

Slide 3 text

Turbo

Slide 4

Slide 4 text

Turbo

Slide 5

Slide 5 text

Turbo

Slide 6

Slide 6 text

Turbo

Slide 7

Slide 7 text

Turbo

Slide 8

Slide 8 text

Turbo

Slide 9

Slide 9 text

Turbo

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

The Holy Hotwire Trinity

Slide 12

Slide 12 text

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*

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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 with the contents of the response • Merges the contents of their • if or 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

Slide 15

Slide 15 text

Turbo Frames

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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 different rates or for different people • Easy to introduce, it won’t break anything

Slide 22

Slide 22 text

Turbo Streams • What if Frames but smaller? • HTML fragments wrapped in 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

Slide 23

Slide 23 text

Structure • Frames use elements • Streams use elements Frames vs Streams

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Navigation • Frames can scope navigation to specific regions • Streams don't affect navigation directly Frames vs Streams

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

• TL;DR: Completely different • Both do partial page updates without custom JavaScript • They are completely independent of each other and have quite different 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

Slide 38

Slide 38 text

*until now Turbo*

Slide 39

Slide 39 text

Morphing

Slide 40

Slide 40 text

Morphing

Slide 41

Slide 41 text

Morphing

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Questions?