February 01, 2018

Stimulus works by continuously monitoring the page, waiting for the magic data-controller attribute to appear. Like the class attribute, you can put more than one value inside it. But instead of applying or removing CSS class names, data-controller values connect and disconnect Stimulus controllers.

Think of it like this: in the same way that class is a bridge connecting HTML to CSS, data-controller is a bridge from HTML to JavaScript.

On top of this foundation, Stimulus adds the magic data-action attribute, which describes how events on the page should trigger controller methods, and the magic data-target attribute, which gives you a handle for finding elements in the controller’s scope.

Stimulus offers a very simple, elegant and concise way to upgrade your server-rendered site with JavaScript.

Once you see it, you think: “Wow, why didn’t anybody come up with this earlier?”.

To be fair: a big part of the elegance is to be able to use ES2015 classes.

And to be even fairer: other people had similar ideas way before Basecamp. Flight by Twitter for instance has a similar approach, but IMHO it was stuck in the past already a few years ago and it is not under active development anymore.

Stimulus is basically the better, modern version of Flight.

Fun fact: it turns out that Google is using almost identical patterns to Stimulus in most of their consumer facing web apps, since years:

Malte Ubl, head honcho of Google AMP on Twitter:

Malte also said they decided against open sourcing it years ago.

Which I would argue, is not a bad thing. Basecamp found a much nicer name, they made a really beautiful website for it and the writing in the Stimulus handbook is really great! I doubt Google would have done as good of a job at that.