Review

Stimulus.js has been an accelerant to my productivity as a Ruby on Rails developer. I’ve used Angular in the past, but it seemed like I had to go all in on Angular and relegate Rails to a dumb API. I love Rails, so this wasn’t going to be my selected solution.

However, since Stimulus launched, I’ve taken the time to learn it, and I thought I’d share some of what I’ve learned in a series of small tutorials. It’s given my apps the interactivity to rival any single page application framework, and I get to use all the Rails magic that makes it a joy to work in.

The following are a collection of my favorite tutorials. I hope they teach and inspire you to build world class web applications with a world class web framework.

Stimulus Pearls: A Collection of Stimulus.js Tutorials

How many web pages actually need a JS framework?

Most don’t. They just need sprinkles of interactivity. Stimulus.js provides the modern JavaScript framework to provide interactivity your user’s crave, without needing to relegate you Rails app to a JSON API. 

New to Stimulus.js?

Follow along with step by step instructions to learn all best practices I’ve discovered from my tutorials at onrails.blog. It’s become my first choice for adding rich interactivity to any project I’m working on.

Stimulus speeds up development and web app performance

Your users only complain about speed when they don’t perceive it’s fast. Developers want to build web apps without getting stuck in the JavaScript upgrade treadmill. Stimulus provides a lightweight way to make user actions feel instantaneous, and won’t weigh down your Lightspeed score. 

And since you don’t need to rewrite the front end in the latest templating framework, you can focus on writing features, not rewriting forms.

Tutorials

Here is a full list of my Stimulus.js Tutorials:

• Adding Tables to ActionText With Stimulus.js
• Radio Selection Unselect
• Building a PWA with Rails and Stimulus
• Convert your jQuery snippet to a Stimulus controller
• Stimulus.js & HOTWire Tutorial: Interactive Deletes
• Interactive Deletes with Rails UJS
• Stimulus + ActionCable + ActiveJob: Loading Asynchronous API Data
• Leaving Breadcrumbs in your Progressive Web App with Stimulus.js
• Using Stimulus.js to Subscribe to Many Channels in ActionCable
• Grabbing ActionCable with Stimulus.js
• Build a Markdown editor in Stimulus.js like in Vue.js
• Let’s Make An Editable Header Using Stimulus.js
• Use Stimulus and Trix to convert Emoji Short Codes to Unicode Characters
• Sticky Table Header
• Filter Data in a List or Table
• Update Model from a Checkbox (2nd Version) (Original) 
• HOTWire: Dragging and Dropping Items in a List (Original)
• Implementing Radio Selection In A Form
• Don’t Lose Unsaved Form Fields
• Don’t accidentally walk away from your Active Storage Uploads
• Let’s create a Trix Editor plugin using Stimulus.js
• Using multi select to pare down a large set of data
• Multiple Selects that Filter Enterprise Data Models
• HOTWire: Where do I store my HTML state?