The evolution of Ruby on Rails has introduced powerful tools like Turbo and Stimulus, designed to streamline building modern, real-time applications. These technologies simplify creating rich, interactive user interfaces with fewer dependencies on JavaScript frameworks. 

In this blog, we’ll explore what Turbo and Stimulus are, guide you through upgrading your Rails application to use them, address common pitfalls, and showcase performance improvements.

What are Turbo and Stimulus?

Turbo and Stimulus are part of the Hotwire stack, designed to offer seamless, real-time updates in web applications. 

Turbo speeds up interactions by handling page transitions and updates without requiring full-page reloads. It also enables WebSockets for pushing real-time updates from the server. Stimulus, on the other hand, offers a lightweight way to add JavaScript behavior to your HTML, maintaining simplicity and keeping JavaScript minimal.

Modern Rails with Turbo and Stimulus leverages these technologies to create fast, real-time updates with minimal JavaScript code. Turbo's Turbo Drive, Turbo Frames, and Turbo Streams handle navigation and updates, while Stimulus enhances interaction through small, reusable JavaScript controllers.

That’s all you need to know about Turbo and Stmulus, now let’s head to upgrade Ruby on Rails applications to enhance Rails performance:

Steps For Rails Upgrade to Turbo and Stimulus

To upgrade a traditional Rails app to Turbo and Stimulus, follow these steps:

1. Install Turbo and Stimulus

First, you need to install the hotwire-rails gem, which includes Turbo and Stimulus. Follow these steps for Rails upgrade:

# Gemfile

gem 'hotwire-rails'

Then, run bundle install and install Turbo and Stimulus in your application:

2. Replace Remote Forms and Links

If your app currently uses remote: true for forms and links (AJAX-based behavior), you can upgrade to Turbo by removing remote: true and letting Turbo handle the same functionality.

Old way (AJAX with remote: true):

<%= form_with model: @post, remote: true do |f| %>

<% end %>

3. Implement Turbo Frames

Next, implement Turbo Rails frames.Turbo Frames allow you to update only part of the page, instead of reloading the entire page. To implement Turbo Frames, wrap parts of your views in <turbo-frame> elements.

For example, to update a list of posts dynamically:

<turbo-frame id="posts">

<%= render @posts %>

</turbo-frame>

In your controller, return the HTML for the Turbo Frame:

def create

@post = Post.new(post_params)

if @post.save

respond_to do |format|

format.html { redirect_to posts_path }

format.turbo_stream

end

else

render :new

end

end

In the view, create a posts/create.turbo_stream.erb to handle the Turbo Stream response:

<%= turbo_stream.append "posts", partial: "posts/post", locals: { post: @post } %>

4. Add Stimulus for Interactivity

With Stimulus, you can enhance interactivity in your Rails app. Create a controller for handling JavaScript behavior:

rails generate stimulus toggle

import { Controller } from "stimulus"

export default class extends Controller {

static targets = [ "details" ]

toggle() {

this.detailsTarget.classList.toggle("hidden")

}

}

In your view, hook up the Stimulus controller to the elements:

<div data-controller="toggle">

<button data-action="click->toggle#toggle">Toggle Details</button>

<div data-toggle-target="details" class="hidden">

<p>Here are the details!</p>

</div>

</div>

And with that, we are done with Rails upgrade. However, you might encounter multiple challenges during Rails performance optimization. So scroll down to know about them. 

Handling Common Pitfalls

While upgrading to Turbo and Stimulus is generally smooth, here are a few common issues and their solutions:

● Form errors not showing: When using Turbo, form validation errors might not render properly. Ensure you handle both html and turbo_stream formats in your controller:

● Navigating between pages: Turbo Drive might interfere with certain behaviors, like reinitializing JavaScript on new pages. Use Turbo’s turbo:load event to ensure scripts run when navigating:

● Partial updates failing: Make sure the server returns only the HTML for the Turbo Frame or Turbo Stream, and not the full layout. This is often a mismatch of formats in the controller response.

Performance Improvements

Knowing the pitfalls is not necessary, you also need solution.Turbo and Stimulus greatly enhance both the performance and user experience of a Rails app:

● Reduced Page Reloads: Turbo replaces traditional full-page reloads with quick, partial updates, resulting in faster interactions and less flicker.

● Real-Time Updates: Turbo Streams enable real-time updates via WebSockets, allowing you to push changes from the server to the client instantly, enhancing user engagement.

● Simplified JavaScript: Stimulus keeps JavaScript minimal and manageable, reducing the complexity compared to using heavy JavaScript frameworks.

Overall, this new stack cuts down on unnecessary JavaScript dependencies, speeds up navigation, and enhances the real-time responsiveness of your app.

Conclusion

Upgrading your Ruby on Rails application to use Turbo and Stimulus is a great way to modernize your app and enhance its performance. With Turbo handling page updates and form submissions, and Stimulus adding interactivity, you can deliver a faster, more dynamic experience with minimal JavaScript. 

Follow the steps above to start upgrading your app today, and enjoy the benefits of a more streamlined, real-time Rails application.

By making this upgrade, you’ll improve not only the performance but also the maintainability of your Rails app, aligning it with the latest best practices for building interactive web applications. Head to Techdots to upgrade your Rails application and skip the hassle of buffering. 

‍