• by tomhallett on 3/4/2024, 2:27:24 PM

    A few features which look minor but the author got totally right, which IMHO would allow this solution to scale very well with more complex applications.

    1) X-Alpine-Target

    ``` <form method="post" action="/comments" x-target="comments comments_count" ```

    generates an ajax request with this header by default:

    ``` X-Alpine-Target: comments comments_count ```

    This is very very cool! In most usecases, one the serverside I can return a full html document and alpine-ajax will only look for #comments and #comments_count in the response. BUT, if I want the serverside to be faster (ie: do less), then the client is able to tell the server which parts of the html it wants via the `X-Alpine-Target` header -- instead of the server having to know which parts need updating via the url alone. It's like graphql for the htmx/hotwire architecture.

    2) `ajax:missing`. If the client expects dom ids to be in the response and they aren't there, you can create a sentry error to expose the broken "contract" between the initial page's request and the action's response.

    3) x-merge="append"

    In hotwire, the html markup is dumb and the turbo-stream response is smart (`turbo-stream action="append"`). But in alpine-ajax, the response is dumb and the html markup is smart (`x-merge="append">`). This difference is subtle, but it allows for the serverside responses (for actions) be more general purpose/discrete components, while the ux which might change from page-to-page or section-to-section is decoupled to that page's/section's container html.

    4) x-sync

    "Elements with the x-sync attribute are updated whenever the server sends a matching element, even if the element isn't targeted with x-target."

    Wow - amazing developer ux for cross cutting concerns like notifications, flash messages, etc. So practical.

    5) Creating demos with an alpine-ajax mock server.... wow, an out of the box way to make standalone component test pages.

  • by tomhallett on 3/4/2024, 1:14:15 PM

    My first reaction was “why do I need an htmx-like version written in alpine?” when I could just use htmx. BUT… if you assume that you will need something more low level to complement htmx (“htmx + alpine” OR “htmx + hyperscipt”) and if you decide hyperscript is not for you, then it does make sense to a stack where the higher level is built upon the lower level: alpine-ajax + alpine.

    Looks very interesting!

    Also loved the comparisons, especially with rails/turbo and the downsides of custom elements wrt tables.

  • by pietz on 3/4/2024, 6:35:03 PM

    Wait a second, this makes way more sense than it should.

  • by wysewun on 3/8/2024, 4:59:20 PM

    I’ll have to play around with this but glad to have another great library with this mindset.

    I always am unsure of whether to go with unpoly, livewire and htmx lol. Maybe this will push towards htmx

  • by iainctduncan on 3/4/2024, 3:33:10 PM

    All of these related projects remind of Dojo Didgets from the mid 2000s. Not that that's a bad thing, I found that tool kit very productive!

    Anyone else remember Dojo fondly? Am I way off base here?

  • by shoqr on 3/4/2024, 6:53:57 PM

    That looks interesting. It resembles Unpoly approach to me.

    Quick question about redirect with `nofollow`. Does it do a full page reload or just refresh a page like Turbo (swaps body and merges head)?

  • by snthpy on 3/5/2024, 6:09:07 AM

    Looks very cool!

    I also love the 50s styling and theme. Awesome job!

  • by spiderfarmer on 3/4/2024, 9:22:55 AM

    I use Livewire v3 (also fully Alpine based now) in my latest project and it has truly transformed my approach to web apps. It’s truly amazing.

  • by pietz on 3/4/2024, 7:12:34 PM

    Can it do something similar to hx-trigger="load"?

  • by elspecal on 3/4/2024, 9:30:19 AM

    looks sweet! wanna try out building something using HTMX. i'm curious about its limitations in terms of project size/complexity

  • by niutech on 3/5/2024, 4:18:13 AM

    Nice! But how to deal with i18n?

  • by gardenhedge on 3/4/2024, 6:07:25 PM

    No JSON needed? I like JSON

  • by alucab on 3/4/2024, 9:25:32 AM

    It would be JQuery...

  • by auct on 3/4/2024, 2:12:40 PM

    Try uajax on GitHub