Learn Stimulus in Ruby on Rails by Building a Toggle) | Hacker News Reader

Learn Stimulus in Ruby on Rails by Building a Toggle)

railsnotes.xyz

27 pointshbroadbent10 comments

Hey HN!

For those new to Rails, Stimulus (https://stimulus.hotwired.dev/) is a way to sprinkle frontend javascript code into your Rails views.

I held off using Stimulus in my Rails apps for a long time because I didn't understand it — the data= attributes looked weird, and the connection between my Rails views and Stimulus javascript controllers was confusing.

So I decided to write the guide I wish I had when I was learning Stimulus.

Hope you enjoy it! I'm happy to answer any questions, feel free to ask any.

Thanks, Harrison

Great write-up!

I appreciate that you went the extra mile by showing how a generic enough controller can be used for various use cases.

People coming a from traditional JS background tend to make very specific Stimulus controllers, but when you make them a bit more abstract and modular they become more usable and easier to maintain.

Thank you! I agree - I've seen other articles creating very specific controllers, which gets you into the issue of having heaps of specific controllers which could just be 1.

Glad you found the article useful!

It's not weird. It's just a different way of triggering javascript without using much javascript. Just use jQuery or pure javascript and stop having to learn new, not necessarily better, ways to do the same thing. Which is the main problem with Rails. They hide so much from the developer. Even hide the table id in the schema. It's as if a developer can't handle a extra line or something.

> Even hide the table id in the schema. It's as if a developer can't handle a extra line or something.

That's because they can't handle it. I've seen a number of systems with 200-300+ tables that grew over 10+ years with 20+ developers working on it. This wasn't a Rails app btw, it's using a framework with much less opinions in a different language where an ORM wasn't being used.

You end up with `id` in some tables or `tablename_id` such as `post_id` as the primary key. It makes interacting with the app feel like a surprise depending on what section of the code base you're working on.

I love stimulus. And Hotwire. I find everything more maintainable and faster to developer when rails on the centre of the universe. Obviously a personal preference.

I faced a similar display toggle-able use case for form fields recently.

I did find that I used stimulus to hide the fields there was a slightly “flicker” as they appeared and then were hidden in the connect() function.

It didn’t affect my use case, as I could default hide and then toggle them to appear with stimulus.

But in the event they should appear by default and then be hidden based on some logic within the stimulus controller, is there a better way to handle this?

I usually conditionally include the visibility toggle class from the erb side, so the first time it renders as html it has the toggle correctly initiated. I can see situations where the visibility logic is hard or impossible from the Ruby side, but I haven’t had this issue yet.

Unfortunately I haven't come up with a good solution either beyond hiding the element with CSS, and then showing it when the controller connects (which isn't ideal). I'd love any suggestions though for different techniques

Thanks for the writeup. I had the opportunity to use StimulusJS at a recent opportunity and couldn't agree with it. I found several issues with the patterns it encourages, such as:

-magic variable transformed from props, lots of uncertainty between the HTML attributes I typed and the actual name of the JS variable -have to now define these magic variables in typescript -defining values and automatically converting strings / numbers magically seems hacky - why does it ask to separate CSS classes into it's own special attribute and magic variable?

I feel like I'm speaking crazy when I see anyone recommend Stimulus and from my experience I'd much rather just use web components without shadow DOM. Seriously, EVERYTHING Stimulus does web components do 10x better and cleaner. They both try to do the same thing but the Stimulus approach honestly came across as a high school final project taken too far.

If you think stimulus serves the same use case as web components, I think you haven’t used it enough or you just got it wrong.

Web components are more comparable to react, vue, svelte, etc. of course you can do anything stimulus do with web components, as you can also with react.

The point of stimulus, which is more comparable to Alpine, jQuery, knockout, etc is that you can just sprinkle behavior on existing server side rendered HTML. Web components and similar can’t do this as they have their own tenplating system, which mean no server side rendering without super complicated build tooling and architectures.

So, no, stimulus has nothing to do with web components. They’re complimentary to each other more than competitors.

Reply on news.ycombinator.com