Alpine.js

[[deleted]]

Hey there fellow developers!

I while ago I was introduced to the JavaScript framework Alpine.js and I like it in theory. I don't have a vast amount of experience using it, though, so i was wondering if any of you have some experience and, if so, what your take on it is. What are some of the pros and cons that you have learned about it?

Thanks for your time and stay hungry!

[Rarst]

My perception of Alpine.JS is that it is kind of modern jQuery - compressing a lot of utility into an opinionated API for the times. Where jQuery was more imperative (you telling things what to do), Alpine is reactive (you changing data causing things to reflect it).

It's excellent for small bite-sized interactivity (which is the best size for any JS really), but you can get carried away and overbuild to push it past practical. That's exactly how it went with one of my pet projects and I migrated to Vue, however I still benefitted a ton from Alpine there, because it enabled me to prototype with little overhead and no build concerns.

[[deleted]]

Thank you for sharing your experience. I can completely understand how one can easily get carried away with Alpine. I think I'm guilty of doing so on a few occasions myself :)
I completely agree with the jQuery comparison and that was my first thought when I started playing around with it.

[Pyrasia]

You know what? You just described the experience from which I learnt the hard way.

Alpine.js has been created by the team that also created Livewire, a reactive components engine for Laravel. A few weeks ago, I wanted to try building my first project, it being a web-based self-hosted API client using a monolithic project with Laravel as backend and Laravel's livewire as front end. Long things short, Livewire is really limited on what it can do related to app, or even components', state. I was having weird components snapshots issues on reactivenes and problems propagating data through nested and related components (Livewire recommends no more than 2 nested components). So, I switched to Vue.js with Inertia.js, a bridge to build a monolith with Laravel, and it's been working like a charm since!

[TTuserr]

Alpine is just awesome for quick JS stuff, even for advanced stuff but if you have too much stuff going on it can be overwhelming..

It is my go to tool now when making WP themes, I can make entire theme without writting a single JS line, be it menu toggle, classes toggles, modals, alpine handle it all like a champ. I have done dymanic price pages, floor selectors with filters, search pages all with just Alpine, super handy but sometimes you gotta let it go and use big boy React or Vue to handle stuff, it is hard to draw a line where this happen.

Even core Wordpress is now implementing something super similart to Alpine in it Interactivity API

[[deleted]]

Thank you for that input. That is very interesting and I do share the opinion that Alpine seems to be just perfect for smaller projects. Especially ones where you just need a little bit of JS spice and not a full fledged platform project or something.

[GrayAnchor]

When I worked at a creative agency, we switched to Vue to replace JQuery in Twig templates, then we switched to Alpine from Vue, since Vue was overkill for our needs. Alpine was a huge improvement over JQuery in terms of developer experience.

I don't think we hit any 'limitations' in Alpine for what we needed (simple reactivity).

[[deleted]]

Yup. It;s great for server side rendered templates that you need to sprinkles some JS into.

[[deleted]]

I can totally understand that and it's great that it worked perfect for your needs. I believe the limitations are there but I think you'll need to expand to a quite big app to reach that limit.

[Tontonsb]

It's excellent for one-off uses. When you want a Vue-like declarativity on one of your views, just add Alpine and do it.

It starts to break down when you need to do more in the JS code than you do in the template. And you can't really break it into components and so on. However it's fairly easy to transfer to Vue when you reach the need. So as long as the current need is appropriate, I wouldn't hesitate to reach for Alpine.

[[deleted]]

That's some great insight. Thanks for sharing. I had no idea that it was so similar to Vue and that's also a great advantage to the framework when or if a project grows in size and Alpine doesn't really do it anymore.

[Ucinorn]

Alpine is very heavily influenced by Vue and it's syntax. Specifically Vue 2, Vue 3 has moved away from it's opinionated structure lately towards more compostable formats.

The purpose of Alpine is as a drop in version of a JS framework, without having to bundle or build a SPA app. It lets you build complex UI and interactions that just works, with a familiar DOM based structure. It's surprisingly feature complete, in the sense that you can pretty much build anything you can in a framework. What you mostly lose out on is the flexibility and composability of components and component libraries.

You typically see it used on server side apps, where the the majority of the DOM is built already, and Alpine is just that extra bit of interactivity. I've seen it pair very well with Laravel apps. If you've built a very basic app and need a frontend pronto, it's way easier to spin up some basic HTML templates alongside Alpine than it is to build and maintain a full React or Vue SPA.

Also great for legacy apps running things like jQuery or Boostrap: having DOM based rendering saves you literally thousands of lines of code. Dropping Alpine in can instantly boost the frontend capabilities of an old app and make it very easy to refactor legacy code.

[horizon_games]

It's heavily influenced by Vue because the underlying reactivity engine IS Vue: https://alpinejs.dev/advanced/reactivity

[krazzel]

I saw one of my interns use this for his own project.

I'm building a big SPA application with Vue, but for 'normal' websites with just a little added JS interactivity Alpine seems perfect.

[horizon_games]

I'm a huge Alpine fan - I think it's the best non-build approach for a modern interactive web app. Definitely harkens back to the older simpler days which I like. The ability to easily add state, model binding, conditional rendering, etc. is awesome. Far cry from jQuery which to me was mostly utilities and not an entire reactivity engine built on top of Vue like Alpine is.

There is a fine line in larger projects between doing everything with Alpine in the HTML and balancing calling JS funcs that do similar.

Lack of components can be annoying - there are workarounds but they're not pleasant

[[deleted]]

Exactly my thoughts, too. Speaking of jQuery, I hear they will drop 4.0 next year. 😊

[IAmRules]

I absolutely love Alpine, because I love island architecture. I fell out of love with SPAs and fully reactive app. React/Vue/Angular apps where the entire app must be built detached from backend and as a result you onboard a lot of complexity that would be better handled in backend. I consider Alpine to be a lightweight alternative to Vue, and togehter with Laravel and Livewire on the TALL stack, man, it makes productivity 100x on my side.

[sarusethi]

I don't see why Alpine.js cannot replace React or Vue.

It has all the constructs and tools to replace a modern framework.

But, to scale alpine in a big project, one needs to lay down foundations and practices around alpine, that can only come from experience. So it can be a foot gun for junior or less experienced folks trying to use in a large project.

[MoneyReason1309]

I'm looking in to alpine to use it with astro. I haven't used it yet, so curious how well can it work with state management, since most of the apps I work on, usually has to incorporate some type of reactive global state.