We adopted stimulusjs a couple of years ago for adding some basic interactivity on our pages and it was a decent tool, but we quickly grew out of it once we started adding more complex (form based) front-end behavior involving lots of state changes. We're currently trying to migrate a significant amount of stimulus code over to react. Not knocking on stimulusjs, but just be wary that it does not grow well with increa…
Stimulus.js 2.0
81–90 of 140 posts
Re: Stimulus.js 2.0
#82Stimulus has a very small surface area, but I find it really enjoyable to use when combined with Turbolinks. My only complaint/comment is that some of the HTML that I need to generate ends up being littered with so many data attributes, especially when combining multiple Stimulus controllers/behaviors. Has anybody found a clean way around that in Rails templates?
I share some of the same issues, I have found that ERB templates work better than HAML for lots of data attributes. Basecamp seems to use liberal newlines / spacing when creating html tags (like one line per attribute) so that might help. Server-side "component partials" still don't have a great story, but view_component is one emerging option.
https://haml.info/docs/yardoc/file.REFERENCE.html#attribute-...
Re: Stimulus.js 2.0
#83I have great hopes that Stimulus 2.0 and Ruby 3.0 will put Rails back in the spotlight as the sane alternative to SPA abuse. Ruby and Rails have some really talented people on their teams and there's something special about the Ruby language which makes it such a fertile environment for innovation. Only Clojure compares in this respect.
Rails is dope. And it works really well with universal react rendering if you need that with react_on_rails.
Re: Stimulus.js 2.0
#84We adopted stimulusjs a couple of years ago for adding some basic interactivity on our pages and it was a decent tool, but we quickly grew out of it once we started adding more complex (form based) front-end behavior involving lots of state changes. We're currently trying to migrate a significant amount of stimulus code over to react. Not knocking on stimulusjs, but just be wary that it does not grow well with increa…
What UI behaviors necessitated you to move beyond stimulus? Could you provide an example?
One typical example is a component that collects (and displays) education history provided by the user. I'll list out just a few key UI behavior:
* A "read" view which represents a list of containers with titles that show each instance of a users answer (for example, if you provided 5 sets of answers, such as 5 universities you attended, we need to show those 5 in some sort of preview form on the page)
* A button that when clicked opens up a modal which contains multiple "steps" - each step is a small set of form inputs that range from simple ones like date to more complex ones involving search / autocomplete or file uploading.
* A button inside the modal that lets you navigate through the various steps / groups of form inputs.
* A "save" button inside the modal that persists your answers. This closes the modal and shows your set of answers as an instance in the list view (see the first bullet).
* In-line validation errors as the user is filling out each step of the modal
* Messages to notify the user that a modal needs to be opened and completed (Like if the user closed the modal before filling everything out, we want to let them know it's not fully completed).
Where some of the biggest complexity crop up:
* Form input data handling and general state management. As I mentioned, we can have upwards of maybe 20 controls in this component. At minimum, we need to write code to listen to input changes and make sure this new information is kept in sync with both internal component state and other parts of the UI. If you gave us a valid answer, we need to make sure to update the UI to show a checkmark (in the simple case). We also have controls that show or hide based on your answers to other form controls, so we'll need to handle inputs by potentially hiding or showing other inputs.
* Ok, so what if we need to write some UI updating code? Well, updating any part of the UI requires manual DOM manipulation. At minimum, this can be something simple like toggling visibility of an element by adding or removing a class. At worst, this involves appending html template strings (like if we need to show a list of errors on top of the modal) when the user attempts to save bad answers.
* Cross-component communication is difficult. Want to add a subcomponent? And it needs to communicate with the parent? For example, each step in our view is sort of a "sub form" and it needs to talk to the parent "modal" to keep global state - you'll need to roll some basic event handling code between the two.
* Testability. All these DOM changes - how do we test that our component is behaving? At the time we adopted stimulus, there wasn't a standard way of testing our stimulus controller so we've mostly leaned on (expensive) UI integration tests.
Some of this complexity is sort of inherent to forms - forms are complex UI components. There are hosts of libraries in other frameworks for dealing with form inputs alone (in order to cut down on the boilerplate you have to write). For example, formik in react helps cut down on a ton of boilerplate you have to write in order to wire the form control DOM state to react state.
Some of this complexity is also our own doing - we keep A LOT of state in the DOM. If a user blanks out an answer, we need to update the DOM with an additional form control whose value will get passed back to the backend to persist the change in the DB. Moving over to ReactJS won't help us here - this will require changes to our backend vs frontend API's.
However, having to handle the bulk of those DOM changes yourself requires a lot of code, is pretty error prone, and quite hard overall to maintain (as anyone who has rolled apps using vanilla javascript can attest to). StimulusJS doesn't offer many facilities for changing your UI in a declarative way.
Finally, cross-component communication is very common and while there is a number of ways to pass data back and form between stimulus controllers, there isn't really a nice way to do it outside of passing events. This is fine for simple cases, but error prone for our use cases. In reactjs, invoking callbacks that change parent state feels much more straightforward and has been easier to test.
Hope that helps
Re: Stimulus.js 2.0
#85Earlier quoted context omitted.
Ditto. I think if you are an experienced web app dev, understand the pros and cons of something like Stimulus, and set out from the beginning of your project to make PRODUCT decisions within the constraints of something like Stimulus and being more SSR. Then it is a great tool. Anything more complicated though, and you are better off with Vue, React, Etc
I am an experienced web dev and went into Stimulus excited to have something that seemed straightforward, but was disappointed. Vue has the flexibility to do SSR HTML with a bit of javascript for behavior way that works well for me. Just being able to put )">Save Instead of: some--long--path-to#save" data-id=" ">Save ... save(event) { event.preventDefault() In my HTML has been worth the switch for me.
* If I'm keeping it simple, it's barely different than pure HTML. * Free templating * If I need Javascript (which I likely will), it's extremely easy to add anything I need.
Re: Stimulus.js 2.0
#86Earlier quoted context omitted.
I am an experienced web dev and went into Stimulus excited to have something that seemed straightforward, but was disappointed. Vue has the flexibility to do SSR HTML with a bit of javascript for behavior way that works well for me. Just being able to put )">Save Instead of: some--long--path-to#save" data-id=" ">Save ... save(event) { event.preventDefault() In my HTML has been worth the switch for me.
I've personally hit the point where I feel like React is my go to for anything - especially with Gatsby. * If I'm keeping it simple, it's barely different than pure HTML. * Free templating * If I need Javascript (which I likely will), it's extremely easy to add anything I need.
However, I don't think React does "add some Javascript behavior to my Rails views (or backend framework equivalent)" very well (which is what I think Stimulus is trying to do). I mean you have solid support for React in the Rails ecosystem, but you turn your HTML-rendering responsibilities over to React Javascript functions.
Re: Stimulus.js 2.0
#87What's the difference between Pjax and Turbolinks? Just a generic version of the same thing? Could Stimulus [Reflex] be hacked to work with Django or does it have strong ties to Rails?
StimulusReflex is a Rails thing that's much more involved than Stimulus.
Re: Stimulus.js 2.0
#88Re: Stimulus.js 2.0
#89We adopted stimulusjs a couple of years ago for adding some basic interactivity on our pages and it was a decent tool, but we quickly grew out of it once we started adding more complex (form based) front-end behavior involving lots of state changes. We're currently trying to migrate a significant amount of stimulus code over to react. Not knocking on stimulusjs, but just be wary that it does not grow well with increa…
Re: Stimulus.js 2.0
#90Unpoly https://unpoly.com is also worth a look if you are interested in these things. It combines Turbolinks and Stimulus functionality in a very usable way.