Masatoshi Nishiguchi
Software Engineer

Stimulus JS

javascript stimulusjs react

I like writing React apps. While it is good to keep with the popular javascript framework, every now and then I ask myself: “Do I really need it?”. I have a feeling that using React, Vue, etc is overkill in many cases.

Stimulus is a nice powerful alternative that allows us to keep javascript code simple. I personally see Stimulus more similar to jquery than to React etc. Stimulus simply helps us find elements, define event listeners and event handlers. Also Stimulus gives us conventions for our code organizaton.

Stimulus termininology

Pretty much only the following three key things:

Basic Usage

It is easy. Here are all you need know about other than fundamental Web development skills.

Step 1: Setup

Step 2: Write HTML

In Stimulus, we write pure HTML, no DSL or directives. Long story short, we annotate our HTML tags using HTML data attributes, namely:

As long as we follow Stimulus naming conventions, Stimulus will automatically load them and make them available our Stimulus controller.

Step 3: Write a controller subclassing Stimulus’ Controller

Comparison between Vanilla JS and Stimulus

I wrote two versions of the hello greeting app (with and without Stimulus) so that I can compare and figure out what are some benefits of using Stimulus.

Vanilla JS

Some things I thought of:

++

--


With Stimulus

Some things I thought of:

++

--


Conclusion

Stimulus is a nice and simple alternative to both jquery and other modern JS frameworks like React. I believe that Stimulus helps us remove the overhead of code organization and maintainability by enforcing its conventions. Most importantly it works like a charm.