Engineering

Getting started with Hotwire in Rails: Build Dynamic Apps Without JavaScript Overload

Haritha Kotte

Introduction

What is Hotwire?

Getting started with Hotwire in Rails

Best Practices for Using Hotwire

Hotwire vs Traditional Front-End Frameworks

Challenges and Limitations of Hotwire

What Suits Your Use Case?

Conclusion

Share this article

Introduction

Let’s face it—building modern web applications can get messy, especially when you start juggling JavaScript-heavy frameworks like React or Vue alongside your Rails app. They’re powerful, sure, but they also add a ton of complexity. Suddenly, you’re maintaining two separate systems: your Rails backend and a sprawling JavaScript frontend. That’s where Hotwire comes in, and let me tell you, it’s a game-changer.

Hotwire (short for HTML Over The Wire) takes a different approach. Instead of relying on JSON APIs and mountains of JavaScript, it uses the good old Rails way—server-side rendering—but with a modern twist. It’s all about keeping things simple and fast, without sacrificing user interactivity.

Here’s the deal:

Turbo is the heart of Hotwire. It handles navigation and partial page updates without needing a full page reload, kind of like magic.
Stimulus is the lightweight JavaScript framework that gives your HTML some extra flair without bloating your app.
There’s also Strada, which focuses on hybrid apps, but we won’t dive into that much here.

The beauty of Hotwire is that it lets you stay in your Rails comfort zone while delivering a frontend experience that feels modern and snappy. You get the speed of SPAs without the headache of managing a separate JavaScript framework.

In this guide, I’m going to walk you through everything you need to know to get started with Hotwire in Rails. Whether you’re building your first Rails app or you’re looking for a simpler way to handle dynamic updates, this is for you. By the end, you’ll see how you can ditch the JavaScript overload and build better, faster Rails apps. Let’s get into it!

What is Hotwire?

Hotwire, short for HTML Over The Wire, is a framework designed to build modern, interactive web applications while keeping most of the logic on the server side. It leverages Rails’ ability to render HTML efficiently and introduces mechanisms to send only the necessary parts of a page to the browser, minimizing the need for heavy JavaScript frameworks.

At its core, Hotwire focuses on simplicity and performance, providing developers with tools to create dynamic user experiences without needing to shift much of their logic to the client side.

Core Components of Hotwire

Hotwire is like a toolkit, and each tool has a specific job. Here’s the breakdown:

Turbo:

Turbo is the backbone of Hotwire. It enhances how pages are navigated and updated, providing a fast and seamless experience. It consists of three key features:
- Turbo Drive:
  
  This enables faster page loads by intercepting navigation and replacing only the <body> and <head> as necessary. This approach eliminates the need for full-page reloads and maintains a persistent browsing context.
- Turbo Frames:
  
  Turbo Frames allow you to define specific areas of a page that can be updated independently. For example, you can refresh a list of posts or a form submission result without reloading the entire page.
- Turbo Streams:
  
  Turbo Streams facilitate real-time updates by sending small chunks of HTML over WebSockets or HTTP. This is particularly useful for scenarios like live notifications, flash messages, appending new data to a feed, or updating a UI component dynamically.
Stimulus:

Stimulus is a lightweight JavaScript framework that complements Turbo by adding behavioral logic to your application. Instead of managing complex front-end state, you use Stimulus to attach specific behaviours to HTML elements. For example, you can use it to toggle content visibility, handle input events, or manage dynamic user interactions.
Strada:

While still evolving, Strada aims to integrate Hotwire with hybrid mobile applications, providing native-like interactions. It extends the reach of Hotwire beyond the browser, enabling developers to create seamless experiences on mobile devices.

Why Use Hotwire?

The primary motivation behind Hotwire is to streamline the development process for dynamic web applications. By leveraging server-side rendering for most of the work, Hotwire minimizes the complexity introduced by managing a separate client-side application. It offers several benefits:

Simplified Development:

Developers work primarily in Rails, using familiar tools and patterns. Turbo and Stimulus handle dynamic updates and interactivity without requiring a dedicated JavaScript framework.
Improved Performance:

Since only necessary parts of the page are updated, there’s less overhead in terms of network traffic and processing. This results in faster interactions for users.
Maintainability:

By keeping the bulk of the application logic on the server, the overall codebase remains more cohesive and easier to manage.

How Hotwire Fits Into Rails

Hotwire was introduced as the default front-end solution in Rails 7, making it tightly integrated into the Rails ecosystem. It adheres to the Rails philosophy of convention over configuration, enabling developers to build feature-rich applications with minimal boilerplate. Whether you’re building CRUD functionality, real-time updates, or interactive components, Hotwire provides tools that work naturally within Rails’ conventions.

This combination of tools makes Hotwire a practical choice for creating modern web applications where performance and simplicity are key priorities. It’s an approach that prioritizes server-side efficiency while delivering dynamic user experiences directly in the browser.

Getting started with Hotwire in Rails

Getting started with Hotwire in a Rails application is straightforward, especially if you’re working with Rails 7 or later, where Hotwire is included by default. If you’re using an older version, you can still integrate it manually with minimal setup. Let’s walk through the steps to set up Hotwire and verify that everything is working properly.

Prerequisites

Before diving in, make sure your environment meets the following requirements:

Ruby on Rails 7 or later (for built-in Hotwire support).
A functioning Rails application. You can create one with:

rails new myapp

If you’re using an older version of Rails, you’ll need to manually add Hotwire, which we’ll cover below.

Step 1: Installing Hotwire

If you’re using Rails 7, Hotwire comes pre-installed. Otherwise, you can install it in a few steps.

Run the Installation Command

From your terminal, navigate to your Rails project directory and run:
```
rails hotwire:install
```
This command will:
- Add the Turbo library to your project.
- Set up Stimulus for JavaScript behaviors.
- Update your JavaScript assets.
Verify Your JavaScript Setup

Open your app/javascript/application.js file. You should see the following lines:
```
import "@hotwired/turbo-rails"
import "controllers"
```
- The first line imports Turbo for handling page updates and navigation.
- The second line sets up Stimulus and links to the controllers directory, where you’ll define custom behaviors.
Check Dependencies

Ensure the following gems are listed in your Gemfile:
```
gem "turbo-rails"
gem "stimulus-rails"
```
if they aren’t present, add them and run:
```
bundle install
```
Install Node Modules (if necessary)

If you’re not using Rails 7, install the required JavaScript dependencies manually with:
```
yarn add @hotwired/turbo-rails stimulus
```

Step 2: Configuring Turbo

Turbo is automatically enabled in Rails 7 applications. It intercepts link clicks and form submissions, ensuring seamless updates without requiring additional configuration.

To test Turbo, create a simple form in your application:

Generate a Scaffold

Let’s start with a basic scaffold to test Turbo’s functionality:
```
rails generate scaffold Post title:string content:text
rails db:migrate
```
Turbo-Enable the Form

By default, Rails 7 uses Turbo for forms. Check your generated _form.html.erb file under app/views/posts/. You’ll see that form_with already includes Turbo:
```
<%= form_with model: @post do |form| %>
  <%= form.text_field :title %>
  <%= form.text_area :content %>
  <%= form.submit %>
<% end %>
```
Test Turbo Frames

To see Turbo Frames in action, wrap your posts list in a turbo_frame_tag:
```
<%= turbo_frame_tag "posts" do %>
  <%= render @posts %>
<% end %>
```
When you create a new post, only the posts frame will update, leaving the rest of the page untouched.

Step 3: Setting Up Stimulus

Stimulus enhances your application by adding client-side interactivity. Rails sets up a default controllers directory for Stimulus controllers.

Generate a Stimulus Controller

Use the Rails generator to create a new controller:

rails generate stimulus hello

This creates a new JavaScript file in app/javascript/controllers/hello_controller.js with the following boilerplate:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    console.log("Hello, Stimulus!")
  }
}

Link the Controller to Your HTML

Use data-controller attributes to connect the controller to your HTML elements. For example:
```
<div data-controller="hello">
  Open the console to see the message!
</div>
```
When you load the page, Stimulus will log the message to the console.

Step 4: Testing the Setup

Now, start your rails server and test the features that we have added:

Form submissions (handled by Turbo).
Navigation (handled by Turbo Drive).
Any custom Stimulus behaviors you’ve added.

If you see partial page updates and dynamic interactions without full reloads, Hotwire is successfully set up!

Step 5: Enabling Hotwire for Existing Apps

For existing apps, you can gradually adopt Hotwire:

Replace traditional forms with form_with for Turbo support.
Wrap parts of your templates in turbo_frame_tag for incremental updates.
Add Stimulus controllers for interactive elements.

Best Practices for Using Hotwire

While Hotwire simplifies building dynamic web applications in Rails, following best practices ensures that your implementation remains clean, efficient, and maintainable. These practices help you avoid pitfalls, keep your application performant, and make the most out of Hotwire’s capabilities.

1. Organize Turbo Frames Effectively

Turbo Frames are one of the most powerful features of Hotwire, allowing partial updates of a page. However, improper organization of Turbo Frames can lead to confusion or unintended behavior.

Give Each Frame a Unique Identifier:

Always assign a unique ID to your turbo_frame_tag. This ensures Turbo can correctly target and update the right frame. For example:
```
<%= turbo_frame_tag "post_#{post.id}" do %>
  <%= render post %>
<% end %>
```
Keep Frames Small and Specific:

Each frame should ideally handle a single piece of functionality (e.g., a form, a list item, or a modal). Avoid nesting too many frames unnecessarily, as this can complicate updates.
Test Frame Navigation:

When linking to another page within a Turbo Frame, make sure the response is targeted at the same frame. You can use the target attribute:
```
<a href="/posts/new" data-turbo-frame="new_post">New Post</a>
```

2. Optimize Turbo Streams for Real-Time Updates

Turbo Streams are fantastic for broadcasting updates to connected users in real-time, but they should be used judiciously.

Avoid Overloading Turbo Streams:

Sending too many updates can degrade performance, especially if you’re broadcasting to multiple clients. Only update what’s necessary and consider batching updates when possible.
Use Descriptive Stream Actions:

Turbo Streams support actions like append, prepend, update, and remove. Use the most appropriate action for clarity and efficiency. For instance, if you’re adding a new comment to a list, use append instead of update to avoid refreshing the entire list unnecessarily.
Leverage Rails Partial Templates:

When sending HTML updates via Turbo Streams, render small, self-contained partials to keep your templates modular and reusable. For example:
```
turbo_stream.append "comments", partial: "comments/comment", locals: { comment: @comment }
```

3. Write Maintainable Stimulus Controllers

Stimulus allows you to add interactivity to your application, but it’s essential to keep your controllers modular and concise.

Use Data Attributes Effectively:

Stimulus works by associating controllers and actions with elements via data-* attributes. Keep these attributes descriptive to clarify the controller’s purpose. For example:
```
<button data-controller="toggle" data-action="click->toggle#toggleVisibility">
  Show Details
</button>
```
Keep Controllers Focused:

Each Stimulus controller should handle one specific feature or behavior. Avoid bloating a single controller with multiple unrelated actions.

Leverage Targets for Element Selection:

Use Stimulus targets to reference elements in your HTML instead of manually querying the DOM. This makes your controllers cleaner and easier to maintain:

export default class extends Controller {
  static targets = ["details"]

  toggleVisibility() {
    this.detailsTarget.classList.toggle("hidden")
  }
}

In the HTML:

<div data-controller="toggle">
  <button data-action="click->toggle#toggleVisibility">Toggle</button>
  <div data-toggle-target="details" class="hidden">Detailed Information</div>
</div>

4. Manage Performance Proactively

While Hotwire is lightweight, improper use can still introduce performance bottlenecks.

Avoid Large Responses in Turbo Streams:

Keep Turbo Stream payloads small. If you need to send a significant amount of data, consider using Turbo Frames for lazy loading instead of streaming everything at once.
Cache Server Responses:

When rendering frequently updated content (e.g., lists or dashboards), cache partials to reduce server load and response times. Use Rails fragment caching to improve performance:
```
<%= turbo_frame_tag "posts" do %>
  <%= cache @posts do %>
    <%= render @posts %>
  <% end %>
<% end %>
```
Test WebSocket Load:

If you’re using Turbo Streams with ActionCable, monitor your WebSocket connections to ensure they scale well under load.

5. Debugging and Troubleshooting Hotwire

Use Browser Developer Tools:

Turbo and Stimulus make heavy use of HTTP requests and DOM updates. Open your browser’s developer tools to inspect network requests, Turbo Frames, and Stimulus controller events.
Enable Turbo Debugging:

To debug Turbo behavior, enable debugging in the browser console by running:
```
Turbo.setDebug(true)
```
This outputs detailed information about Turbo’s actions, helping you identify issues.
Check Stimulus Lifecycle Events:

Stimulus controllers emit lifecycle events (connect, disconnect, etc.) that you can log to ensure your controllers are working as expected.

6. Use Progressive Enhancement Principles

Hotwire works best when your application is built with progressive enhancement in mind. This means your app should function without JavaScript as a baseline, and Hotwire should enhance the experience where supported.

Graceful Degradation:

Ensure that forms, links, and other functionality still work without Turbo. For example, users without JavaScript should still be able to submit forms and navigate pages.
Fallbacks for Turbo Streams:

Provide fallback UI for real-time updates, such as refreshing the page manually, in case WebSocket connections are unavailable.

7. Stay Modular and Reusable

Extract Reusable Components:

When using Turbo Frames or Stimulus controllers, design them as reusable components. For instance, if you create a Stimulus controller for toggling modals, make sure it’s flexible enough to work across different pages.
Structure Stimulus Controllers Logically:

Group related controllers in app/javascript/controllers to keep your code organized. For example:
```
app/javascript/controllers/
├── form_controller.js
├── modal_controller.js
├── notifications_controller.js
```

8. Monitor User Experience

Hotwire’s goal is to deliver a seamless experience, so always test your application from the user’s perspective:

Test for Latency:

Simulate slow network conditions to ensure Turbo updates gracefully under poor connectivity.
Handle Errors Elegantly:

Provide meaningful feedback for Turbo frame or stream failures. For example, show a notification if a server-side action fails:
```
<%= turbo_stream.replace "notifications" do %>
  <div class="error">Something went wrong. Please try again.</div>
<% end %>
```

By adhering to these best practices, you can build robust, maintainable applications with Hotwire, leveraging its full potential while keeping your codebase clean and efficient.

Hotwire vs Traditional Front-End Frameworks

When deciding between Hotwire and traditional front-end frameworks like React, Angular, or Vue, it’s essential to understand their key differences in philosophy, architecture, and use cases. Each approach has its strengths and weaknesses, and the choice often depends on the complexity and requirements of your project.

Aspect	Hotwire	Traditional Front-end Frameworks
Philosophy	Server-side rendering with minimal JavaScript; HTML as the medium of communication.	Client-side rendering with JSON for communication; UI dynamically rendered in the browser.
Complexity	Lower complexity, single codebase.	Higher complexity, often requiring separate front-end and back-end codebases.
Performance	Lightweight updates via HTML, avoiding heavy JavaScript payloads.	Excellent for dynamic UIs but requires optimization (e.g., lazy loading, bundling).
Development workflow	Simple workflow; relies on Rails conventions and minimal tooling.	Requires advanced tooling (e.g., Webpack, Vite) and a more complex setup.
Use Cases	CRUD apps, dashboards, real-time updates (e.g., notifications, chat).	Highly interactive, state-driven apps (e.g., project management tools, SPAs, games).
Developer Experience	Easy for Rails developers; minimal JavaScript knowledge required.	Advanced front-end ecosystems; requires familiarity with JavaScript, state management, etc.
Scaling	Scales well for server-driven apps but limited for apps requiring heavy client-side interactivity.	Scales better for complex, interactive UIs with client-side logic.
Maintenance	Unified codebase simplifies maintenance.	Decoupled front-end and back-end require coordination, increasing maintenance complexity.
Ecosystem Support	Strong Rails ecosystem, but limited adoption outside Rails.	Large ecosystems, extensive third-party libraries, and community support.
Initial Setup Time	Faster setup since it integrates seamlessly with Rails.	Longer setup due to additional tooling and configuration.
Real-Time Updates	Managed via Turbo Streams, leveraging server-side broadcasting.	Typically requires WebSocket or API-based updates with client-side state synchronization.
Performance Overhead	Minimal JavaScript, reducing client-side overhead.	Requires managing client-side rendering, hydration, and state reconciliation.
Offline Capabilities	Limited support for offline features.	Better support for offline-first applications via client-side state and caching.
Team Requirements	Suitable for full-stack Rails developers.	Requires dedicated front-end expertise for larger teams.

Hotwire prioritizes simplicity by leveraging server-side rendering with minimal JavaScript. It integrates tightly with Ruby on Rails, making it easy to set up and maintain, especially for CRUD apps, dashboards, or real-time features like notifications. Its performance benefits come from sending lightweight HTML updates instead of relying on heavy client-side JavaScript. This approach is excellent for teams that prefer a Rails-focused development process with minimal complexity. However, Hotwire’s reliance on server-driven logic can limit its suitability for highly interactive applications or those requiring extensive offline support.

On the other hand, traditional front-end frameworks like React, Angular, or Vue are designed for building highly interactive, state-driven user interfaces. They shine in scenarios that demand complex client-side logic, such as SPAs, games, or applications with offline capabilities. However, these frameworks come with higher complexity, requiring dedicated tooling, expertise in JavaScript, and often a separate front-end codebase. While they excel in scalability and flexibility, they also introduce a steeper learning curve and additional maintenance overhead due to the decoupled architecture.

In summary, Hotwire is ideal for straightforward, server-rendered applications with moderate interactivity, while traditional frameworks are better suited for complex, interactive apps requiring rich client-side logic. The choice depends on your project’s requirements, team expertise, and the complexity of the desired user experience.

Challenges and Limitations of Hotwire

While Hotwire offers a fresh approach to building modern web applications with minimal JavaScript, it’s not without its challenges. Understanding these limitations will help you decide if Hotwire is the right fit for your project and prepare you for potential roadblocks.

Limited Suitability for Highly Interactive Applications

Hotwire struggles when building complex, state-driven UIs like those found in single-page applications (SPAs). Scenarios that involve extensive client-side state management, dynamic routing, or intricate workflows often require traditional front-end frameworks like React or Angular.

Example: If your app needs interactive dashboards with live charts that require constant user-driven updates without server involvement, Hotwire may not provide enough flexibility.
Lack of Offline Support

Applications requiring offline capabilities, such as Progressive Web Apps (PWAs), are challenging to implement with Hotwire. Traditional frameworks can leverage client-side storage and service workers to provide a seamless offline experience, while Hotwire depends heavily on server connectivity for updates and rendering.

Workaround: We might need to supplement Hotwire with additional JavaScript libraries or frameworks to enable offline functionality, adding complexity to the stack.
Dependence on Server-Side Rendering

Since Hotwire relies on server-side rendering, it requires a reliable and performant back-end server to deliver updates quickly. This can introduce challenges for apps with:
- High traffic loads that strain the server.
- Scenarios where reducing latency is critical, such as in global applications with distributed user bases.
- Tasks better handled on the client side, like animations or user input validation, which might still require custom JavaScript.
Compatibility with Non-Rails Backends

Hotwire is designed to work seamlessly with Ruby on Rails. If you’re using a different back-end framework (e.g., Django, Laravel, or Node.js), integrating Hotwire might require additional effort. While it’s possible to implement Turbo Streams and Drive in non-Rails setups, the lack of built-in support could limit productivity.

Challenge: You’ll need to manually implement the server-side broadcasting and HTML response standards that Hotwire relies on.
Real-Time Updates and Complexity

While Turbo Streams make real-time updates simple, they also add a layer of complexity for managing WebSocket connections or ActionCable. Scaling these features in a production environment with thousands of concurrent users can be challenging.

Example: In high-traffic applications, ensuring real-time updates remain performant without overwhelming the server or causing race conditions can require careful planning.
Limited Ecosystem Compared to Traditional Frameworks

Hotwire’s ecosystem, while growing, is not as extensive as established front-end frameworks like React or Vue. This means:
- Fewer third-party components and libraries for pre-built functionality.
- Limited community resources or plugins for solving edge cases.
- A smaller pool of developers familiar with the technology, which might affect hiring or collaboration.
Potential for Overloading the Server

Hotwire shifts much of the rendering responsibility to the server, which can lead to bottlenecks in high-demand applications. For example, frequent Turbo Streams updates can strain server resources if not optimized effectively.

Solution: Consider caching strategies and optimize your server infrastructure to handle increased rendering demands.

How to Address These Challenges

While these limitations can be significant, many can be mitigated with thoughtful design and planning:

Combine Hotwire with traditional JavaScript for specific components when needed.
Optimize server performance and caching to handle increased rendering demands.
Use best practices for WebSocket scaling and connection management.
Invest time in training your team to understand and adopt Hotwire concepts effectively.

Understanding these challenges upfront ensures that you can leverage Hotwire’s strengths while avoiding potential pitfalls, making it a powerful tool in the right contexts.

What Suits Your Use Case?

Choosing between Hotwire and traditional front-end frameworks largely depends on the specific requirements of your project, team expertise, and long-term goals. Here’s a guide to help you decide:

When to Choose Hotwire

Hotwire is a perfect fit if:

Your app is server-rendered: Applications like dashboards, admin panels, or CRUD-based platforms benefit from Hotwire’s simplicity and Rails-centric workflow.
You want to minimize JavaScript: If you’re looking for a lightweight approach without heavy reliance on front-end tools and frameworks, Hotwire is an excellent choice.
Real-time updates are important but manageable: Turbo Streams allow you to easily broadcast updates without the need for complex state management.
Team expertise is Rails-focused: Full-stack Rails developers will feel at home with Hotwire, reducing onboarding time and complexity.
You prioritize productivity: Hotwire simplifies development by keeping most of the logic on the server, allowing faster iteration and prototyping.

Use Cases: Blog platforms, e-commerce websites, internal tools, and apps with moderate interactivity.

When to Choose Traditional Front-End Frameworks

Traditional frameworks like React, Vue, or Angular are better suited for:

Highly interactive applications: SPAs, real-time collaboration tools (e.g., project management apps), and gaming platforms benefit from client-side state management.
Complex UI logic: Applications requiring dynamic data visualization, advanced animations, or offline-first features need the flexibility and power of front-end frameworks.
Decoupled architectures: When you want a fully separated front-end and back-end, using frameworks that rely on API-based communication is ideal.
Team expertise in front-end development: Larger teams with front-end specialists will find the ecosystems of these frameworks robust and flexible.
Scalability concerns: For apps that require scaling the front-end independently of the back-end, traditional frameworks provide better tools for performance optimization and client-side processing.

Use Cases: Social media platforms, SaaS products, interactive dashboards, and PWAs.

Hybrid Scenarios

Sometimes, neither approach fully meets your needs, and a hybrid solution may work best. For instance:

Use Hotwire for server-rendered pages and forms, but introduce StimulusJS or traditional frameworks for sections of your app requiring advanced interactivity.
Adopt Hotwire Turbo for HTML updates and use React or Vue components in highly interactive parts of the application.

Ultimately, the choice comes down to understanding your app’s complexity, the experience your users expect, and the skills available in your team.

Conclusion

Hotwire redefines how we think about building modern web applications by embracing simplicity and the power of server-rendered HTML. It allows developers to create highly dynamic, real-time user experiences without relying on the complexity of JavaScript-heavy front-end frameworks.

By combining Turbo’s seamless page updates with Stimulus’s light-touch JavaScript framework, Hotwire bridges the gap between traditional server-rendered applications and the demands of modern interactivity. It thrives in use cases where performance, maintainability, and rapid development are top priorities—making it a natural choice for CRUD applications, dashboards, and real-time features like notifications.

That said, Hotwire is not a one-size-fits-all solution. While it excels in server-driven logic, its reliance on server-side rendering may not suit apps requiring intensive client-side interactions or offline capabilities. However, for the majority of Rails projects, Hotwire offers a refreshing alternative that reduces complexity while keeping your application grounded in the Rails philosophy.

Hotwire isn’t just a tool—it’s a mindset shift. By prioritizing HTML over JSON and leaning on the server for logic, it invites developers to revisit a simpler, more productive way of building web apps. If you’re ready to build fast, dynamic applications without the JavaScript overload, Hotwire might just be the perfect fit for your next project.

Need help building your product?

Reach out to us by filling out the form on our contact page. If you need an NDA, just let us know, and we’ll gladly provide one!

Take me to the contact page

Top software development company Malaysia awards