Blog Details

Rails 7 brings a host of exciting features, and one of the standout additions is Turbo. Turbo is part of the Hotwire suite, designed to make building modern web applications faster and more efficient. In this blog post, we’ll explore what Turbo is, how it works, and how you can use it to enhance your Rails applications.

What is Turbo?

Turbo is a set of techniques designed to speed up web applications by efficiently replacing parts of the page rather than reloading the entire page. It aims to make web applications feel more like single-page applications (SPAs) without the complexity of writing extensive JavaScript. Turbo consists of several components:

Turbo Drive: Enhances traditional navigation by turning links and form submissions into AJAX requests, replacing only the body of the page.

Turbo Frames: Allows you to divide your pages into independent, self-updating components.

Turbo Streams: Enables real-time updates to parts of the page via WebSocket or polling.

Turbo Native: Facilitates integrating Turbo with native mobile applications.

Getting Started with Turbo

1. Installing Turbo

Turbo is included by default in new Rails 7 applications. If you’re upgrading from an older version of Rails, you can add Turbo to your Gemfile:

gem 'turbo-rails'

And then run:

bundle install

2. Turbo Drive

Turbo Drive is the most straightforward way to enhance your application. It automatically handles link clicks and form submissions, making your app feel faster and more responsive.

For example, consider a simple link:

<a href="/posts">View Posts</a>

With Turbo Drive, clicking this link will fetch the new content via AJAX and replace the current page body without a full page reload.

3. Turbo Frames

Turbo Frames allow you to update specific parts of your page independently. This is useful for partial page updates without reloading the entire page.

Here’s an example:

<turbo-frame id="posts">
  <!-- Posts content here -->
</turbo-frame>

When you navigate to a URL that updates this frame, only the content within the <turbo-frame> tag is replaced.

4. Turbo Streams

Turbo Streams enable real-time updates to your application. This is particularly useful for collaborative applications where multiple users interact with the same data.

In your Rails controller, you can render Turbo Stream responses:

def create
  @post = Post.create(post_params)
  respond_to do |format|
    format.html { redirect_to posts_path }
    format.turbo_stream
  end
end

And in your view, you can handle the Turbo Stream response:

<%= turbo_stream_from "posts" %>

<%= turbo_frame_tag "posts" do %>
  <%= render @posts %>
<% end %>

This setup allows for real-time updates to the list of posts without a full page reload.

Benefits of Using Turbo

Enhanced User Experience: By reducing page reloads and updating only necessary parts of the page, Turbo provides a smoother and faster user experience.

Reduced Complexity: Turbo enables you to build dynamic, real-time features with minimal JavaScript, reducing the complexity of your code base.

Seamless Integration: Turbo integrates seamlessly with Rails, allowing you to leverage Rails conventions and components without needing to learn a new framework.

Conclusion

Turbo in Rails 7 is a powerful tool for building fast, responsive, and dynamic web applications. By leveraging Turbo Drive, Turbo Frames, and Turbo Streams, you can enhance your Rails applications without the overhead of writing extensive JavaScript. Whether you’re building a new application or upgrading an existing one, Turbo offers a modern approach to web development that aligns with the simplicity and productivity that Rails is known for.

Happy coding!