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