AlpineJS

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.

After hesitating with Tailwind I did come around to loving it, but I've had a much harder time getting over my initial impressions of Alpine. I recognize that one, it targets a very specific type of website, and two, it's easy to let subjective feelings about what makes for readable & maintainable code get in the way of an unbiased take on the framework. But writing JavaScript in strings is unappealing to me, even for server-side sites that just need some sprinkling.

Some questions that come to mind that would sway me one way or another:

- How is the tooling and debugging experience?

- Do you get intellisense with the VSCode extension within x-for, x-show, etc. expressions?

- Can you easily set breakpoints in devtools and step through your code?

- In reference to the issue below, how susceptible would I be to XSS attacks in using this framework?

https://github.com/alpinejs/alpine/issues/237#issue-57653341...

Similar to https://htmx.org/

The JS ecosystem always want to start simple tools, but they forget that every simple tool has become complex so reinvent the wheel again.

You see that programs written in C (Simple language) tend to be more complex than one written in C++

This looks like an awesome candidate for being the perfect balance on a project that's too small for Vue or React, but too big to want to write all the logic by hand.

i like-ish the idea of Alpine, maybe, if it sticks around for the next 10 years and adds the functionality it's missing -- functionality that exists in jQuery and Vue today.

which means i'd be likely to use jquery or vue if i had to choose a tool today for a project i needed to be around in a couple/few years.

but that might be a bit too harsh -- if it's so simple then i'd be able to hack on it relatively easily without worrying about which version it was at 5 years from now, or if it really exists at all in any sense -- because i would be able to master all its use cases (so i would not need any support/help), or swap in a new tool.

i would say that the answer to the question, 'Why should I use Alpine instead of Vue?' should be something other than, 'The non-VDOM, bro!'

i'm sure that's important to some people -- just not me.

if you said it's actually truly really much simpler than Vue, then that might be cool.

if you said it's much simpler than vue and does a lot less than vue, that might be ok, too -- just tell me what less it does so i know whether to waste my time or not.

if it's like jquery, minus a ton of features, but with new/better syntax, that could be interesting.

i support it. let's see where it goes.

i've never been crazy about the weird 'open' binding/variable/whatever examples/uses -- in alpine/vue/anything.

i'm always thinking, is that a variable, or an html attribute, or a standard naming convention of this particular framework, or maybe it's a css property, or a bound tool variable that is named the same as a css property or value, or....

In a few year we are back at jQuery.

This looks a lot like Vue. Is there a comparison somewhere maybe?

Just learn and use web components instead

I am tempted to see how far I can get with an IBM carbon design component set using this.