imacrayon

You can swap multiple elements with targeting too: `x-target="comments comments_count"`, but, yeah most of the time `x-sync` is better.

This is the way. https://alpine-ajax.js.org provides what’s missing from HTMX.

You made my day! thanks

This is one reason I created https://alpine-ajax.js.org. A few years ago there were a lot of examples in the HTMX documentation that discouraged accessibility and progressive enhancement. Stuff like like clickable <div>s, ignored keyboard focus, lack of screen reader announcements. There’s been some improvement latel, but I still think the library has a lot of foot guns for new web developers.

I actually created https://alpine-ajax.js.org for this reason. HTMX and Hotwire both have opinionated requirements around the content and status codes that your server returns. One of the goals with Alpine AJAX is you should be able to drop it into any basic CRUD app and have it working without changing any server code.

HTMX for example requires that a successful form submission respond with a 200 status, but many applications (most?) will 302 redirect to a new page to prevent duplicate form request on refresh.

There’s a draft proposal to get some of HTMX in the browser: https://github.com/alexpetros/triptych

Help me understand why you need the JSON in these examples…You’re rendering JSON data on the frontend just to transform it into HTML. The HTML is rendered server-side, so you should be able to skip the JSON and embed the data in HTML, right? `<input name="firstName" value="John">`

Check out https://alpine-ajax.js.org it defaults to using the same template views you would in a typical JavaScript-less app, then you can sprinkle in fragments where you need to optimize requests.

You can use https://alpine-ajax.js.org for this, or Alpine can work as an alternative to Stimulus.js in the Hotwire stack.

There's some momentum around getting core HTMX functionality into the HTML spec so JS might not be required:

https://www.reddit.com/r/htmx/comments/1ehjw7v/comment/lg09w...

Alpine + Alpine AJAX. It's lighter than Alpine + HTMX and it doesn't require splitting your templates up into partials.

Eleventy. It’s a static site generator that’s super stable, they take backwards compatibility very seriously so you can count on it for a long time. It’s lightweight so you don’t have to install a million dependencies to get it working, and it’s the only one of the big SSG projects that’s independently funded so they’re not chasing VC-backed hyper growth.

https://www.11ty.dev/

I had a similar experience, so I took the stuff I liked from HTMX and made it into an Alpine plugin: https://alpine-ajax.js.org

Oh, absolutely :) I try to keep up on Slack, but I need to get back to going to the in-person events again. It’d be cool to reconnect there sometime!

I’m impressed with how thorough this is! It’s cool insight into the dev conference experience.

Yeah, Alpine components have `x-init` that works just like the load trigger. You can fire off an AJAX request inside that directive, there's an example here: https://alpine-ajax.js.org/examples/lazy-load/

Whatever floats your boat...I wish it supported comments though.

It does a full page reload at the moment. I'm about to start work on a full SPA mode that will function more like Turbo though.

Thank you! I really have tried to sweat those details, it's reassuring to hear that's coming through.

Yes! You’ve reminded me that there’s some subtle gotchas when using HTMX server-side that are probably worth documenting too. For one, HTMX starts with the assumption that you’re returning HTML fragments, but not all templating languages have good support for decomposing layouts into fragments. You can work around this using hx-select but Alpine AJAX works kind of like hx-select by default. Also, there’s some response header juggling you have to do when submitting forms that have a validation step before redirecting: https://github.com/bigskysoftware/htmx/issues/369

I’ve tried to iron out any footguns or server requirements I’ve bumped into while using HTMX & Hotwire in my projects.

HTMX actually has a good essay on the scale question: https://htmx.org/essays/does-hypermedia-scale/

Haha you’re not wrong. I love jQuery, but Alpine’s declarative style feels better, and since we don’t have to worry about all the backwards compat we get a library that’s half the size of jQuery Slim.

Nothing, if it works for you great! I’ve found Alpine code to be more declarative and easier to reason about. Also, jQuery often requires you to write more code to do the exact same thing in Alpine. One thing jQuery does better is AJAX, Alpine doesn’t have builtin AJAX tools. I’ve made a plug-in to bridge that gap though: https://imacrayon.github.io/alpine-ajax/

Chances are you’ll end up writing more than 10kb of custom JS to make your components work. Alpine comes with basic batteries already included.

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.