Is HTMX a Joke?

Today, it's funny that if we go back to the potluck episode questions we had, we've had questions about HD Max for years. Here's the ATLOM account. It only seems recently with the, like, sort of swing back to the server, a lot of people are are talking about it, and, I'm pretty stoked about it. And it it is not the new Microsoft version of HTML that you may have thought. You know, when Yeah. Microsoft, what what version was it? Were they, like, XLSX and docx? You know, they added an x to the end of all their new formats. And everybody, yeah, everybody got angry. I got angry about that. That was obnoxious.

making big mistakes all the time. Yeah. Well, like, it was a new format. So, like, the same thing happened with common JS JS that there's some way you need to Put some sort of metadata in the file extension so they added an x. Is that why they did it? Probably.

Yeah. That's that's a big part. And we had a question on the last podcast of, like like, is is HD Max a replacement for, pug or for server rendering or for templating, and the answer to that is is no. Right? HTML does not care what your, your back end is like, and it only cares that you are shipping HTML to the browser,

You you could use React.

Right? Like, you could A 100% server side render your React and then just use HTMLX on on the other Node? It's probably you're probably not do that, but you could. Right? You could. Absolutely. You could use Svelte. Anything that gets you from code to HTML

A ESLint of people and you wanted to, like, remove somebody from a team. Like, you could render out the whole team. You have Scott. You have Wes, you have Sanity, put little x's beside them. And then, when it comes to actually removing one of them, you could use HTMLX, just to, like when you click on that x, it sends the event to the server. The server removes it from the database and re renders and sends that back.

But if you wanted to, make that let me start that again. But if you wanted that to to be a little bit more interactive, maybe you wanna drag and drop, maybe Do you wanna, do some stuff in the browser that is based on browser events? That's when you need to reach for something.

Alpine JS, Vercel JavaScript.

There's lots of different options out there. Right?

working with straight ajax, which we'll talk about in a second. Yeah. Can I can I ask 1 question about that, that I'm curious? And you might be getting to this, but I'm I'm just kind of trying to visualize it in my head, like coming back to like the Wes have a page called Team Scott HTML. It renders out the header, The entire team and the footer and the sidebar. Right? If I remove 1 person from that, it goes to the server, re renders the entire page, And then it knows to just, like, take part of that page and swap it out? Or is there some way for HTMLX to talk to the server and say only rerender this part.

So you have targets and things of that nature. Yeah. But your your server is still rerendering the entire page. Right? No. Not necessarily.

Okay. So you you can tell it, Like, you you can hook it up to your your server then and and say only rerender this partial?

JQuery had a, a function in that Wes would use quite a bit JS you could you could fetch a page and it would return The entire page, but then you jQuery would be able to just say, okay, I only want this one part of it, and then you could, like, use dot HTML function to to push all of the HTML of that response into the div.

It's kinda funny that we stopped using the term Ajax. Yeah. And next now it's all what? Like, what do we call it? XHR or, like, most people call it, like, a fetch, I guess. Yeah. And that's I think that's largely because what we're

of something like this JS GitHub if you have an issue on GitHub, and you want to like, GitHub is such a good example of, like, an application meets a website. You know? It's not like, oh, this is an app, and and this is a website. It's it's it's both. Right. Doing a lot. And if you're if you're on the the an issues page, like there's a lot that it's server render. Right? A list of all the The the issue with the all of the comments that go underneath it. However, there are some bits of those issues that need to be interactive, like, adding a emoji response.

And the way that that works is that when you when you click on Node of the emoji responses, it sends that request to the server, and then it just comes back with the, like, List of emojis in it as HTML and just swaps out that little part. Or if you add a comment, it Could just rerender the list of of comments behind it. So I thought that was a good example of Yeah. The difference. Yeah. I've been really examining

a bit of a bomb question here? Bombing up.

How is HTMX different from React server components with server actions or Svelte with Form actions.

Then therefore, from that ESLint, happen via the client side. Right? I'm I'm just trying to, like, understand, like I I understand it, but, Like, what's the the benefit, over that type of thing? Like, yeah, it's it's less JavaScript, but it comes with all these, like, oh, but If you do wanna do some server JavaScript or you wanna do a drag and drop, then all of a sudden you're Totally.

You have components on the client and on On the thing, like, I understand it for a lot of applications.

Yeah. But

If an app is like React server components And Svelte, they're they're just sending HTML. I know it's the components, but you're not sending any data to the server if it's Server rendered. You're only Only on only on the initial load. Right? And then every subsequent load, you're dealing with data and hydration. React server components, though. React server components, you can keep it a 100% on the Vercel, and only when you want to Opt in to client JavaScript. That's when you do it. But React Vercel components

And this is just so the whole lot. Straight for. With HD Max, you could you could write your back end in 8 different

also has a bunch of, like, okay, but how would I do progress or or something like that. Some really good examples they're showing. Especially, I was I was curious how, like, the server sent events work Because, like, you think, oh, yeah. But my stuff's real time, you Node? Or like Yeah. Like, an example is I have my my video courses is Wes progress needs to happen, right, you can you can use server ESLint events to send that back and forth from the server just to update data.

Beautiful. I I like it. I, I'll have to give it a shot myself. I've been Kinda looking at it for years, ever ever since people keep, suggesting it. I I think the one thing that people are not going to like, and and you touched upon this, is that, like, People just want a opinionated meta framework, or just just tell me how to do it. You know? I wanna be able to tell me how to write my components, tell me where to put everything, me what the folder structure looks like. I don't wanna have to piece all these things together because we're certainly

Okay. Because That's one really cool thing. I I know we're getting long here, but one cool thing about Bun is that it, like, has a file system router built in and JSX Built in. So, like, you you could go pretty far