Digging into Turbo 8's Morphing Feature in Ruby on Rails
Vložit
- čas přidán 7. 05. 2024
- 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: czcams.com/users/webcrunc...
💻 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
This is amazing..Thanks to all the creators and contributors to Ruby on Rails..
😎
Super cool feature. Thats a bit pity to see it relates on timestamps of a parent record when we talk about lists. Because on big projects there are usually at least a few after update callbacks. On the other hand, it should rely on something and updated at field sounds reasonable. However, I'd love to see it configurable in the future
Totally agree 👍
So, people finally found morphdom.. Nice.
15:50 I really don't understand why touch: true on the relationship would cause the posts to re-render. Very confusing API. Why `turbo_stream_from @user` causes the list of @posts to re-render?
touch: true updates the timestamp column on the associated model which then triggers a morph type of response. Assuming you're subscribed to updates using the "turbo_stream_from" helper method, rails should tap into those streams and using morphing to update the page. It's pretty magical and I agree it's tough to follow. I'm still trying to wrap my head around it myself.
Why do you install tailwind after app creation instead of create app with tailwind framework?
Mostly just how I had it in my notes for the blog post. I'm not 100% sure but the route I chose uses a dedicated gem (tailwind-rails) and the app creation route uses postcss.
what is yjit and how to install it's
Just In Time - it is built into Ruby 3.1. You could just manipulate its configuration
@@sumskyi thank you