Why Stimulus and Turbo (Hotwire) in Ruby on Rails? - Purpose & Use Cases

The Big Idea

Discover how to make your Rails apps feel lightning-fast without drowning in JavaScript!

The Scenario

Imagine building a web page where every button click or form submission requires you to write complex JavaScript to update parts of the page manually.

You have to track which elements to change, fetch new data, and update the HTML yourself.

The Problem

Manually writing JavaScript for every interaction is slow and error-prone.

It's easy to forget to update some parts or cause bugs that break the page.

Maintaining this code becomes a headache as the app grows.

The Solution

Stimulus and Turbo (Hotwire) let you add interactivity and partial page updates with minimal JavaScript.

Turbo handles fast page updates by only replacing parts of the page, and Stimulus connects simple JavaScript controllers to HTML elements.

This means less code, fewer bugs, and faster development.

Before vs After

✗ Before

document.querySelector('#like-button').addEventListener('click', () => {
  fetch('/like').then(response => response.text()).then(html => {
    document.querySelector('#likes-count').innerHTML = html;
  });
});

✓ After

<button data-action="click->like#increment">Like</button>

// Stimulus controller handles increment without manual fetch code

What It Enables

You can build fast, interactive web apps that feel smooth and modern without writing tons of JavaScript.

Real Life Example

On a blog, when a user clicks 'Like', Turbo updates just the like count instantly without reloading the whole page, and Stimulus manages the button behavior easily.

Key Takeaways

Manual JavaScript for UI updates is complex and fragile.

Stimulus and Turbo simplify interactivity with minimal code.

They help build fast, maintainable, and modern web apps.