Inspired by Jorge Manrubia’s talk from Railsworld ( • Jorge Manrubia - Makin... ) 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 (dev.37signals.com/a-happier-h...) 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 (github.com/bigskysoftware/idi...) 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: web-crunch.com/posts/turbo-mo...
⚙️ Source code: github.com/justalever/blogmor...
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 (web-crunch.com), where I publish tutorials, articles, and the occasional vlog about design and development.
📰 Never miss an update! Click here to subscribe: kzread.info...
💻 Read the written version:
web-crunch.com/posts/turbo-mo...
💎 New to Ruby on Rails? Enroll in my course HELLO RAILS:
hellorails.io
💻 The Blog (my source of truth): web-crunch.com
Additional Links:
🎨 Bring life to Rails projects with Rails UI: railsui.com.
👨‍💻 Hire me: Visit: railsui.com/custom
🐤 / webcrunchblog .
⚙️ 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!
✨ github.com/sponsors/justalever
☕️ www.buymeacoffee.com/webcrunch