Stimulus: A modest JavaScript framework for the HTML you already have

[zdragnar]

I don't mean to knock the effort they've put in here, but this looks like all of the hand-rolled "frameworks" I saw my friends in the agency / consulting space made when they said angular 1 was "too heavy"... right down to the 'data-controller' attribute binding that everyone seemed to independently come up with.

Is there anything actually novel here? These types of things always seemed to run into composition issues (controllers inside of controllers) in terms of communication and what not. The net result was invariably far less appealing than, say, angular 1 or vue or non-SPA React.

[jurre]

Isn't the fact that you've seen a bunch of people already hand-roll this a good indication that there's a need for something like this, so no-one else needs to hand-roll it anymore?

It doesn't need to be novel right? It just needs to be helpful.

[sli]

Honestly I don't know why I'd want Stimulus over regular old web components if I wasn't going to use a whole library like React. It doesn't look like it adds much beyond what web components already give you.

[hinkley]

data- comes out of HTML5 but jQuery was one of the first libraries to touch it.

It’s likely a significant fraction of people who jumped to the same solutions had some prior exposure to jquery.

[zaarn]

With 30KB in size, this framework might be something I can integrate into my websites to get a nice look-and-feel while preserving usability when script blockers are active.

Personally, when I work on projects I tend to develop a pure HTML+CSS solution first and then bolt on JS if needed, so this kind of stuff might make me more comfortable with writing proper webapps since it's still just basically "bolt JS on HTML".

[SaturateDK]

30KB? That's a lot, this is not minified and Gzip'ed is it?

[scottharveyco]

Previous discussion: https://news.ycombinator.com/item?id=16052105

I've been using Stimulus + Turoblinks for my current side project and I love it. Nice and simple way to add a bit of interactivity to existing HTML on your page.

[franciscop]

*Turbolinks, copy/pasted that for Google and didn't find anything relevant.

Edit: thanks, I found it, I was just pointing out to the typo so other people don't get confused.

[victor106]

Is there anyway to use turbolinks with a java backend? Or is it only specific to rails?

[pjmlp]

As a VanilaJS advocate, I love it.

The manual even describes how to use just a plain <script> inclusion, instead of the build tool of the day.

[eropple]

But...tons of the nontrivial JavaScript projects I use describes a plain <script> inclusion. So I don't quite understand the plaudit here.

Doing so is not a great idea, because build tools solve real and extant problems, but they're very common.

[keybits]

This has a lot of similarities to intercooler.js http://intercoolerjs.org/ which I really enjoy when I don't need a full SPA type experience.

Can anyone with experience of Stimulus suggest why I'd pick it over intercooler?

[uranusjr]

I’m not very informed about intercooler, but from the examples it seems to focus on AJAX requests. Stimulus is more about DOM manipulation, things you would’ve used jQuery for (except $.ajax and related). Toggle classes to show/hide things, move things around (mostly also just by toggling classes these days), create/duplicate elements, stuff like that. Stimulus also does some AJAX, but I can easily imagine these two work together in one page for different elements.

[andrei_says_]

If you already use the rails ecosystem and the mental models associated with it, this is a library which will likely feel intuitive to you and fit neatly with the rest.

The ability to think effortlessly about code has value.

[chuckdries]

I like it a lot, but I'm always afraid that I'll end up running into limitations of the framework if whatever I'm doing happens to grow in scope in a way I hadn't planned for. I tend to be bad at planning ahead for side projects, but who can blame me, they're side projects.

Anyway, just stopping by to say that Vue has struck a good balance for me. Peppering in {{template values}} in existing HTML works really well, and when things start to get more complex I can easily break my dom out into components.

[FrederikET]

Have it exactly the same way, and especially the vue components are nice to have. It seems like Stimulus would be a good fit for small applications, but as soon it becomes a medium size project it would be to complex to maintain.

[J-H]

I love Vue as well. The problem is that I haven’t found a good way to fit Vue in with an existing Rails app without it resorting to JavaScript hell. Stimulus looks interesting because it already fits in with Turbolinks.

[meganibla]

This is good at first look. Because it seems to be straightforward and carefully design. I like the aesthetic and choice of using data attributes being part of the HTML standard as directives to apply the framework.

One criticism I have relates to The syntax for denoting action methods. Did you agonize over the choice of syntax uses hash and implication? E.g.

    click->hello#greet

All the same this careful choice shows the effort you put into the framework . I’m just not sure this particular choice is to my taste nor works with regard to being consistent with the rest of the syntactic choices you have made.

Interested to hear thoughts of others in a discussion about this.

[aparadja]

I think the ”hello#greet” part is there to be consistent with Rails route mapping.

As a standalone syntax choice, it makes little sense. But for a RoR developer, it’s obvious.

[austincheney]

> export default class extends Controller {

I know it is vanilla ES6, but at some point it starts looking more like Java than JavaScript. The boilerplate necessary to convey a simple instruction is directly proportional to the averaged speed of everything else (authorship, maintenance, execution, testing, frequency of reuse, and so forth).

[berfarah]

Do you mind expanding on what you mean? When I look at the instructions here, they seem pretty concise.

`export` -> exports the thing

`default` -> if you require from this module, this is the default

`class` -> class definition

`extends` -> speaks for itself

`Controller` class it's extending.

You could maybe rework it so you don't export it on the same line:

```

class Foo extends Controller {}

export default Foo

```

The parallel I see here to Java is the object orientation - which is a fair criticism. There are probably ways to execute on this using other mechanisms other than inheritance. But then, sub-classing to me still feels better than assigning the prototype via direct assignment.

[oelmekki]

I've never written any java code, but I really love the module systems inspired by it. I've been using this kind of packaging in both javascript and golang, and it actually feels way simpler than in ruby where I'll always end up with `Namespace1::Namespace2::Namespace3::klass` to deal with the global scope of everything.

[dawnerd]

We wrote a pretty similar (like similar enough its kinda creepy) library[1] a while back and it's really helped speed up our front end dev. I LOVE having params set in data attributes. Makes re-usable modules, like a modal[2] or autocomplete [3], way easier to implement.

[1] https://github.com/firstandthird/domodule [2] https://github.com/firstandthird/simple-domodal [3] https://github.com/firstandthird/complete

[SaturateDK]

I did two other frameworks that are super similar, hooked up with dynamic loading of the code with webpack, and the older one RequireJS.

It's a super awesome pattern, that makes things super simple and it's super lightweight as well.

[pankajdoharey]

First of all this isnt just another JS framework, The Framework is designed to work better with Rails, it is crafty in terms of how the DSL is designed. DHH is definitely the master of Designing DSL's, look at Rails and Activerecord. This too is excellent DSL design. So no its not for JS People, JS has react and what not. This is mostly geared towards Rails people.

[tiuPapa]

What's the advantage or disadvantage of using this when compared to something that works with Web Components like Polymer or stencil?

[ZenoArrow]

I agree with you that this is a worthwhile comparison to make, but would also point out that you could compare Web Components to any JS framework. When Web Components reach maturity (i.e. when support is baked into browsers and you don't have to fall back on using libraries like Polymer), they'll hopefully signal the end of JS frameworks as we know them, as it'll be easy to mix and match components from multiple sources. Until that time comes, I welcome JS frameworks like Stimulus that can (supposedly) be easily retrofitted onto existing websites, even if I'd prefer to see more activity around Web Components.

[diasp]

Works great, using it in my new notes app: https://github.com/notein/notein

[machiaweliczny]

I doubt it's any better than vuejs or preact.

[dsego]

Feels like backbone without the baggage.

[taherchhabra]

one more frontend library !

[jorisbrauns]

Yet another js lib.. no thanks. There are plenty enough alternatives