Digging into Turbo 8's Morphing Feature in Ruby on Rails

Inspired by Jorge Manrubia’s talk from Railsworld (https://www.youtube.com/watch?v=m97UsXa6HFg&t=4s) I wanted to try out Morphing which is coming to Turbo 8 very soon. This is a really great new feature to Ruby on rails that I'm excited to use.

On October 9th, 2023 Jorge published a blog post (https://dev.37signals.com/a-happier-happy-path-in-turbo-with-morphing/) that was a precursor to the talk. I recommend giving it a read.

The gist of the blog post and talk is that Turbo frames and streams are useful but often cumbersome to integrate since they are highly focused containers of logic.

They won’t be going away but might be more of a special-use tool coming up with the introduction of morphing which could be a more convenient and useful “default” much like the standard full-page reloads of historical Rails apps.

Discovering the problem

The Basecamp team has been working on integrating a calendar into their HEY product. In building the new feature, they quickly spotted the constraints of turbo frames and streams. Having to broadcast and update many items on a given page is problematic and overly complex, so they looked for a better approach, one much closer to the default Rails full-page reload conventions.

What is morphing?

No, this doesn’t relate to Power Rangers, though one could wish!

Morphing is the process of merging one DOM into another without too many side effects. It’s not necessarily natural but the perception our eyes see makes it feel as such.

Morphing isn’t new, but it is to Turbo 8. The Basecamp team chose idiomorph (https://github.com/bigskysoftware/idiomorph) as a library to help with the new features. It's a JavaScript library for morphing from one DOM tree to another.

The TL;DR;

Morphing provides smoother updates everywhere rather than selective updates like turbo streams and turbo frames.

📕 Putting it into practice: https://web-crunch.com/posts/turbo-morphing-ruby-on-rails ⚙️ Source code: https://github.com/justalever/blogmorphing

Timestamps: 00:00 - Intro and inspiration 01:00 - Why Morphing is necessary for the Basecamp team 03:12 - Create a new app 04:09 - Add Tailwind CSS Rails gem 04:17 - Run tailwindcss-rails installer 04:45 - Boot and preview app locally 05:05 - Install beta versions of Turbo 06:23 - Scaffold out Post and User models 07:39 - Create new user using the Rails console 08:37 - Setup modeling 08:50 - Update posts index and show views and routes 10:38 - Add morph meta tags to the application layout 12:30 - Add broadcasts_refreshes to post model 12:46 - Stream updates for show view 13:29 - Streaming updates to posts as a collection 15:46 - Previewing our work and seeing morphing in action

======

👋 I'm Andy Leverenz, a passionate product designer and developer. I love creating and sharing my knowledge through design, coding, and writing. Join me on my journey by checking out my blog, Web-Crunch (https://web-crunch.com), where I publish tutorials, articles, and the occasional vlog about design and development.

📰 Never miss an update! Click here to subscribe: https://www.youtube.com/user/webcrunch?sub_confirmation=1

💻 Read the written version: https://web-crunch.com/posts/turbo-morphing-ruby-on-rails

💎 New to Ruby on Rails? Enroll in my course HELLO RAILS: https://hellorails.io

💻 The Blog (my source of truth): https://web-crunch.com

Additional Links: 🎨 Bring life to Rails projects with Rails UI: https://railsui.com. 👨‍💻 Hire me: Visit: https://railsui.com/custom 🐤 https://twitter.com/webcrunchblog. ⚙️ https://github.com/justalever.

P.S. This stuff takes a long time to make but I love to do it. To help me keep at it consider supporting me. If not monetarily, then subscribe to the channel or share it with someone!

✨ https://github.com/sponsors/justalever ☕️ https://www.buymeacoffee.com/webcrunch ... https://www.youtube.com/watch?v=wURcezOECD0