I love the promise of Turbo 8. It greatly simplifies the logic for doing partial page updates. But as soon as I started to create a more complex layout than what was shown in the demo, I quickly ran into challenges. The biggest challenge is that
It’s a fairly common design to have a left-column navigation in an application where you want to update only the right side of the page as navigation items are clicked. This is quite complex in Turbo 8! Here is a quick screen recording & repository that demonstrates three key solutions:
-
Allowing a #create endpoint to be used by multiple views but always redirect back to the view that initiated the POST. It took me awhile to realize that a redirect back to the URL that initiated is required for morphing to work.
-
Clicking links in the left-column update only the contents of a turbo-frame in the right column. This preserves scroll position, filters, and any other state that is present in the left column.
-
As the left-column is used to navigate, keep the URL and browser history updated so that the page can be refreshed (or copied & pasted) at any time and so the back button works.
I’m really hoping that #3 is simply a bug in Turbo. I have an issue open on the project, but I welcome any advice people might have about a better way to do this: Adding data-turbo-action="advance" on top of a data-turbo-frame="target" causes a full page refresh · Issue #1156 · hotwired/turbo · GitHub