Save 36% for Black Friday! Save 36% on GoRails for Black Friday! Learn more
Your Teacher
Chris Oliver
Hi, I'm Chris. I'm the creator of GoRails, Hatchbox.io and Jumpstart. I spend my time creating tutorials and tools to help Ruby on Rails developers build apps better and faster.
About This Episode
Turbo Frames provide an iFrame like concept for Hotwire applications. If you're using Turbo streams to replace a portion of the page, you can accomplish the same thing even easier using Turbo Frames
Notes
When should I use a Turbo Frame and when should I use Turbo Streams?
Think of it this way:
Turbo Frames are like iFrames.
Turbo Streams are like JavaScript actions.
Turbo Frames are powerful because links and forms inside of a Frame will make a request and update the frame contents instead of navigating.
Frames allow you to build inline editing and partial page updates without any JavaScript OR even custom responses on the server-side. They are making normal page requests but only using a portion of the response to update the current page.
The "magic" in Turbo Frames is that the client side handles everything. It keeps track of the Turbo Frame ID and grabs the HTML with the same ID in the response.
You can open these pages directly in the browser and they will work like a normal page. But they also can do powerful SPA-like updates when wrapped in a Turbo Frame.
Turbo Streams, on the other hand, are a way to make precise updates to the page. You can use it to replace or update a section of the page just like with Turbo Frames, however Streams are not restricted to any particular section of the page.
With Turbo Streams, the server needs to know the ID on the page to be updated. This allows you to be precise, but it also requires tighter coupling between the frontend and backend. They both must know the ID they're operating on, but Turbo Frames only need the frontend to update a portion of the page.
Turbo Streams can also do more operations like append, prepend, or any custom actions you can dream of.
Plus, you can broadcast Turbo Streams using websockets to update the page in realtime across many browser. Let's say you're building a chat feature and new messages are being inserted into the database. To show that message to all the viewers of the chat, we can broadcast a Stream action to insert the new message into the page for each person viewing the page.
This week's GoRails screencast walks through refactoring Turbo Streams into Turbo Frames to make our Liking Posts feature even simpler and walks through the differences between the two approaches