#156 Turbo 8 Morphing in real life

25/12/2023
frontend turbo8 morphing hotwire
  • 0:00 Turbo 8 intro
  • 2:44 Update Table with TurboStreams
  • 6:10 Install Turbo8, enable morphing
  • 10:16 preserve some elements after morph
  • 11:46 live updates
  • 16:18 Turbo Morphing in a real app

Turbo 8 adds a new technique of sending HTML over the wire: refresh current page, preserve scroll.

This new approach opens EASYER ways to render elements on current page without passing too much context to TurboStreams.

👮‍♂️ however there some tricky scenarios that you should be aware of! 🚨

Level 1: We will try using PageRefreshes on a new Rails app.
Level 2: Use page refreshes to live-update nested comments in a real app.

Get access to superails.com source code:

  1. Sign in to superails.com with Github
  2. Leave a comment under the video

Episode source code: https://github.com/corsego/156-turbo8/commit/24277eb152f3f0a96f693c454b9244f36604f687
Based on this blogpost: https://blog.corsego.com/hotwire-turbo-8-morphing

0:00 Turbo 8 intro
2:44 Update Table with TurboStreams
6:10 Install Turbo8, enable morphing
10:16 preserve some elements after morph
11:46 live updates
16:18 Turbo Morphing in a real app

3
Join the conversation
Sign in to leave comments and save lessons to your watchlist.
We collect your email address, name and username to create your account. We do not share your email address with anyone else.