3 ms·
I'm somewhat partial to Alpine, which sort of crams it into html. <div x-data="{ open: false }"> <button @click="open = true">Expand</button>
by roywiggins 1y ago
I'm somewhat partial to Alpine, which sort of crams it into html.
<div x-data="{ open: false }">
<button @click="open = true">Expand</button>
<span x-show="open">
Content...
</span>
</div>
- cluckindan 1y agox-anything is just painful like Angular. UI state is better off being non-declarative, otherwise the builtin behaviors become a limit and unmaintainable workarounds ensue. Nobody wants to express complex conditions all around the UI when derived state can be handled in a single store.
- roywiggins 1y agoYou can drive an entire Alpine app through a class, which works fine- the class handles all the behavior and the x- tags are mostly wiring up events to methods, and state to visible behavior. But it definitely doesn't take that big an app before you start to get a bit cramped. I think I'm fond of it because I've never grown to love html-in-js. Sometimes you definitely need that, but for apps that are simple enough that you don't, I find Alpine is just nice to use. No build steps at all, every editor knows how to color html, etc. It probably shouldn't become a web standard though.
- cluckindan 1y agoYou could get pretty far with a global event handler on the body tag, as most UI events bubble up. Write up an interface for registering sub-handlers from component js files and you get template-behaviour colocation, and any DOM subtree mutation no longer requires event rebinding.