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.
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.
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:
This is almost identical to Wiz which runs most of Google's consumer web apps.— Malte Ubl (@cramforce) January 31, 2018
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.
If you have any remarks or comments I am happy to hear from you on Twitter.
To be notified about new posts subscribe to the feed or follow me on Twitter.