<story><title>Alpine.js: A minimal framework for composing JavaScript behavior in your markup</title><url>https://github.com/alpinejs/alpine</url></story><parent_chain></parent_chain><comment><author>calebporzio</author><text>Hi, creator of Alpine here.&lt;p&gt;Alpine comes out of the server-rendered-app (Laravel&amp;#x2F;Rails&amp;#x2F;Django) and static site context. It&amp;#x27;s important to recognize that.&lt;p&gt;To me, Alpine fills a hole in between vanilla JS (or jQuery) and large v-dom frameworks like Vue&amp;#x2F;React.&lt;p&gt;I personally think the complexity&amp;#x2F;overhead of Vue&amp;#x2F;React&amp;#x2F;Etc. doesn&amp;#x27;t justify its value in a lot of cases for me. Often, I&amp;#x27;m adding simple interactions to server-rendered pages. Things like dropdowns, modals, dynamic inputs, other reactive doo-dads...&lt;p&gt;By using something like Alpine, I get to keep the data-driven reactivity and declarative template expressions of VueJs, but without all the overhead. (and without a virtual-dom)&lt;p&gt;I thought Stimulus would be the framework for me, but I personally felt I was doing too many manual DOM-manipulations and my code felt more imperative than I like.&lt;p&gt;In my opinion, Alpine is unique in these ways:&lt;p&gt;- You can use it without maintaining a separate JS file or &amp;lt;script&amp;gt; tag (although you can easily break code out into separate files and such if you need to)&lt;p&gt;- It doesn&amp;#x27;t use a virtual-dom at all and uses MutationObserver to react to DOM manipulations from outside JS (something like Turbolinks, third-party libs, or your own hand-written JS). This makes it very resilient. It won&amp;#x27;t crumble if you touch the real DOM.&lt;p&gt;- It&amp;#x27;s lightweight. It&amp;#x27;s under 5kb g-zipped.&lt;p&gt;- It has a really nice API for listening for and dispatching native browser Event&amp;#x2F;CustomEvents rather than using its own event system. This makes it a really powerful tool for interacting with third-party libs.&lt;p&gt;It&amp;#x27;s not a tool for everyone. It&amp;#x27;s not a Vue or React killer. (although it might be a Stimulus killer lol)&lt;p&gt;If it speaks to you, great. You and I are similar.&lt;p&gt;If not, understandable too. Different tools for different contexts.&lt;p&gt;Thanks everyone for chiming in!</text></comment>
<story><title>Alpine.js: A minimal framework for composing JavaScript behavior in your markup</title><url>https://github.com/alpinejs/alpine</url></story><parent_chain></parent_chain><comment><author>lf-non</author><text>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.&lt;p&gt;This approach can&amp;#x27;t leverage type systems for javascript (like TS, BS, flow etc.)&lt;p&gt;It is easy to end up with mistakes that don&amp;#x27;t surface as javascript errors and are swallowed completely.&lt;p&gt;You hit weird quirks when browser injects additional nodes (eg. tbody in tables) or restructures invalid markup (eg. div inside p).&lt;p&gt;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.&lt;p&gt;Also, in an ideal world this would help with handoff when working with web-designers who are familiar with only html&amp;#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.&lt;p&gt;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&amp;#x27;t age gracefully, I wouldn&amp;#x27;t recommend this approach to anyone.&lt;p&gt;If you can&amp;#x27;t (or don&amp;#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.&lt;p&gt;[1] &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;lit-element.polymer-project.org&amp;#x2F;&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;lit-element.polymer-project.org&amp;#x2F;&lt;/a&gt;&lt;p&gt;[2] &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;vuejs.org&amp;#x2F;&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;vuejs.org&amp;#x2F;&lt;/a&gt;&lt;p&gt;[3] &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;strudeljs.org&amp;#x2F;&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;strudeljs.org&amp;#x2F;&lt;/a&gt;&lt;p&gt;[4] &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;youtube&amp;#x2F;spfjs&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;youtube&amp;#x2F;spfjs&lt;/a&gt;</text></comment>