Goal

Show the before and after implementation of table filtering with the new modest js framework named stimulus

We'll focus on a simple page with a table and filter capability.

I'll break this down into 2 steps:

• Implementation without Stimulus
• Implementation with Stimulus

Implementation without Stimulus

To accomplish this part I created a simple project. There are 2 files that are involved:

HTML File

CoffeeScript file

Here I am demonstrating the filtering of table rows when a user presses enter.

Implementation with Stimulus

To accomplish this part I utilized the master branch. This commit shows the diff of the conversion. Final demo app can be found here.

There are 3 files that are involved:

HTML File

The notable changes here to notice are the utilization of the data attributes of target, controller, and action. The action specifically defines the javascript event keyup and the controller and function it will invoke.

Application JS file

Not much to say about this file, as it is the basic wiring needed as the entry-point for Stimulus use.

Hello Controller JS file

Here I am demonstrating the conversion into Stimulus from original CoffeeScript.

Conclusions

Stimulus really shines when you can use it to describe the event handlers in the data attributes instead of having to deal with them in JavaScript. If you are using server side rendering of html, this framework can really help you organize your javascript and manage events.