Awesome video Josh! It’s wild how quickly you can whip these up and keep them so high quality. You could simplify this example even more by moving the `id=“todos”` up to the div that surrounds both the form and the list of todos, then remove `x-data` and `ajax:success`. That change would update both the form and list on every request, so your form will automatically clear after submit. At the moment your use of `x-data` is managing some state on the client and some on their server. By removing `x-data` you’re letting the server handle all the state for you.
I would make one adjustment to the delete example. If you have the row target itself, you can return empty json with a 200 code and the element will unmount itself. This way you don't have to unnecessarily re-query all the todo's.
Can you comment on how to handle request that needs authorization token to server using htmx or alpine ajax? I didn’t find any videos talking about how to handle this situation using htmx or alphine ajax
htmx is so much more elegant and especially 1000x more powerful. You can do crazy things with a minimal amount of code, like using websockets and efficient streams, preloding, prefetching, html streaming, lazy loading.
I’m still learning about HTMX and how it works with something like Laravel. Wouldn’t I have to modify my route in this particular instance to use HTMX where it returns just the html fragment of the todos if it’s a HTMX request but if it’s a full page request than it returns the full route? In this example with AlpineAJAX I didn’t have to do the fragment piece. Is that something that’s possible with HTMX? All I’ve seen examples of (and in my extremely limited testing) is with fragments.
while i deeply appreciate you complementing htmx, i don't think we need to present it as more powerful or elegant: it's a different approach to the same problem (issuing https requests and swapping hypermedia responses into the DOM) with advantages and disadvantages. alpine-ajax, like unpoly, data-star & hotwire, are all unique takes on this general idea with their own strengths, and we should be supportive!
@@carsongross8543 I don't have the same opinion. I'm a little more assertive. For me, not everything is equivalent. Some things are just better than other things. htmx is 1000x better than alpine-ajax, hotwire... Python is better than PHP and JavaScript for doing Machine learning and Deep Learning. I'm ok with that. Rust is better than Python or PHP for building system-level applications. Svelte or Solid is more performant than React. And so on. It's not that I'm not supportive, but I don't like false claims.
@@aghileslounisa bit of a false equivalency here. Apine ajax and htmx are much closer to use case parity than say rust vs python for systems. Its okay to like htmx, i do a lot, but just chill and be less quick to argue.
@@hamm8934 I have the right to like htmx and dislike another approach, for what it does. I just find it BEST for now. How is that? Nothing to do with quick judgement, it's just I know what I want and what i'm looking for. In my world, htmx is way better than the other alternatives that try to do the same (at least for now, I might change my mind in the future, if others get better.) You are just afraid of liking something and hurting someone else feeling. That's not science. Arguing is the base of advancement and finding something better, if no one argues, then everything is great. Someone, some day, argued and thought that maybe jQuery isn't the right approach for handling client-side state. The false equivalence, you're right, it's not exactly the same, I exaggerated in purpose to showcase what I meant. I might sound a little bit aggressive, but it's not the case, I'll happily change my mind If it becomes better, for now, it's worse.
Pretty sure I could do that same app with just Alpinejs and not have get html from an endpoint. It's 2024. How many people are not using javascript? I wonder if jumping through all of these hoops for an extremely limited audience is really worth it.
@@spicynoodle7419 Last time i checked csp blocked alpine's onclick handler. They even say so on their own website. Unfortunately that is preventing me from using it in a production environment. Any ideas about that ?
But doesn't Alpine-Ajax send a lot more HTML down the wire than HTMX? With HTMX you'd create blade partials to only return the content that changed (a form, table, widget or whatever). Whereas Alpine-Ajax downloads the full page again from the backend and does the diffing / swapping on the frontend. HTMX's smaller payload would be a major performance advantage, especially for users who are geographically far away from your server. Or am I misunderstanding something about how Alpine-Ajax works?
Lmao… I’m just seeing this. I just accidentally reinvented something similar on the server side. A template engine for my own in-house framework that integrates HTMX (not opinionated) and Alpine would work too if it supports websockets. It utilizes regex to match the template variables which are callbacks to plugin functionality with directives in an attribute like func=“poll(target,interval)” in a data table which uses a server side plugin to poll an api point at x interval on the server side by utilizing a service worker to monitor an event registry… so you are able to call functions from a template without writing logic in the framework freeing up a lot of business logic busy work.
Awesome video Josh! It’s wild how quickly you can whip these up and keep them so high quality.
You could simplify this example even more by moving the `id=“todos”` up to the div that surrounds both the form and the list of todos, then remove `x-data` and `ajax:success`.
That change would update both the form and list on every request, so your form will automatically clear after submit. At the moment your use of `x-data` is managing some state on the client and some on their server. By removing `x-data` you’re letting the server handle all the state for you.
This is fantastic.
Time to do a deep dive on the code to see what's happening, but that makes a TON of sense. 👀
Could you make a video on all the laravel plugins like blade, live wire, breeze etc? Why would anyone want to use this? What are the pros and cons.
Sveltekit helped me understand progressive enhancement
I love their approach!
Alpine is neat, and with plugins like this quite powerful
hi, got a question do you think, its possible for you to make a tutorial to build drag & drop app with alpine? thanks for reply
I would make one adjustment to the delete example. If you have the row target itself, you can return empty json with a 200 code and the element will unmount itself. This way you don't have to unnecessarily re-query all the todo's.
Great video Josh, but I mostly came here to say how awesome your t-shirt is 🎉
It's a good one. 😁
Can you comment on how to handle request that needs authorization token to server using htmx or alpine ajax? I didn’t find any videos talking about how to handle this situation using htmx or alphine ajax
htmx is so much more elegant and especially 1000x more powerful. You can do crazy things with a minimal amount of code, like using websockets and efficient streams, preloding, prefetching, html streaming, lazy loading.
I’m still learning about HTMX and how it works with something like Laravel.
Wouldn’t I have to modify my route in this particular instance to use HTMX where it returns just the html fragment of the todos if it’s a HTMX request but if it’s a full page request than it returns the full route?
In this example with AlpineAJAX I didn’t have to do the fragment piece.
Is that something that’s possible with HTMX? All I’ve seen examples of (and in my extremely limited testing) is with fragments.
while i deeply appreciate you complementing htmx, i don't think we need to present it as more powerful or elegant: it's a different approach to the same problem (issuing https requests and swapping hypermedia responses into the DOM) with advantages and disadvantages. alpine-ajax, like unpoly, data-star & hotwire, are all unique takes on this general idea with their own strengths, and we should be supportive!
@@carsongross8543 I don't have the same opinion. I'm a little more assertive.
For me, not everything is equivalent. Some things are just better than other things.
htmx is 1000x better than alpine-ajax, hotwire...
Python is better than PHP and JavaScript for doing Machine learning and Deep Learning. I'm ok with that.
Rust is better than Python or PHP for building system-level applications.
Svelte or Solid is more performant than React.
And so on.
It's not that I'm not supportive, but I don't like false claims.
@@aghileslounisa bit of a false equivalency here. Apine ajax and htmx are much closer to use case parity than say rust vs python for systems.
Its okay to like htmx, i do a lot, but just chill and be less quick to argue.
@@hamm8934 I have the right to like htmx and dislike another approach, for what it does. I just find it BEST for now. How is that?
Nothing to do with quick judgement, it's just I know what I want and what i'm looking for. In my world, htmx is way better than the other alternatives that try to do the same (at least for now, I might change my mind in the future, if others get better.)
You are just afraid of liking something and hurting someone else feeling. That's not science.
Arguing is the base of advancement and finding something better, if no one argues, then everything is great.
Someone, some day, argued and thought that maybe jQuery isn't the right approach for handling client-side state.
The false equivalence, you're right, it's not exactly the same, I exaggerated in purpose to showcase what I meant.
I might sound a little bit aggressive, but it's not the case, I'll happily change my mind If it becomes better, for now, it's worse.
Pretty sure I could do that same app with just Alpinejs and not have get html from an endpoint. It's 2024. How many people are not using javascript? I wonder if jumping through all of these hoops for an extremely limited audience is really worth it.
Very nice! It looks very promising 👍
It's neat! :)
You can do something similar with HTMX for progressive enhancement: hx-select="#todos" hx-target="#todos"
Good to know. Thanks!
And how good does this work on a webserver with CSP policies in place ?
No difference from any other server request
@@spicynoodle7419 Last time i checked csp blocked alpine's onclick handler. They even say so on their own website. Unfortunately that is preventing me from using it in a production environment. Any ideas about that ?
But doesn't Alpine-Ajax send a lot more HTML down the wire than HTMX? With HTMX you'd create blade partials to only return the content that changed (a form, table, widget or whatever). Whereas Alpine-Ajax downloads the full page again from the backend and does the diffing / swapping on the frontend. HTMX's smaller payload would be a major performance advantage, especially for users who are geographically far away from your server. Or am I misunderstanding something about how Alpine-Ajax works?
I believe you’re right if you are doing a straight return like what was shown.
But can still do partials with HTMX, as well. ☺️
What plugin are you using for collapsing the tailwind classes here?
This is the Tailwind Fold plugin. ☺️
What Browser is that ? Looking very clean .
Arc browser
@@kawankoding thank you
You should try EHTML
Lmao… I’m just seeing this. I just accidentally reinvented something similar on the server side. A template engine for my own in-house framework that integrates HTMX (not opinionated) and Alpine would work too if it supports websockets. It utilizes regex to match the template variables which are callbacks to plugin functionality with directives in an attribute like func=“poll(target,interval)” in a data table which uses a server side plugin to poll an api point at x interval on the server side by utilizing a service worker to monitor an event registry… so you are able to call functions from a template without writing logic in the framework freeing up a lot of business logic busy work.
that browser seems really nice, can you tell me what it is?
Arc browser
Yep! Arc browser. :)
lol, next month: HOLY SH** RAW JS IS ACTUALLY SO GOOD
Awesome video, This is Nice :)
It's neat huh! Thanks for watching. :)
very interesting. helpful
Glad you watched! :)
Isn't that less efficient though?
You are re-downloading the entire page just to get one part and discarding all of the rest.
Probably so. But no more than if you were hard redirecting.
I think it’s just nice to have an easy progressive enhancement path. ☺️
@@joshcirre That's a fair point, if you were doing full redirects, at least the UX gets a bit better.
Unpoly js.