Building a Rails App with a Stimulus.js Frontend

Stimulus.js is a lightweight JavaScript framework that makes it easy to add interactivity to your Rails applications. By using Stimulus.js, you can enhance the user experience of your Rails application without needing to write complex JavaScript code.

In this blog post, we’ll walk through the process of building a Rails application with a Stimulus.js frontend. We’ll cover the basics of Stimulus.js, including how to create controllers, add behavior to elements, and communicate between controllers.

1. Setting up a new Rails application with Stimulus.js

To get started, we’ll create a new Rails application and add Stimulus.js to our project. To add Stimulus.js to our project, we’ll use the Webpacker gem, which is included in Rails 6 by default.

1. Create a new Rails application:

rails new stimulus-example

2. Install Webpacker:

rails webpacker:install

3. Install Stimulus.js:

yarn add stimulus

Now that we have Stimulus.js installed, let’s create our first controller.

2. Creating a Stimulus.js controller

A Stimulus.js controller is a JavaScript class that manages the behavior of a single element on the page. To create a controller, we’ll create a new JavaScript file in the app/javascript/controllers directory.

Let’s create a simple controller that will toggle the visibility of an element on the page when a button is clicked.

1. Create a new file app/javascript/controllers/toggle_controller.js:

import { Controller } from 'stimulus'

export default class extends Controller {
  static targets = ['element']

  toggle() {
    this.elementTarget.classList.toggle('hidden')
  }
}

2. Add the controller to our view:

<div data-controller="toggle">
  <button data-action="click:toggle">Toggle</button>
  <p data-target="toggle.element">Hello, World!</p>
</div>

The data-controller attribute tells Stimulus.js to initialize a new instance of our ToggleController class for the element. The data-action attribute tells Stimulus.js to bind the toggle method to the click event of the button. The data-target attribute tells Stimulus.js to set the elementTarget property to the paragraph element.

Now, when we click the “Toggle” button, the hidden class will be toggled on the paragraph element.

3. Adding more complex behavior with Stimulus.js

Stimulus.js controllers can also communicate with each other, making it easy to create more complex behavior on the page.

Let’s create a new controller that will increment a counter when a button is clicked. We’ll also update the value of the counter from another controller.

1. Create a new file app/javascript/controllers/counter_controller.js:

import { Controller } from 'stimulus'

export default class extends Controller {
  static targets = ['count']

  initialize() {
    this.count = 0
  }

  increment() {
    this.count++
    this.countTarget.innerText = this.count
    this.dispatch('counter:updated', { count: this.count })
  }
}

2. Add the controller to our view:

<div data-controller="counter" data-action="counter:updated@window->counter.update(event.detail)">
  <p>Count: <span data-target="counter.count">0</span></p>
  <button data-action="click:counter#increment">Increment</button>
</div>

The initialize method is called when the controller is initialized and sets the initial value of the count property to 0. The increment method increments the count property and updates the value of the count element on the page. It also dispatches a custom event, counter:updated, with the current value of the counter.

3. Create a new file app/javascript/controllers/updater_controller.js:

import { Controller } from 'stimulus'

export default class extends Controller {
  connect() {
    this.listenTo(window, 'counter:updated', (event) => {
      this.element.innerText = event.detail.count
    })
  }
}

4. Add the controller to our view:

<div data-controller="updater">
  Current Count: <span data-target="updater.element">0</span>
</div>

The connect method is called when the controller is connected to the page. It sets up a listener for the counter:updated event and updates the value of the element target with the new count.

Now, when we click the “Increment” button, the count value will be incremented and the counter:updated event will be dispatched. The updater controller will then update the value of the element target with the new count.

4. Conclusion

By using Stimulus.js with Rails, we can create interactive and dynamic applications without having to write complex JavaScript code. Stimulus.js makes it easy to manage the behavior of individual elements on the page and communicate between controllers to create more complex behavior.

In this blog post, we covered the basics of creating a Stimulus.js controller, adding behavior to elements, and communicating between controllers. We also showed how to use Stimulus.js to create more complex behavior on the page.

By using Stimulus.js in your Rails applications, you can create a better user experience for your users and make your applications more interactive and engaging.