[rosszurowski]

I'm glad alternatives like Alpine exist for small sites that don't need many additional behaviours. But having used Alpine for a medium-sized art gallery website last year, I can't really recommend it for anything larger than a very simple site. The fact that all your code is scattered as strings everywhere without error checking or types makes it really hard to debug and work with long-term.

For lightweight front-end tooling, nothing has unseated the ease of Preact for me.

[neovive]

I've been using AlpineJS on various projects for about one year. The creator (Caleb) is actually a Laravel developer and maintains the Livewire meta framework.

I find the sweet spot for utility frameworks like AlpineJS is when used in conjunction with server-side components [1]. For example, when designing server-side Blade components, the more you can keep within the component itself (e.g. html, styles, interactivity), the easier it is to reason about and maintain the component going forward. If your x-data function becomes unwieldy, consider moving the code to a separate Javascript function that returns an object and calling that function from x-data.

Ultimately, using tools like Alpine or Tailwind is a tradeoff. My apps tends to be relatively small and only managed by myself or a small team. If you're building large, front-end heavy apps; React, Vue, Svelte, etc. are definitely a better fit.

[1] Laravel Blade Components: https://laravel.com/docs/9.x/blade#components)

[freedomben]

The use with Livewire is part of what makes it such an awesome tool to pair with Elixir LiveView. I mainly just need enough js to do client-side things (like closing/opening menus) and it's perfect for that.

[j45]

Livewire itself is worthy of attention.

[sodapopcan]

I don’t know much about your project but these tools are really meant to be used in conjunction with “html over the wire” frameworks. IE, your JS has zero business or app logic and is just taking care of small UI concerns like transitions and showing modals. They scale just fine in these situations.

[tjrDL6MjB2Zwwa]

exactly this, and honestly, I feel like we need to get back to this model as an industry.

There are times when full-blown SPA is superior, but not nearly as often as people currently think. And the toolchains get vastly simpler when you're not doing SPA too.

[quantiq]

Exactly. I used alpine in combination with django for a project and it quickly became a nightmare to maintain when alpine started to take care of app logic / SPA-type reactivity.

Alpine is just not designed with that sort of application in mind, nor should it be.

[flanbiscuit]

+1 for Preact. And its overall bundle size is smaller. I'd also recommend Svelte as well.

38.2kB Minified, 13.5kB Minified + Gzipped, https://bundlephobia.com/package/alpinejs@3.10.5

10.4kB Minified, 4kB Minified + Gzipped, https://bundlephobia.com/package/preact@10.11.3

[ElFitz]

It’s going to sound like a trope, but having discovered Svelte yesterday, I don’t understand how I ever could see React as "fine" anymore.

I’m just waiting for the other shoe to drop. It can’t just be that simple, can it? There has to be a catch.

[victorvosk]

Basically the problem with every framework that think its fine to sprinkle in strings as code in html.

[lordgroff]

And for Alpine it's sort of fine. People have taken Alpine a lot further than the original intent, which is to add sprinkles of JS to what is otherwise a server rendered page.

For anything even slightly more complicated we have things like Mithril or Preact, and yeah they avoid this sort of thing for a reason.

[scotty79]

I don't really understand why people want so bad to mix in code into HTML.

The whole fight since 2000 was to avoid doing that through minimalistic templating and naming elements semantically so you can attach the logic from outside.

[qbasic_forever]

That approach (i.e. the jquery style of attach logic to the DOM) just doesn't scale when you're writing a single page app where _everything_ needs to have JS logic attached to it. It turns into a complete mess of imperative UI twiddling and it's extremely easy to forget to update some little element in response to a change.

The bigger question IMHO is if you actually need a SPA. If you don't then yeah the old jquery style (now alpine.js or similar frameworks are spiritual successors) is perfectly fine.

[bornfreddy]

I wanted to use something light so I tried Preact without build tools. It was awful, nothing worked (like router and store), so I switched to Vue.js - where everything just worked out of the box. Not sure if I was just unlucky in my selection of js files, or what, but I can't recommend Preact from this experience.

[powersurge360]

This was a concern for me but when the Remote Ruby devs had the AlpineJS guy on last year, he mentioned that you can pull them apart into data components, which provides a separation that I found quite tidy. Did you check this out and find it unsatisfactory?

https://alpinejs.dev/globals/alpine-data

[rosszurowski]

I did! I actually forgot about that feature when making the parent comment. It was a useful addition to a degree.

I used it for more complicated components like a mobile nav with animations, and for some re-usable pieces like a subscribe form. The downside with Alpine.data is that it splits the HTML from the JS, so developing and refactoring was a bit of a pain, and caused errors because of old variables I accidentally left in the HTML (whereas Preact/TSX would give me an in-editor error).

It also didn't really mitigate the need to wire up all the pieces your data component exposes into an HTML correctly. Though, this was working inside a simple PHP-based templating engine — maybe one that supports better snippets with parameters would make that part of the experience better.

[wg0]

I have not tried it yet but I think https://unpoly.com/ is also a nice addition. I am thinking about trying it out in a project that I have in mind.

[imacrayon]

I’ve made an Alpine plugin that can do a lot of the common things Unpoly does: https://imacrayon.github.io/alpine-ajax/ I’m actively working on it and looking for feedback.

[Semaphor]

I want to try building something with either and see if it works for me. But last time I couldn't decide between it and alpine and ended up using neither :/

[morpogolaghora]

agree with your comment. i'm using alpine with django and it's is really nice. some very small sites are using it in production like Vimeo (link:https://vimeo.com/customers/enterprise)

[schappim]

>> The fact that all your code is scattered as strings everywhere without error checking or types makes it really hard to debug and work with long-term.

I'm afraid this doesn't match my experience.

All your code can be in a single file (or as many as you want) with window.app = function(){return{show:false}}

[fabiospampinato]

At this point one of the main features I look for in a JS framework is whether its author values type checking like I do or not.

[albertTJames]

Agreed, Alpine is hell to debug.