Turbo Frames versus Turbo Streams: What’s the difference?

Turbo Frames and Turbo Streams are tools in Hotwire that enhance web app performance and interactivity. This video compares their functionalities, use cases, and implementation details, hoping to help you understand when and how to use each.

Turbo Frames

Turbo Frames let you update specific web page parts without refreshing the whole page. This makes your app feel faster and smoother. Think of it as updating just a section (”frame”) of a page instead of the entire page.

How Turbo Frames Work

Turbo Frames intercept links and form submissions within a frame, updating only that frame. This is super handy for avoiding the full-page reloads, which can feel sluggish or unnecessary with some user experiences.

Example

Imagine you have a blog and want users to switch between posts without refreshing the whole page. Here's a rough outline of how you can do it:

<!-- app/views/posts/index.html -->

<%= turbo_frame_tag "post-frame" do %>
  <%= render @post %>
<% end %>

<nav>
  <ul>
    <li>
        <%= link_to "Post 1", post_path(1), data: { turbo_frame: "post-frame" } %>
    </li>
    <li>
        <%= link_to "Post 2", post_path(2), data: { turbo_frame: "post-frame" } %>
    </li>
    <li>
        <%= link_to "Post 3", post_path(3), data: { turbo_frame: "post-frame" } %>
    </li>
  </ul>
</nav>

In this example, clicking on any post link will load the corresponding post content into the post-frame without refreshing the entire page. This keeps your site feeling snappy and responsive.

Advanced Usage

You can even nest Turbo Frames. This means you can have a Turbo Frame inside another Turbo Frame, each updating independently, which is perfect for more complex layouts.

<%= turbo_frame_tag "container" do %>
  <!-- Outer frame container content  -->
    <%= turbo_frame "panel" do %>
    <!-- Inner frame panel content -->
    <% end %>
<% end %>

In this example, the inner frame can be updated without affecting the outer frame, and vice versa.

Where would you make use of Turbo Frames?

Turbo frames can be used anywhere.

Some realistic examples might include the following:

1. E-commerce Websites: Use Turbo Frames to update product details, reviews, or shopping cart additions without refreshing the entire product page.
2. Dashboards: Refresh only the data widgets that need updating rather than reloading the whole dashboard.
3. Forms: Validate and submit forms in place, giving users immediate feedback without a full-page reload. In older versions of Rails, error messages will just appear as necessary instead of navigating to a new path.

Turbo Streams

Turbo Streams are all about real-time updates. They push changes from the server to the client, making them great for things like chat apps or collaborative tools.

How Turbo Streams Work

Turbo Streams use WebSockets to push updates. When something changes on the server, it broadcasts an update to all clients subscribed to that stream. Everyone sees the latest data instantly.

Example

Let's say you have a chat app, and you want new messages to appear for all users in real-time. Here's how you can do it:

<!-- messages/index.html.erb -->
<%= turbo_stream_from "chat_#{chat.id}" %>

<div id="messages">
  <%= render @messages %>
</div>

<!-- messages/create.turbo_stream.erb -->

<%= turbo_stream.append "messages" do %>
  <%= render @message %>
<% end %>

When a new message is created, the server broadcasts the change to all clients subscribed to the chat_<chat.id> stream, appending the new message to the messages div. This way, everyone sees new messages right away. Different users or people in different locations on different systems can now see the same update in real time.

Advanced Usage

Turbo Streams can do more than just append. You can configure them to handle various types of updates, like replacing or removing elements.

<!-- Example of replacing content -->
<%= turbo_stream.replace "messages" do %>
  <div id="messages">
    <%= render @messages %>
  </div>
<% end %>

In this example, the entire messages div is replaced with new content.

Where would you make use of Turbo Frames?

Turbo Streams are perfect for real-time, collaborative applications. Here are some real-world scenarios where they shine:

1. Live Sports Scores: Update scores and stats in real time without requiring users to refresh the page.
2. Stock Market Dashboards: Push stock price updates to all connected clients instantly.
3. Project Management Tools: Let team members see real-time project progress and tasks updates.

Key Differences

1. Scope of Updates: Turbo Frames update specific page sections, while Turbo Streams broadcast updates to multiple clients.
2. Use Cases: Turbo Frames are great for navigation and partial page updates without full reloads. Turbo Streams are perfect for real-time updates and collaborative applications.
3. Implementation: Turbo Frames use HTML elements with <turbo-frame> tags and links with data-turbo-frame attributes. Turbo Streams need server-side broadcasting and client-side subscriptions to named streams.

More use cases and scenarios

When to use Turbo Frames

Turbo Frames are best suited for scenarios where you need to update specific parts of a page without a full reload. Common use cases include:

• Navigational Components: Smoothly navigate between sections, like paginated content or tabs.
• Form Submissions: Update only the form or relevant section upon submission.
• Content Loading: Load content into specific sections without disrupting the user experience.

When to use Turbo Streams

Turbo Streams excel in real-time, collaborative environments where multiple users must see updates immediately. Everyday use cases include:

• Chat Applications: Show new messages in real-time to all users.
• Collaborative Editing: Let multiple users edit documents simultaneously with instant updates.
• Notification Systems: Broadcast real-time notifications or alerts to all users.

Wrapping up

Turbo Frames and Turbo Streams each have their strengths. Use Turbo Frames for partial page updates and smoother navigation. Opt for Turbo Streams when you need real-time updates and collaboration. By understanding their key differences and when to use them, you can make your web apps faster and more interactive. In combination, you can make your server-side apps live up to any SPA-like application on the market.

Dive deeper

• Hello Hotwire - My new course on Hotwire covers topics like this one.
• Hotwire and Rails Collection
• Building Turbo Loading Buttons in Rails: A Step-by-Step Guide
• Digging into Turbo 8's Morphing Feature in Ruby on Rails