I tried to build an SPA without a shiny client side framework, I wanted to build something fast with good user experience and keeping it as simple as possible.
jQuery to the rescue, I had a list of those buttons, so I needed to identify each one, so I added a data-id attr and used it to identify which input I need to update it looked like this:
As You can see I added a bit of client side validation to make sure counter does not go below 0 and above 20.
Now All left to do is to initialize the
NumberComponent when the page loads, so I added it to my packs (I’m using webpacker) and wrote:
And it works!.
but it’s already a bit of a mess, I need to search for the relevant buttons, I don’t know how it’ll behave when content of page changes (turbolinks, other dynamic behavior etc.) I though to myslef, “it would be much easier to annotate the relevant html items to describe their behavior”. But I did not want to make the client super complex, I just want something that’ll help me to model my code without all the hassle.
The concepts are pretty simple and familiar, you got:
- Controller - to group a bunch of html elements in one context (numberController)
- Target - to allow access dom element inside the controller (instead of jQuery selector) (input)
- Action - to respond to dom element event and act (button click)
That’s all, simple huh?
This is how it looks
I didn’t write less code but,
- The code is more readable
- No need to initialize the controller, Stimulus take care of that.
- You get access to the actual html element, which keeps everything straightforward.
- No need to worry about dom changes, Stimulus take care of that.
I know that everyone thinks react angular and vue is the s*** but I think its good for large organizations where you have a separate front-end team and back-end team. When you build something new by yourself or with some friends, there is no good reason to start with client side rendering (unless you got a few million users on day one which is less likely)
There are also small companies with a team of full stackers, who might also consider this approach.
If you got a bit stimulated, you can read a small guide here