What is Turbo 8 Morphing?

The pillar addition in Turbo 8 is the adoption of using morphing to update the page. This gives the user benefits of a custom Turbo Stream setup without typically needing to do code up a specific solution. Let’s talk through what this looks like and how it works.

Sample Todo App

Thinking through a typical todo app, you would have multiple todo lists, each with todo items, and those todos could be assigned to different people. To complicate things, let’s also assume there are a few roll up sections showing complete/incomplete counts. This could be a total per list, total overall, and totals per user.

This would start out as a basic CRUD application using normal Rails techniques. Updating it to take advantage of Turbo 7 would require adding extra turbo stream handlers to update all the pieces of the page. Looking at an update action that would happen for a todo item this would look something like:

1
2
3
4
5
6
7
<%= turbo_stream.replace @todo %>
<%= turbo_stream.replace dom_id(@todo.list, :totals) do %>
	<%= render "lists/totals", list: @todo.list %>
<% end %>
<%= turbo_stream.replace dom_id(@todo.assiged_to, :totals) do %>
	<%= render "user/totals", user: @todo.assiged_to %>
<% end %>

With Turbo Streams, you are responsible for know what and how everything on the page affects everything on the page. This is often hard to do which leads to bugs like we see with this sample. Yup, even something this small has a bug. In this example, I am updating the totals for the user assigned to the todo, but if the assigned user changes, the old user is not updated.

Morphing To The Rescue

Turbo 8 is using Idiomorph under the hood to provide morphing. When you load a page, Turbo will look at the elements on the current page and the new page and it will selectively update the nodes on the page that do not match. What does that mean for us? Instead of a custom update.turbo_stream.erb file, we simply redirect to the listing page. The new and old pages will be compared, and all the changed nodes will be merged into the page, including the old assignees updated totals count, bug avoided.

So, what are you waiting for? Try out Turbo 8, and see just how quick and easy you can make a completely fluid application today.