Alpine.js: A minimal framework for composing JavaScript behavior in your markup
Pretty much all mainstream frontend libraries have moved away from dom based templating (or augmenting dynamic behavior through attributes) for good reason. It simply becomes unmaintainable for anything more complex than basic interactivity.<p>This approach can&#x27;t leverage type systems for javascript (like TS, BS, flow etc.)<p>It is easy to end up with mistakes that don&#x27;t surface as javascript errors and are swallowed completely.<p>You hit weird quirks when browser injects additional nodes (eg. tbody in tables) or restructures invalid markup (eg. div inside p).<p>Ostensibly this approach would help with progressive enhancement, but too often careless usage results in flashes of broken UI which would then fix themselves when javascript kicks in. Then you need hacks to circumvent those with hacks like ng-cloak.<p>Also, in an ideal world this would help with handoff when working with web-designers who are familiar with only html&#x2F;css but that rarely happens in practice. Every time a web-designer rearranges things in the dom hierarchy the parent-child associations break and that again needs comprehensive testing.<p>Having worked with applications written using knockoutjs as well angular 1 (both of which used similar approaches) which organically grew over multiple years and (to put gently) didn&#x27;t age gracefully, I wouldn&#x27;t recommend this approach to anyone.<p>If you can&#x27;t (or don&#x27;t want to) go down the road of a full SPA but do want to build interactive applications with non-trivial amounts of javascript, lit-element [1], Vue [2], Strudel [3] and SPF [4] are much better solutions.<p>[1] <a href="https:&#x2F;&#x2F;lit-element.polymer-project.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;lit-element.polymer-project.org&#x2F;</a><p>[2] <a href="https:&#x2F;&#x2F;vuejs.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;vuejs.org&#x2F;</a><p>[3] <a href="https:&#x2F;&#x2F;strudeljs.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;strudeljs.org&#x2F;</a><p>[4] <a href="https:&#x2F;&#x2F;github.com&#x2F;youtube&#x2F;spfjs" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;youtube&#x2F;spfjs</a>