Seeking a JavaScript Framework (Part 3: Success!)

So far, I've covered what I want in a JavaScript Framework and then I covered several popular JavaScript frameworks and why none of them are what I want.

Just when I was about to despair, however, I ran across a little-regarded framework that does just what I want.

Just to rehash quickly, here are my criteria:

So, basically, I want a small, declarative JavaScript framework that uses the DOM as a source of truth and builds functionality on top of that in a declarative manner.

I was just about to give up when I ran across an old link that I had saved.

Enter Stimulus!

The library I found is called Stimulus. It is part of Hotwire (but can be used by itself), which itself is put out by 37 Signals and is the default JavaScript of Ruby on Rails. The major part of Hotwire is Turbo, which is basically a direct competitor to htmx.

I started using htmx before I discovered Turbo.I found a review of the Turbo docs to indicate a solution less elegant than that which htmx provides. Most likely, however, if I had discovered Turbo first, however, I would say the same of htmx. (hopefully I'll blog about htmx soon)

In any event, let's look at the same chart we looked at for several frameworks last time, but applied to Stimulus.

In my mind, this is pretty impressive!

What is Stimulus?

Stimulus is a JavaScript framework built by 37 Signals (think: BaseCamp and Ruby on Rails). It is even bakes into Rails itself. They call it "A modest JavaScript framework for the HTML you already have", which is a pretty good description.

More than anything else, it provides structure to your JavaScript. It can work with the HTML that you have and even connect it to other JavaScript. For example, I often use Stimulus to help organize code that I write using jQuery. I've also used Stimulus to make for an organized way to connect to JavaScript libraries I find in the wild.

What Does it Do?

I don't want to get into too much detail, as the documentation is actually fairly good, but I think some high-level overview about what is great would be helpful.

The first thing to understand is that the base unit in Stimulus is a "Controller". This is similar to a component in ColdFusion or to an object in many languages, but not quite. Basically, it is the access point for a single piece of functionality.

Let's say, I've created the coolest piece of functionality. I might call my controller "coolest". It would live in a file called "coolest_controller.js", which would be located in whichever folder I've decided to standardize as the location for all of my Stimulus controllers.

There are lots of ways to load the controller onto the page. My current favorite is to have each controller import Stimulus (the browser will only perform the action once) and then just include the file at the bottom of the page.

The real magic is that I hook it up to my HTML by use of the "data-controller" attribute.

Now the it is obvious in the code where the functionality is coming from. At a glance, I know I need to find "coolest_controller.js" for this functionality.

Before using Stimulus, I would often be using a page and I could see that there was JavaScript in use, but I would open up the page and it wouldn't be immediately obvious where the relevant script was. I would have enough JavaScript in the page doing different things that it would take time to find the relevant script. That script was often attached to the code either by a class or an id attribute. That lack of standardization would also add to my debugging time.

Just using the "data-controller" attribute as the attachment point saved me time. While Stimulus is great, I would say just having a standard method of attachment like that would give you a large benefit even without Stimulus. It really has saved me a lot of time and headaches.

If I want my Stimulus controller to respond to an action, then I'll need to put that in my HTML.

Now clicking the button will call the "hello" method of the "coolest" controller. Again, it makes it obvious what is happening just by looking at the HTML.

If I want to make data available to the controller, I can use special data attributes for that as well.

That isn't to say that I couldn't use existing HTML to get data, just that if I need some data just for this controller, I could put it in that data attribute. Again, that makes clear in the HTML that the "iterations" there is just for the "coolest" controller. If this were a real controller (and I'll blog about some real examples soon) then it would probably be obvious from context what those values were for.

In this example, if I wanted to get to the "Greet" text, I wouldn't necessarily need to put that into a "data" attribute. That is already available and its use would probably be obvious. The "iterations" value, however, doesn't have a natural place to exist in the HTML. So it goes in a data attribute.

Often I will write a small Stimulus controller that uses some jQuery code or that is just a middle layer to call some third-party JavaScript code. The advantage of this is that I'm using a standard syntax in HTML to reference the third-party code and so I can get an idea of what is happening just by looking at my HTML.

There is plenty more to write about Stimulus. For example, understanding their concept of "targets" is particularly helpful. Hopefully, though, this provides just enough of a hint to inspire you to check out the Stimulus Documentation.