AlpineJS Guides and Examples | Hacker News Reader

AlpineJS Guides and Examples

alpinetoolbox.com

63 pointsstanislavb14 comments

I have been using AlpineJS for a while, and I absolutely love it. It's a minimal, very lightweight and forms the perfect bridge between jQuery and Vue.js. Nothing against jQuery, but DOM manipulation isn't ideal and it tends to get messy. I am not a fan of frameworks either unless I am sure I need to build a rich, dynamic app.

AlpineJs allows me to create those little dynamic stuff that website often needs: form validations, modals, filters, dynamic dropdowns, tooltips etc. This is much better option than hunting for libraries that to do simple stuff like that, or using jQuery.

AlpineJs + TailwindCSS is a highly recommended stack for anyone who wants to get things done fast.

I would like to recommend Kutty as a component framework that is using Tailwind + AlpineJS. (https://kutty.netlify.app/)

Any other similar recommendation?

Is this yours?

htmx [1] (by the guy who created intercooler.js) was renamed from "kutty" to "htmx" after this comment [2]:

> YSK that in Dutch the name kutty resembles the popular term for the female reproductive organs.

[1]: https://htmx.org/

[2]: https://news.ycombinator.com/item?id=23196095

lol well time for a name change, but I don't know what to change it to

At first I thought this was a JS port of Alpine Linux and got very excited! Then I remembered I already came across that before, so I shouldn't have gotten that excited... https://bellard.org/jslinux/vm.html?url=alpine-x86-xwin.cfg&...

Yup, the name is a bit confusing.

I've used it on a few sites and really liked its simplicity. It's Tailwind for JS.

That said, does AlpineJS offer any framework for extension? What I mean is the ability to build on it with custom JS to create custom small components on the page? I know that it's not necessarily intended to to this, but I find this is the gulf between "do it yourself" and "use Vue/React/..." that is hard to fill.

For example, with Tailwind I can use @apply to build my own class-based CSS components if I really need to. 90% of the time I shouldn't need to do this, but the reality is there's 10% of the time when Tailwind doesn't cover my use case.

Does Alpine have this?

Maybe custom elements would help? https://developer.mozilla.org/en-US/docs/Web/Web_Components/...

There's also spruce when you need to share data across components https://github.com/ryangjchandler/spruce

Another member of the AlpineJS fanclub here, no more jQuery, and no longer feel like I need to invest days and days learning Vue (which I never quite get round to).

We use Alpine + https://tachyons.io/ for CSS (powered by Craft CMS) on almost all our projects now.

> if you already know Vue, you basically know Alpine, making it perfect for Vue developers to turn to for projects where Vue is simply overkill

So funny to read this, as this value prop was the reason our team to chose Vue a few years back instead React/Angular.

"Alpine requires absolutely no build, you simply include the library and away you go, all features included."

Interesting. Maybe an easier path for those trying to get away from jQuery.

How would it be if compared to Svelte?

It doesn't require a build step at all, and really lends itself well to static sites. I have used Svelte for years and its still my go-to for web apps, but honestly 95% of the projects I take on are better dealt with as a largely static site than a PWA. We can thank react for how many basic content sites come along with JS runtimes running in the background.

I do like Alpine, but after having used it on a few projects it kind of sits in a dead zone for me. I first used it for a mobile menu toggle and a couple other small bits of interactivity, but realized I might as well just right that little bit of JS myself and inline it to save the roundtrip dependency. If I need more JS functionality like shared, client side state management I'll go back to Svelte

Very interesting. In the last year I've been doing backend but I see myself easily leaning to this too for fullstack needs. Thanks for the input

Reply on news.ycombinator.com