Rails #156 Turbo 8 Morphing in real life

25/12/2023 (4 months ago)
ยท
frontend turbo8 morphing hotwire

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


1
Sign in to join the conversation