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.
Top comments (0)