Techdots
Blog
Introduction to Hotwire: Transforming Rails Applications with Real-Time Interactivity
Discover how to enhance your Rails applications with Hotwire, Turbo, and Stimulus. Create interactive features effortlessly without relying on heavy frontend frameworks. Dive in!

Hotwire is a new way to create interactive web applications, making it easier to build features without relying heavily on front-end JavaScript frameworks. It uses two main technologies: Turbo and Stimulus.

Turbo improves your application by managing navigation and updating sections of your page without needing to reload the entire page. It includes various components, such as Turbo Drive, Turbo Frames, and Turbo Streams. Stimulus is a simple JavaScript framework that lets you add dynamic features to your application with minimal setup.

In this article, we will explore how to set up Hotwire in a Rails application, develop responsive features using Turbo Frames, and incorporate dynamic behaviors with StimulusJS. Let’s dive straight into the article: 

Setting Up Hotwire in Rails

Hotwire is easy to integrate into Rails applications. To start using it, follow these steps:

Add Hotwire to your Rails application: Add the Hotwire gem to your Gemfile:

Install the necessary JavaScript packages: Run the install command:

```
bundle install
rails hotwire:install
```

This will set up Turbo and Stimulus in your Rails application, including the necessary JavaScript files and configurations.

Run migrations to prepare the application if necessary, especially if using the Turbo Streams feature.

```
rails db:migrate
```

With these steps, Hotwire is now integrated into your Rails application. Next, we’ll explore how you can build interactive components with Turbo Frames and enhance your application’s frontend logic with StimulusJS.

Enhancing Navigation with Turbo Drive

Turbo Drive is the part of Turbo that handles navigation by replacing full-page loads with faster, partial updates. When Turbo Drive is enabled, all regular links and form submissions in your application are intercepted, making them work like Single Page Application (SPA) navigations.

By default, Turbo Drive is enabled when you install Hotwire. It listens for clicks on links and form submissions and then fetches only the necessary content to update the page, preserving the page’s state and speeding up navigation.

Example: Faster Task Navigation with Turbo Drive

In your Rails application, Turbo Drive will automatically handle navigation when users move between pages, such as from the task index to the new task form or task edit form.

Consider this simple navigation from the task index (index.html.erb):

```

<%= link_to "New task", new_task_path, class: "btn btn--primary" %>
```




Building Interactive Components with Turbo Frames

Turbo Frames allow you to update sections of your page dynamically, which is especially useful for building interactive UIs without requiring page reloads. Let’s explore how to use Turbo Frames in the context of a task management feature.

Example: Managing Tasks with Turbo Frames

Below is a simplified example from your TaskController:

The controller actions make use of Turbo Streams (format.turbostream), which allow the application to broadcast changes (like task creation, updates, and deletions) without needing full-page reloads.

In the corresponding views, you can use Turbo Frame tags to dynamically update parts of the page. For example, your index.html.erb might look like this:



Here, we use turbo frame tag to wrap the task list (@tasks), which updates dynamically when a new task is added, edited, or removed.

Turbo Stream Partial Example

In the create.turbostream.erb partial, we broadcast the new task to the tasks stream:


This ensures that newly created tasks appear at the top of the task list without reloading the page.

Using Stimulus for Frontend Logic

While Turbo handles the heavy lifting of real-time updates, StimulusJS is perfect for adding small amounts of JavaScript to enhance frontend behavior.

Example: Adding Dynamic Form Validation with Stimulus

Let’s say you want to validate task inputs before submitting them. You can create a Stimulus controller to handle this logic:



In this form, we use Stimulus to disable the submit button unless the user enters a task name. The Stimulus controller listens for input changes and validates the form dynamically.

Why Hotwire and Stimulus Are More Helpful Compared to Traditional Approaches?

Hotwire and Stimulus bring a new, more efficient paradigm to web development in Rails applications. Let’s dive into how they improve upon traditional methods that relied heavily on front-end JavaScript frameworks like React, Vue, or the jQuery era.

Traditional Approaches Before Hotwire

Before Hotwire, developers primarily had two main approaches to building interactive and dynamic web applications in Rails:

  • Heavy JavaScript Frontend Frameworks (like React, Vue.js, Angular)
  • jQuery or AJAX-Based Interactions

How Hotwire and Stimulus Are More Helpful?

Hotwire, which includes Turbo and Stimulus, offers a unique approach that connects server-rendered applications with client-side interactivity. This method provides significant benefits compared to traditional frameworks.

One major advantage is reduced complexity. With Hotwire, developers can create dynamic features without relying on large JavaScript frameworks like React or Vue. Turbo simplifies page updates and partial rendering through components like Turbo Drive, Turbo Frames, and Turbo Streams, all without the overhead of a full front-end framework. Meanwhile, Stimulus allows for lightweight, unobtrusive handling of client-side logic directly in the HTML, making it easier to add interactive behaviors without the complexities associated with larger frameworks.Hotwire also enhances user experiences by providing real-time updates with minimal JavaScript.

This server-side approach reduces the need for separate frontend frameworks, streamlining the development process.However, there are some potential downsides to using Hotwire and Stimulus. One drawback is that they may not be ideal for complex frontends, as they lack the features necessary for highly interactive and rich client-side user interfaces like those offered by React or Vue. Additionally, there is limited client-side state management; Turbo is primarily server-driven and doesn’t effectively manage client-side state. This reliance on server-rendered updates can put a strain on the server in high-traffic situations, leading to increased server load.Moreover, in environments with high latency, server-side rendering can result in slower interactions.

Hotwire also lacks native client-side rendering capabilities, which can hinder offline experiences or advanced local state management. Lastly, developers might encounter browser compatibility issues, particularly with older browsers that may require polyfills to support features like Turbo Streams and Server-Sent Events.Despite these limitations, Hotwire and Stimulus are excellent choices for many Rails applications, especially those focused on server-rendered views with moderate interactivity. For projects with more complex frontend requirements, it may be beneficial to combine Hotwire with a lightweight client-side framework or enhance its capabilities with custom JavaScript.

Conclusion

Hotwire is an incredible tool for adding real-time interactivity to Rails applications without the need for complex JavaScript frameworks. Turbo Drive enhances navigation by speeding up page loads and providing a seamless, SPA-like experience. Turbo Frames enable dynamic updates to sections of your page without full reloads, and StimulusJS makes it easy to sprinkle dynamic behaviors across your app.In this post, we covered how to set up Hotwire in a Rails app, use Turbo Drive to improve navigation, build interactive components with Turbo Frames, and add dynamic frontend logic with StimulusJS. Whether you're building a task management feature like the one demonstrated here or something more complex, Hotwire provides a seamless solution to modernize your Rails applications with ease. For expert guidance and support, consider partnering with TECHDOTS, a company dedicated to helping you leverage Hotwire effectively in your projects.

Contact
Us
Our Technology Stack

Work with future-proof technologies

Typescript
React JS
Node JS
Angular
Vue JS
Rails
Ruby on Rails
Go
Next JS
AWS
SASS