Skip to main content

Stimulus JS Framework Introduction Discussion

General • Asked by Chris Oliver

I'm literally figuring out StimulusJS right now on an app, and I was hoping you would do a screencast on it soon and save me some time! Awesome timing :)

Hit me up with your questions! I'm still learning it too, but the good news is that it's pretty straightforward so there isn't _too_ much to learn.

I'm compiling a list of problems I'm running into as I stumble my way through it! I use a lot of CoffeeScript classes to interact with my app and avoid spaghetti code, like you show in https://gorails.com/episode....

One issue I ran into already is that it seems the `data-controller="..."` attribute cannot have underscores (_) in the controller name. For example, `app/javascript/packs/transaction_record_controller.js` with `data-controller="transaction_record"` will not work, but once you remove the underscore it works fine. I couldn't find any documentation on this, and I can't think of anything my app is doing that would cause a conflict, so I'm assuming it's the way Stimulus works.

I've been slowly converting several of my CoffeeScript classes into Stimulus controllers, and so far I've found it to be a great way to take care of stuff like adding a datepicker to an AJAX form, etc...

This section in the docs mentions that you can only use hyphens in the controller name in your html. It maps to either a hyphenated or underscore controller.js filename though. https://github.com/stimulus...

And yeah I think this is a nice clean way of refactoring those CS classes. You no longer have to deal with managing event listeners and can purely focus on the code that runs for each event. 👍

Chris, one question that would be awesome for you to cover is handling lists of elements.

For instance, I'm working on a notifications system right now (based off of some of your episodes!), and I want to have a data-controller to maintain list-level actions (like mark all as read) but also individual elements (such as mark an individual notification as read/unread, click the notification to view associated record, etc).

Stimulus has been updating their docs and they now have a section that talks about multiple data-controllers for lists, but I'm not sure what the "standard" is for high-level list actions vs individual item actions (if that makes sense).


Great intro! What impresses me is how basecamp remains an incubator for code concepts thereby battle testing it before releasing to the wild. While programming is a joy for many of us, it is also how we make a living. I appreciated some of DHH's comments about stimulus and I truly appreciate their pragmatic views. I also am impressed how they rethink conventions like using DOM for state, managing a monolith, and supporting the progressive web development. This looks to make a nice addition to the toolset.

Have a link to those comments by DHH about stimulus? Would love to hear his thinking.

Thanks!

Also check out this ruby rogues podcast with DHH: https://devchat.tv/ruby-rog...


Thanks for the interesting video. For a project of mine I used AngularJS (the original 1.x branch) in a similar way basecamp now proposes to use StimulusJS. What I liked about AngularJS in this context was the ability to offer form validation and to go as deep as I want it to go on demand. Right now what I would love to see in further stimulus releases would be something to handle form validation out of the box and some other convenience things every app needs.

I get the feeling that Basecamp won't build out those kinds of features and will keep this generic, but it is the perfect opportunity to build a library on top of stimulus to make validations easy I would imagine.



You had my curiosity, now you have my attention :)


I'm very excited about Stimulus and can't wait to see where it goes!


Interesting Video! Chris - I am curious to know how Stimulus support external resources. For instance, Datatables, google charts ...


How would you structure your JS controllers? would every page have its own JS controllers?

Thanks! Love your videos!

Basically just one controller per feature. You should never do page specific JS or CSS because that means you can't move your features to different pages on your site later on which inevitably always happens.

But couldn't we put our JS code in a utilities folder and import from there? But I guess that means we are separating it by feature anyway. :D

Yes, you can definitely do that. Maybe I'd do that for different things like "admin" area components and so on.


For newbies the application.js has changed so visit the official site: https://stimulusjs.org/hand...


Looks like if you've loaded version >=1 of Stimulus, there are a few changes in the installation. (See handbook at https://stimulusjs.org/hand...

Setup in application.js should look like:

import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"

const application = Application.start()
const context = require.context("./controllers", true, /\.js$/)
application.load(definitionsFromContext(context))

import { Application } from  'stimulus'
import { definitionsFromContext } from 'stimulus/webpack-helpers'

const application = Application.start()
const controllers = require.context('./controllers', true, /\.js$/)

application.load(definitionsFromContext(controllers))
Any more episodes coming on Stimulus?

Hey Chris, FYI you have a spelling error in your code. 
  • Applicatoin instead of Application
  • stumulus instead of stimulus.
  • constrollers instead of controllers
  • $ needed in .js regex

import { Applicatoin } from 'stimulus'
import { autoload } from 'stumulus/webpack-helpers'

const application = Application.start()
const contsrollers = require.context("./controllers", true, /\.js$/ )

Even after I did this I had an error `TypeError: Object(...) is not a function`. I reviewed the stimulus installation guide and changed to:

import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"

const application = Application.start()
const context = require.context("./controllers", true, /\.js$/)
application.load(definitionsFromContext(context))

It looks like it should do the same thing. Funnily enough I tried 

import { Application } from "stimulus"
import { autoload } from "stimulus/webpack-helpers"

const application = Application.start()
const controllers = require.context("./controllers", true, /\.js$/)
application.load(autoload(controllers))

And it had the same error (all I did was rename 'context' to 'controllers' and 'definitionsFromContext' to 'autoload'

Maybe the name 'controllers' has become reserved?

Awesome video Chris! started using Stimulus in a work project and it's a very nice way to keep the JS organized and reusable. Thanks!


always appreciate the little humor, calling the app "stimulating" Lol


Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 24,647+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.