{"id":3475,"date":"2020-06-11T08:52:00","date_gmt":"2020-06-11T08:52:00","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/need-to-use-the-common-js-frameworks-in-your-rails-app\/"},"modified":"2026-04-24T11:38:32","modified_gmt":"2026-04-24T11:38:32","slug":"vaja-kasutada-oma-rails-rakenduses-uhiseid-js-raamistikke","status":"publish","type":"post","link":"https:\/\/thecodest.co\/et\/blog\/need-to-use-the-common-js-frameworks-in-your-rails-app\/","title":{"rendered":"Stimulus.js: JS Framework alternatiiv Rails rakenduste jaoks: JS Framework Alternative for Rails Apps"},"content":{"rendered":"\n

I know what you\u2019re thinking\u2026 Another JavaScript<\/a> framework? There are already so many of them! You\u2019re right, but this one caught my attention as it was created by Basecamp<\/strong>. You probably know this company, they are the creators of Ruby on Rails<\/a><\/strong>. They also created Turbolinks,<\/strong> and I mention this because Stimulus pairs beautifully with it. So, maybe it\u2019s worth giving Stimulus a try?<\/p>\n\n\n\n

How does it work?<\/strong><\/p>\n\n\n\n

Stimulus works by monitoring the page, waiting for the data-controller<\/code> attribute to appear. The data-controller<\/code> value connects and disconnects Stimulus controllers. The premise is simple: just as class is a connection between HTML and CSS, data-controller<\/code> is a bridge from HTML to JavaScript. Stimulus also adds the data-action<\/code> attribute, which describes how events on the page should trigger the controller methods, and the data-target<\/code> attribute, which gives you a handle for finding elements in the controller\u2019s scope.<\/p>\n\n\n\n

Easy installation<\/h2>\n\n\n\n

If your Rails<\/a> app is using a webpacker gem, you can install Stimulus with one simple command as the webpacker gem provides a task for installing Stimulus. Just run the following command in your Rails root directory:<\/p>\n\n\n\n

rails webpacker:install:stimulus<\/code>
This adds Stimulus to package.json<\/code> and creates the following two files: app\/javascript\/controllers\/index.js:<\/code><\/p>\n\n\n\n

import { Application } from \"stimulus\"\nimport { definitionsFromContext } from \"stimulus\/webpack-helpers\"\n\nconst application = Application.start()\nconst context = require.context(\"controllers\", true, \/_controller.js$\/)\napplication.load(definitionsFromContext(context))<\/code><\/pre>\n\n\n\n
You can see that the webpack\u2019s require.context helper is called. It then passed the resulting context to the Application#load method. This means that our application is looking for files named[identifier]_controller.js<\/code> in the app\/javascript\/controllers\/<\/code> directory, where the identifier corresponds with the controller\u2019s data-controller identifier in your HTML. This is exactly the place where we should put the Stimulus controllers.
The app\/javascript\/controllers\/hello_controller.js<\/code> is also generated. This is just an example controller that we can play with.<\/p>\n\n\n\n
Basic usage<\/h3>\n\n\n\n
Ok, so we have the hello_controller.js<\/code> file created with the following code<\/a>:<\/p>\n\n\n\n
import { Controller } from \"stimulus\"\n\nexport default class extends Controller {\nstatic targets = [\"output\"]\nconnect() {\nthis.outputTarget.textContent = 'Hello, Stimulus!'\n}\n}<\/code><\/pre>\n\n\n\n
But, as you know, we won\u2019t see any effects if we don\u2019t make the connection between HTML and JavaScript. Let\u2019s add some code to your HTML view. You can put this whenever you want:<\/p>\n\n\n\n
<div data-controller=\"hello\">\n<p data-target=\"hello.output\">&nbsp;<\/p>\n<\/div><\/code><\/pre>\n\n\n\n
And you know what? That\u2019s all! If you reload your page and see \u201cHello, Stimulus!\u201d on your page, this means that the connection is working properly. Simple, right?
Ok, but this is just a plain text display. Can we have some action? Yes, we can! As I mentioned before, there is also the data-action<\/code> attribute. Let\u2019s then change our HTML view:<\/p>\n\n\n\n
<div data-controller=\"hello\">\n<p><input type=\"number\" data-target=\"hello.days\"><br><button data-action=\"click->hello#calculate\">Calculate<\/button><\/p>\n<\/div><\/code><\/pre>\n\n\n\n
And the Stimulus controller app\/javascript\/controllers\/hello_controller.js<\/code>:<\/p>\n\n\n\n
import { Controller } from \"stimulus\"\n\nexport default class extends Controller {\nstatic targets = [\"output\", \"days\"]\nconnect() {\nthis.outputTarget.textContent = 'How long have you been in quarantine?'\n}\ncalculate() {\nconst element = this.daysTarget\nconst days = element.value\nconst lockdownDays = 14\nlet daysLeft = lockdownDays - days\n\nif (daysLeft < 1) {\n  alert('You are free!')\n}\nelse {\n  alert(`Amount of days you need to stay on quarantine: ${daysLeft}`)\n}\n\n}\n}<\/code><\/pre>\n\n\n\n
Here we have a very simple app that calculates how long we must stay in quarantine. We managed to do this by using the data-action attribute in HTML.
You can see that we also added \u201cdays\u201d to the list of targets in the JavaScript code. When we do this, Stimulus automatically creates a this.daysTarget<\/code> property which returns the first matching target element.<\/p>\n\n\n\n
What else do you need to know?<\/h2>\n\n\n\n
Callbacks<\/h3>\n\n\n\n
You probably noticed that there is a connect()<\/code> method in both examples. This one is for built-in callbacks. You should know all of them and their lifecycle, so here they are:
initialize<\/code>: once, when the controller is first instantiated,
connect<\/code>: anytime the controller is connected to the DOM,
disconnect<\/code>: anytime the controller is disconnected from the DOM.<\/p>\n\n\n\n
Action descriptor<\/h3>\n\n\n\n
The data-action<\/code> value click->hello#calculate<\/code> is called an action descriptor. This descriptor says that:<\/p>\n\n\n\n