[BareNakedCoder]

Let me take a stab at explaining how AlpineJS is different. First, let me talk about the two "modes" of front-end frameworks, what I'll call: "FPC" and "Sprinkled":

FPC or Full Page Components: the original HTML source (as seen from "view page source", not "inspect") usually contains a tag like `<div id="app"></div>` which simply serves as the place where the FPC-oriented framework inserts its magic. All the magic happens in the JS (possibly generated by compiling from something else like JSX or a component DSL). Note that a FPC is not necessarily a SPA; you could have multiple pages with one FPC each.

Sprinkled: the original HTML source has the framework's tags, attributes, and/or other markup sprinkled throughout it. The framework will search for these sprinklings in the original HTML and do as they direct. Usually the framework only looks within an encapsulating tag so the original HTML might have something like `<div id="app">...more HTML with sprinklies...</div>`.

React and Svelte are FPC frameworks. All the exciting stuff is in the code: JS, JSX, or a JS-like component DSL.

VueJS can be used in multiple modes. It can be used in pure FPC mode. It can be used in hybrid mode: with both components and sprinklies in the original HTML, including sprinklies between a component's start and end tag. And it can (almost) be used in pure sprinkled-mode. I say "almost" because you do need some JS code to define the mount point and the data. (VueJS also has two sub-modes for components: compiled client-side and pre-compiled during the build. The later requires a more complex build step).

AlpineJS is (mostly) for pure sprinkled-mode. It is easy to write non-trivial function with no JS at all, other than loading AlpineJS itself from a CDN. On page load, AlpineJS will automatically do the needful; no bootstrapping JS is required. When re-use and/or complexity requires it, you can move some or much of the code from HTML to your JS. For even more complex stuff, the new plugin ability in V3 of AlpineJS makes adding your own directives/attributes or magic variables/functions easy. This extra ability in V3 just means although you can do 80% with no or very little JS, you still have room to grow for the other 18-20%.

AlpineJS is great for and focuses on the needs of simpler apps. And most of the apps we develop should ... be ... SIMPLE.

[gervwyk]

Excellent comment and breakdown! 100% agree most apps should be simple, if you think / design on a “page” level, most apps actually are simple.

SPA easily confuse designers and often users, but both SPA and multi-page apps (MPA) has its place..

[leotaku]

I can see how Alpine makes some extremely simple things simpler than React, but it also really seems to restrict me in how I can refactor my website or app. With React I can keep things almost as simple as with Alpine, or move to more integrated solutions (e.g. SSR with hydration) without rewriting much of my existing code. Alpine basically has me stuck with only client side rendering without a lot of optimizations.

The only downside I see is that, unlike with Alpine, a build step is mandatory. However, I assume that any real production Alpine app will also want to include a build step, if only to decrease bundle size. It's such a low-hanging fruit and improves the experience for basically any user.

I get why Alpine is interesting from an idealistic view of avoiding complexity, but React+JSX just seems much more pragmatic to me.

[Scarbutt]

FPC doesn't sound right since you can have a react component for just a single part of a page, it doesn't necessarily need to take control of the whole page.

[BareNakedCoder]

Yes of course the components are usually not the entire page; don't take the terms too literally. I'm still searching for the best name for these modes ("sprinkled" isn't quite right either). Although "full body component" or "big section component" might be a little better, I suggestion not missing the underlying idea or point due to imperfect terms.

[mands]

Very true, and is a highly useful tool to add interactive content to a section of an MPA - React used in this way, without requiring a state library and everything else is actually quite nice to work with.