Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Alpine.js Magic Helpers Library

github.com

Post reply on HN
Print view View original

11–19 of 19 posts

Re: Alpine.js Magic Helpers Library

#11

Post by earthboundkid »

danvk wrote: post #6
jackconsidine wrote: post #4

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.

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!

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.

Re: Alpine.js Magic Helpers Library

#13

Post by rk06 »

qbasic_forever wrote: post #9
rk06 wrote: post #8

Earlier quoted context omitted.

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 th…

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

Re: Alpine.js Magic Helpers Library

#14

Post by HugoDF »

nicoburns wrote: post #5
jackconsidine wrote: post #4

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.

Re: Alpine.js Magic Helpers Library

#15

Post by HugoDF »

rk06 wrote: post #8
jackconsidine wrote: post #4

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.

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?

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

Re: Alpine.js Magic Helpers Library

#16

Post by HugoDF »

grardb wrote: post #2

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

Re: Alpine.js Magic Helpers Library

#17

Post by ficklepickle »

earthboundkid wrote: post #11
danvk wrote: post #6

Earlier quoted context omitted.

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!

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.

Re: Alpine.js Magic Helpers Library

#18

Post by earthboundkid »

ficklepickle wrote: post #17
earthboundkid wrote: post #11

Earlier quoted context omitted.

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.

Re: Alpine.js Magic Helpers Library

#19

Post by qbasic_forever »

rk06 wrote: post #13
qbasic_forever wrote: post #9

Earlier quoted context omitted.

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 th…

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

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.

Post reply on HN