5 ms·

AlpineJS Guides and Examples

63 points by stanislavb 6y ago

capableweb 6y ago
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&mem=256&graphic=1 https://bellard.org/jslinux/vm.html?url=alpine-x86-xwin.cfg&...
- stanislavb 6y ago
  Yup, the name is a bit confusing.
  - deleted 6y ago
    [deleted]
shubhamjain 6y ago
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.
- pibefision 6y ago
  I would like to recommend Kutty as a component framework that is using Tailwind + AlpineJS. (https://kutty.netlify.app/ https://kutty.netlify.app/) Any other similar recommendation?
  - tbran 6y ago
    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/ https://htmx.org/ [2]: https://news.ycombinator.com/item?id=23196095 https://news.ycombinator.com/item?id=23196095
    - praveenjuge 6y ago
      lol well time for a name change, but I don't know what to change it to
3stripe 6y ago
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/ https://tachyons.io/ for CSS (powered by Craft CMS) on almost all our projects now.
aosaigh 6y ago
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?
- simplify 6y ago
  Maybe custom elements would help? https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements 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 https://github.com/ryangjchandler/spruce
sebastianconcpt 6y ago
How would it be if compared to Svelte?
- _heimdall 6y ago
  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
  - sebastianconcpt 6y ago
    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
tyingq 6y ago
"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.
jgalt212 6y ago
> 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.

63 points by stanislavb 6y ago

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&mem=256&graphic=1 https://bellard.org/jslinux/vm.html?url=alpine-x86-xwin.cfg&...

stanislavb 6y ago
Yup, the name is a bit confusing.
- deleted 6y ago
  [deleted]

shubhamjain 6y ago

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.

pibefision 6y ago
I would like to recommend Kutty as a component framework that is using Tailwind + AlpineJS. (https://kutty.netlify.app/ https://kutty.netlify.app/) Any other similar recommendation?
- tbran 6y ago
  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/ https://htmx.org/ [2]: https://news.ycombinator.com/item?id=23196095 https://news.ycombinator.com/item?id=23196095
  - praveenjuge 6y ago
    lol well time for a name change, but I don't know what to change it to

3stripe 6y ago

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/ https://tachyons.io/ for CSS (powered by Craft CMS) on almost all our projects now.

aosaigh 6y ago

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?

simplify 6y ago
Maybe custom elements would help? https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements 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 https://github.com/ryangjchandler/spruce

sebastianconcpt 6y ago

How would it be if compared to Svelte?

_heimdall 6y ago
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
- sebastianconcpt 6y ago
  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

tyingq 6y ago

"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.

jgalt212 6y ago

> 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.