A JavaScript framework for the HTML you already have

The Stimulus framework is a lightweight JavaScript library designed to enhance existing HTML elements with interactivity. Here’s a breakdown:

• Focus on Simplicity: Unlike some larger frameworks, Stimulus doesn’t aim to control your entire front end. It focuses on adding specific behaviors to existing HTML, making it a good choice for projects that don’t need a heavy framework.
• Controllers and Data Attributes: Stimulus works by letting you write small JavaScript programs called controllers. These controllers connect to specific HTML elements using data attributes. Imagine a button with a data-controller="like" attribute. The like controller would then be responsible for handling the button click and making the element (the button) more interactive, perhaps adding an animation or sending data to the server.
• Clean and Maintainable Code: This approach keeps your HTML clean and your JavaScript code organized into small, reusable controllers. This makes your web application easier to maintain and understand.

Rails And Stimulus

Rails integrate nicely with the Stimulus framework, making it a great choice for adding interactivity to your Rails applications. Rails 7 comes with Stimulus pre-bundled, making it easy to get started. You can leverage Stimulus controllers to enhance your application’s user experience without needing a separate JavaScript framework.

Here are some of the advantages of using Stimulus with Rails:

• Improved Performance: Since Stimulus is lightweight, it keeps your web application’s bundle size small, leading to faster loading times.
• Developer Experience: Rails developers familiar with HTML and JavaScript will find Stimulus easy to pick up. It promotes clean separation of concerns between your HTML templates, server-side logic (Ruby code), and client-side interactivity (Stimulus controllers).
• Complements Other Hotwire Features: Stimulus works seamlessly with other Hotwire features like Turbo Links and Turbo Frames, allowing you to build highly responsive and interactive web applications without a full-blown JavaScript framework.

Here’s a basic Rails Stimulus code example that demonstrates how to greet a user by name:

<div data-controller="hello"> 
  <input type="text" data-hello-target="name" placeholder="Enter your name">
  <button data-action="click->hello#greet">Greet me!</button>
</div>

JavaScript (app/javascript/controllers/hello_controller.js):

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "name" ] // Define targets  greet() {
    const element = this.nameTarget // Access target element
    const name = element.value
    console.log(`Hello, ${name}!`)
  }
}

Explanation:

• HTML:
• We have a div with data-controller="hello" which connects it to the HelloController class.
• An input field with data-hello-target="name" to store the user's name and link it to the name target in the controller.
• A button with data-action="click->hello#greet" which triggers the greet method in the HelloController when clicked.
• JavaScript:
• We import the Controller class from @hotwired/stimulus.
• The class inherits from Controller.
• We define a static property targets = ["name"] to tell Stimulus about the target element with the name "name".
• The greet method is called when the button is clicked.
• Inside greet, we access the input element using this.nameTarget and get the user's name from its value property.
• Finally, we log a greeting message with the user’s name.

Running the example:

• In your Rails project, run rails g stimulus hello to generate the controller files.
• Include the necessary JavaScript pack in your application layout.
• This is a basic example. You can modify it to perform actions like sending an AJAX request to the server or manipulating the DOM to display the greeting message.

Best Practices

Stimulus controllers are designed to handle specific behaviors for your HTML elements. This could be anything from toggling a dropdown menu to sending an AJAX request when a button is clicked. So, instead of trying to build a controller that handles all behavior of a form/page try to split it into small components.

Having small components makes it easier to adapt them into reusable ones. Stimulus provides you with different ways of configuring your component like the `target` used in the example, but you can set action params, CSS classes, and controller values.

Whenever you see that a component is doing more than one thing, you can split it and make it work together by using events. And since actions work based on events, it is easy to chain them.

Conclusion

Rails and Stimulus are a perfect match for building web applications that prioritize efficiency.

Stimulus adds a touch of interactivity without the weight of a full front-end framework. It complements Rails’ server-side rendering, keeping your app performant.

The familiar Rails-like development style with Stimulus makes it easy for Rails developers to pick up, promoting clean separation of concerns and maintainable code.

Here are some resources to learn more about Stimulus in Rails:

• Stimulus Handbook: https://stimulus.hotwired.dev/handbook/introduction
• Stimulus for Rails on GitHub:
  https://github.com/hotwired/stimulus-rails/releases