TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Show HN: Alpine Ajax – If Htmx and Alpine.js Had a Baby

92 pointsby imacrayonabout 1 year ago
An Alpine.js plugin that includes the core functionality of HTMX in a streamlined (3KB) API.

14 comments

tomhallettabout 1 year ago
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.<p>1) X-Alpine-Target<p>``` &lt;form method=&quot;post&quot; action=&quot;&#x2F;comments&quot; x-target=&quot;comments comments_count&quot; ```<p>generates an ajax request with this header by default:<p>``` X-Alpine-Target: comments comments_count ```<p>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&#x27;s <i>like</i> graphql for the htmx&#x2F;hotwire architecture.<p>2) `ajax:missing`. If the client expects dom ids to be in the response and they aren&#x27;t there, you can create a sentry error to expose the broken &quot;contract&quot; between the initial page&#x27;s request and the action&#x27;s response.<p>3) x-merge=&quot;append&quot;<p>In hotwire, the html markup is dumb and the turbo-stream response is smart (`turbo-stream action=&quot;append&quot;`). But in alpine-ajax, the response is dumb and the html markup is smart (`x-merge=&quot;append&quot;&gt;`). This difference is subtle, but it allows for the serverside responses (for actions) be more general purpose&#x2F;discrete components, while the ux which might change from page-to-page or section-to-section is decoupled to that page&#x27;s&#x2F;section&#x27;s container html.<p>4) x-sync<p>&quot;Elements with the x-sync attribute are updated whenever the server sends a matching element, even if the element isn&#x27;t targeted with x-target.&quot;<p>Wow - amazing developer ux for cross cutting concerns like notifications, flash messages, etc. So practical.<p>5) Creating demos with an alpine-ajax mock server.... wow, an out of the box way to make standalone component test pages.
评论 #39592239 未加载
tomhallettabout 1 year ago
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.<p>Looks very interesting!<p>Also loved the comparisons, especially with rails&#x2F;turbo and the downsides of custom elements wrt tables.
评论 #39590785 未加载
pietzabout 1 year ago
Wait a second, this makes way more sense than it should.
wysewunabout 1 year ago
I’ll have to play around with this but glad to have another great library with this mindset.<p>I always am unsure of whether to go with unpoly, livewire and htmx lol. Maybe this will push towards htmx
iainctduncanabout 1 year ago
All of these related projects remind of Dojo Didgets from the mid 2000s. Not that that&#x27;s a bad thing, I found that tool kit very productive!<p>Anyone else remember Dojo fondly? Am I way off base here?
评论 #39599369 未加载
shoqrabout 1 year ago
That looks interesting. It resembles Unpoly approach to me.<p>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)?
评论 #39594436 未加载
snthpyabout 1 year ago
Looks very cool!<p>I also love the 50s styling and theme. Awesome job!
spiderfarmerabout 1 year ago
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.
评论 #39593891 未加载
pietzabout 1 year ago
Can it do something similar to hx-trigger=&quot;load&quot;?
评论 #39595330 未加载
elspecalabout 1 year ago
looks sweet! wanna try out building something using HTMX. i&#x27;m curious about its limitations in terms of project size&#x2F;complexity
评论 #39589947 未加载
niutechabout 1 year ago
Nice! But how to deal with i18n?
gardenhedgeabout 1 year ago
No JSON needed? I like JSON
评论 #39594456 未加载
alucababout 1 year ago
It would be JQuery...
评论 #39589919 未加载
auctabout 1 year ago
Try uajax on GitHub