As I have mentioned previously, I've been digging into Ruby on Rails recently, and it's been an absolute blast!
As a long-time Angular developer, one of the super powers of the framework is the directive. It's the best. It is missed immediately when I'm working in a framework that doesn't have it.
As I've been playing with Hotwire and Stimulus, something dawned on me. Stimulus controllers are the vanilla JS directives I've been missing.
my_stimulus_controller.js
import { Controller } from '@hotwired/stimulus';
export default class extends Controller {
static targets = ["thing-i-want-a-reference-to"];
static values = {input: String};
connect(){
console.log(this.thingIWantAReferenceToTarget); // DOM access
console.log(this.inputValue); // passed in from the DOM
}
doThing(){
console.log("Doing a thing");
}
}
index.html.erb
<div data-controller="my-stimulus"
data-my-stimulus-value="input value"
>
<div data-my-stimulus-target="thing-i-want-a-reference-to">
<button data-action="click->my-stimulus#doThing">Click Me</button>
</div>
</div>
Just like everything else in Rails, it is *HEAVY* on the convention. Everything is magically wired up based on naming. If you embrace the strong conventions, instead of fighting it, it all works together really nicely. The beauty of the convention though, is that just like directives, you just sprinkle some attributes in your HTML, and you now give them superpowers.
The ability to decompose functionality into small, reusable, isolated chunks is so powerful, that I don't even feel myself missing the warmth and safety of my beloved TypeScript. Things feel tight and manageable enough, that dare I say it, I'm fine without type safety. The attaching of Stimulus controllers by HTML attribute feels right at home with the ergonomics I loved about Angular directives. I think its an underrated feature of Angular, and having a spiritual cousin to it available in my Rails adventures is super exciting.