Turbo Morphing in Practice
Jon Sully
2 Minutes
How two lines of code made everything smooth
Posting this as sort of a quick / short follow-up to my prior post on my simple, AI-filtered, comment system, since my comments are morphed!
I wrote extensively about how Turbo 8’s page-refreshes + morphing features work back in the beginning of this year. And that article is still very much a source-of-truth on the ‘how’ and ‘why’ of it all. But it wasn’t until the other day, with my comments system, that I actually got to integrate PR+M into a production Rails app. Sure, that production app is this tiny little content site, but it doesn’t change the fact that it was FREAKING COOL! Why? Because it’s two lines of code. I had to do nothing.
Let’s just back up a tiny bit. Without PR+M setup, submitting a comment on my site looks like this:
Pretty straightforward, and definitely working, but it would push the user right back up to the top of the page upon submitting a comment. Now, this is totally expected — this is a simple state page with an HTML <form> that POST‘s and gets back a 302 redirect, as designed:
class CommentsController < ApplicationController # POST /comments def create post = BlogPost.find(params[:comment][:post_id]) post.comments.create!(comment_params) redirect_to post.request_path end end
Some pretty simple, boilerplate Rails code!
Now, Turbo Drive is running on the front-end there, but it’s only doing <body> replacements; it does not maintain scroll position across page navigations / traversals.
So here’s the trick. All I added to my layout (in the <head>) was:
<%= turbo_refresh_method_tag :morph %> <%= turbo_refresh_scroll_tag :preserve %>
That’s it.
Now the comment experience looks like this:
And that’s without any changes to the back-end / controller code or any other diffs. Now there’s no scroll reset, no <body> change at all, and a fluid Single-Page-App-like experience. Two lines of code. Ugh morphing is great.
I’d recommend giving Turbo 8 Page Refreshes + Morphing Explained at Length a read if you want to understand how/why this works, but if you already have, just remember that each blog post on this site is a content page! And as such, my comments controller is redirecting back to this same page when posting a comment. That’s a page refresh event!
Anyway, that’s all! It’s a small thing but it’s so neat how easy it is to add with Rails and Turbo.
P.S. I didn’t add it because this site doesn’t get enough traffic for it to be compelling, but I could also add global broadcasting to the Blog Post object + <%= turbo_stream_from @post %> and suddenly everyone would see, in real time, everyone else’s comments as they’re posted. That’s just two more lines of code to enable global, real-time page updates! Incredible.
Comments? Thoughts?
jhin
nice 👌
John Smith
Hello world! This is a hotwire test 🙏
Jhen
nice