The problem with Alpine.js

I’m pretty dang pumped about Alpine, but it’s not perfect.

There are a few key problems.

One is short hands. I don’t remember what : and @ mean. Let’s just use x-on and x-bind for consistency sake. Sure it’s verbose, but good God will it make Alpine easier for beginners to understand. It will also lead to substantially less bike shedding.

The problem is that Alpine behaves very differently depending on if x-data is defined as an inline object, vs if it’s defined in a script tag, vs if it’s defined in an external script. This is a massive violation of the principle of least astonishment.

External scripts are ideal because you get syntax checking and potentially even type checking. But you lose access to all of Alpine’s “magic” variables. While magic variables are convenient and Vue/Laravel like, they raise the overhead of understanding the code. There should be a way that reliably works regardless of what context you’re in. There are some hacks, but they’re bad.

The fact that x-ref doesn’t evaluate is astonishing. The fact that x-effect only accepts expressions is astonishing.

React is popular because the data flow is obvious and you’re working low level. I hope that Alpine takes a similar path in the future.

Leave a comment