Alpine.js Magic Helpers Library | Hacker News Reader

Alpine.js Magic Helpers Library

github.com

105 pointskbatdorf17 comments

Alpine.js is one of those ideas that filled a massive void many people didn't even know existed (I certainly didn't, though was subconsciously annoyed with the options). Data-centric, declarative template rendering was married to SPA frameworks, which are very good at what they do but are often overkill. Alpine cut development time in half for one of my projects and I'm looking forward to reaching for it again.

From what I can see, Alpine is an SPA framework.

How so? It's designed to be used for widgets/progressive enhancement of server/statically rendered sites.

Could you say a little more about the sort of project you’d use Alpine on? “filled a massive void many people didn't even know existed” is certainly intriguing!

Sure! Basically we had a thorny problem that needed to be solved on the frontend- users would be picking a plan, adding a payment, and possibly applying a promo code. JS is a prerequisite for Stripe payment collection and in general this solution would have been a non-starter in a backend template. But this was the only such page in the application, so it really felt like overkill to integrate an SPA like Vue or React. Vue's drop-in CDN is close, but there's still some setup boilerplate that was nice to do without.

I’ve been using it for projects where a non-JS backend mostly handles templates, but I still want modern JS framework-like interactivity. A nice thing compared to Vue and React is that Alpine takes its template from your HTML, not your JS, so all your JS needs to have is the controller data logic, and the actual template stuff can be with your non-JS template code.

Clearly you have never used Vue, because it works in the exact same way.

Alpine looks like Vue without computed properties.

I have used Vue. In Vue, the templates are compiled and included if you use SFC, which is the preferred method. If you don’t use SFC, you have to ship the Vue compiler to your clients and that is not small. It’s a tradeoff.

Alpine doesn’t have a VDOM, so there’s no compiler and no equivalent of SFCs.

AFAIK, Vue filled that void before alpine. and alpine is micro Vue to be used when your needs are so small, that vue becomes an overkill.

is there any other advantage of alipne over vue, aside from file size?

Zero build tooling is necessary with Alpine.js, just import it through a script tag, ES module script import, etc. and you're done. No webpack setup, no bundling--nothing. Vue can be used like that too but from what I understand there are some tradeoffs (and it should be noted the modern wave of near zero config build tools like vite, snowpack, etc. easily bundle and build components like vue automatically too).

I think from a usage perspective Alpine.js puts you more into a progressive enhancement mindset and focus too. With vue if you want to make something that's mostly static but with some dynamic flourishes you need to go deep down a rabbit hole of SSR, static site gens, Gridsome, etc. etc. and it can really make your head spin. With Alpine.js just write HTML and CSS, then add a bit of interactivity where it's needed--you can be done with an entire project in the time it takes to understand and setup an isomorphic SPA.

> With vue if you want to make something that's mostly static but with some dynamic flourishes you need to go deep down a rabbit hole of SSR, static site gens, Gridsome, etc. etc. and it can really make your head spin

wait, what? that is not true. if you want a sprinkle of interactivity, you include vue with script tag and write small components over your html & css, jsut like you do with alpine

alpine actually takes the inspiration from vue in terms of this. but is optimised for small file size.

You don't get server-side rendering with a simple vue component though. I.e. when Google's crawler hits your site it just sees a blank html page with a div and nothing more, and your SEO is zero. For a content-heavy site like a blog this is a death sentence of discoverability, and it's why I mentioned you have to go down a deep rabbit hole of extra tech like SSR, static site gens like Gridsome, etc. to resolve it (all with a new set of tradeoffs to consider).

In contrast with alpine, you'd write all your content as plain HTML. Google's crawler sees it and indexes it like any other static content site. Then alpine sprinkles in a bit of interactivity on top for your users. Getting the same behavior with vue (static content with dynamic stuff attached to the DOM later) is non-trivial.

Vue Can be used in the same way as Alpine, but it's very tempting to start using the CLI, single file components etc.

Alpine doesn't have any of those (eg. the devtools for it are a community project).

Loving the PETAL stack.

Phoenix

Elixir

TailwindCSS

AlpineJS

LiveView

I have been using THANG stack: Tailwind, Hugo, Alpine, Netlify, Go.

This is really cool. I absolutely love Alpine, and a lot of these look like they could come in quite handy.

TIL (by reading the source code) that you can add your own $functions to Alpine as well! I will definitely be making use of that functionality at some point.

That + `deferLoadingAlpine`, undocumented APIs so watch out .

There's a template repo/file you can use in that org https://www.github.com/alpine-collective/plugin/tree/master/....

Reply on news.ycombinator.com