Is HTMX a Joke?

So I love that we hash that out because I think that's, like a really important conversation.

applications.

of HDMX is more simple. You're just swapping divs here and there. Right? is fair game. 2 or 3, you

On the thing, like, I understand it for a lot of

React wants to control

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

Like, what's the

In simplicity of execution, so to say. You have to worry about But if it's an HTML request, I know that's a client side navigation, to get you up and running. It is Are you are you using a very fun file system router? not having And that to me is really sick.

You're having to use a bunch of different tools, about Svelte, right, is that you can work with the DOM.

and I do think that's an important distinction.

are sending What do I do something, and send back HTML.

They're sending React now. It has client side folder based routing. You have a routes directory. It works like Next. JS,

You have components on the client and on Opt in to client JavaScript. That's when you do it. But React Vercel components

this format. Right? They they want to control the entirety of the the rendering cycle for your application.

client side components on top of HTMLX.

they're they're just sending

Vercel server side components. Basically, everything is a Server side component,

server actions or Svelte with Form actions.

in Svelte world, if I free myself from those bounds, a to work with client side code. That could just be straight up vanilla JS. In fact, that's how I'm doing it right Node. And I I got not a lot of beef with that. I think it's pretty great. Yeah. Like like example, if you had like a I use, like, Go and HTMLX JS the killer combo, and influencer b will say, Because if you're replacing parts of your UI, for the amount of stuff I actually need client side JavaScript for. Makes sense. Like, I'll give another example, this thing rips, and I'm a tell you, I'll post a LinkedIn to it. I'm calling it hype right Peace.

of JavaScript. And that bit of that gives me the full Dom.

like React server components

And that bit Probably. And you know what, Les? on websites that I use every day. Reddit Yeah.

the benefit, do some stuff in the browser that is based on browser events? That's when you need to reach for something.

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,

And Writing a slideshow, you can do that with CSS now.

React server components with

And Svelte,

HTMLX is the the solution to everything because there's definitely things I like about it and I don't like about it. I'd like that you don't have to worry about Which, Web components, they work just fine. Shadow dom does not work, but web components are cool for UI things here if you want to encapsulate UI logic.

So I I think the one thing that you're swapping for HTMLX is a small library for swapping out parts of your UI

What then happens is that JavaScript Node, that JavaScript then kind of attaches Wes does the data go? The data comes in from JSON, Comes in from the server. I then have to worry about Hey. What is this thing that you've been hearing so much about or you've been seeing memed online?

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

different from and JSX If I remove 1 person from that, it goes to the server, re renders the entire page, 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.

Yeah. But 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.

information from the server to the client as HTML. Right?

And and I do think I I don't wanna act like and it uses straight up. Almost all your logic moves to the server.

GitHub.

What do you need client side JavaScript for? And then when you start to think about it that way, Maybe some of them are returning HTML, itself does not do is it does not do the server side responses. So like I mentioned up top, you still need a server stuff. They're not sending HTML,

I have been working on That's it.

the requests, Oh, it's very different.

And I look at these things and I say, which of these Client side interactions I've often been critical of some of their humor online. I think some of it It's too the rendering system.

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.

The CSS is so much more capable than it's ever been before things. You know? You could write Which is a strength in the curse of it, I think.

that's able to understand A lot of people reach for something like Alpine, which is a lightweight client side library.

You're just cutting out the middleman here and getting that HTML and putting it somewhere rather than having to jump through the whole loop of of working with data. I gotta say it's really compelling. Another thing HTMX And one of the cool things this framework does is that it knows Excel The word x or whatever, docx, whatever these things. Only you could tie docx but you know what we've been working or maybe they're returning React code. Who knows? Right? You're using React Vercel components.

in it as HTML and just swaps out that little part. Or if you add a comment,

and you want to like,

And the way that that works is that when you when you click on Node of the emoji responses, it

But, again, what do you really need a JavaScript framework to do? Swapping classes on on something to do? Maybe, like, what? You're toggling So again, your application request

You really say, I'm using my own.

I think HTMLX What as a string for And I think in 2024, the answer is less than it was in 2015, right, or 2013.

are not talking to the Vercel. And it's it's not a, you know, a ton of them because they're oftentimes, they're just hitting hitting the server and getting back a response. That response comes back as data. The UI knows how to handle that data.

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

if you have an issue on GitHub,

sends that request to the server,

I had dental surgery on Thursday. It is now Tuesday, so it has not even been a full week. My mouth is recovering.

what what version was it? Were they, like, XLSX

let's get into it, Wes.

if you hear some of my words come out different, front end, quote unquote, So what can it do? You really start to look at the web apps we're building.

So, I think it's being used across communities, PHP and whatever.

all kinds of things using it, and I I feel the body

I'm pretty stoked about it. And it it is not How is HTMX 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

React is doing a lot of different stuff than what HDMX is doing.

odd right now. I feel odd that I like it so much. So we're gonna be talking a little bit about high level, what this thing is, what you need to know about it.

you're gonna want to have a tool like Sanity in your corner to to make sure that you capture all of your errors and exceptions.

x

kerfuffle that we've had.

Put some sort of metadata in the file extension so they added an x. Is that why they did it? Probably.

something that you might actually need if you're getting into Tools like HTMX.

the new Microsoft version of HTML that you may have thought. You know, when Yeah. Microsoft,

like it.

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

I I feel underneath the UI to affect the UI. In React, you're removing something from an array, and then that therefore will remove a DOM element from the UI.

with a response from a server. That's the big picture.

And if you are doing surgery on your code,

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.

I

So It's just very nice.

using the scoped API what I'm doing, makes finding relevant documentation.

Works really super Wes. But you need a server to be able to do those things smartly. I wrote that code myself. I'm putting it into a framework, I'm shipping way too much JS you need a server, straight up. You need a server to return front end frameworks category which allows you to swap things in multiple locations,

I've I've been exploring some things,

and logging and stuff like that. So it's a full featured thing. Can I ask, Basically, you know, that's something to consider. But what about These following things, animations, you do them with CSS or JS light or any JS lib that you want for animation. Screen sock,

or not.

Third party client side JS, HTMLX has some helpers like an on h t m HTMLX grab my data,

WebSockets and server side events. Hey. HTMLX has an API for that, so you can work with real time data without writing that client side JavaScript to connect there, and I think that's pretty neat.

So there's a multi that I have But the way that you're typically working in this thing, because I don't wanna get too deep into syntax, is you're saying, I have some JavaScript I have some HTML coming from the server, you know, rails or wherever. People are liking the way this feels for that because of these reasons.

framework,

which is great. And there's a whole host of other extensions, hypermedia.

Node function that just calls when HTMLX is loaded, and then you can initialize a client side library if you need to.

and it's an initial request

if it's an HTML draggable library. You just Get to use JavaScript, which is something I really appreciate without to do some of this stuff for me.

sections of the DOM, not just one thing. Right? Because typically you're giving it a target.

Swap is an extension it has just that bit of HTML. It doesn't have the whole DOM. It has just that little bit, and it puts it where you tell it to. Gotcha. Yeah. It makes sense. Yeah. So oftentimes, and therefore, it just gives me and which is which is good, is this line right here. It says, to the client.

So if I choose to load the about us route,

CSS. You bring your own solution. A lot of people really like Tailwind here because it is a nice way of encapsulating your CSS, doing scoped CSS to an individual component,

for something that feels Anything about it, difficult because of the about page, and it swaps Scott accordingly.

you could

Okay. Because

Yeah. You grab your data, you throw in a template, when you then update client side, all those updates Lives mostly within, like, the request process on the server, and that's in a way that makes sense. Cool. But right Node, I'm doing it all kind of bespoke. Beautiful. Alright. Thanks, everyone, for tuning in. We'll catch you later.

I We're going hypermedia. We're talking all about and lightning CSS.

I've been cooking on a a meta framework. And then I'm gonna say this is 24 hours So, you know, by the time you listen to this episode, you know, who knows what the status of this project will be? But

go pretty far

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 of something like this JS GitHub

Elisa, is important because, to the e s m common j s, Django versus React.

it uses BUN, it uses JS, that's the killer combo.

It's an area I'm going to continue to blower. So you might see some tutorials, you might see some more content. I'm sure we'll talk much more about HTMLX here in a practical sense. I just thought it was a good,

Now Welcome to Syntax. On this Monday, hasty treat, we're going MX. One, may a big thing to be. We're just a library. We're not a framework.

it's almost like after using this, I'm like, wait a second. It only has to be done in JavaScript because the system's expecting me to do it in JavaScript.

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

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 If an app is JS, Vercel JavaScript.

my my video courses is Wes progress and then it just comes back with the, like, List of emojis

given the tooling around it that you support yourself with.

And this to me, Feels the closest to that Then it's going to return And that's why I think people in Django, people in, it really takes a shift of, Do I need to be doing this in the client Node, or am I really just adding and subtracting divs here and there based on the server response? h t logic just goes away.

Built in. So, like, you 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

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

Yeah. With, Bun. I I will say I will be using their APIs, but to do the file routing, yeah, I'm using Eliza as the the, server, the the express, if you will. And so I I need to do some stuff there. So I I will see if I can integrate their file system rather API with Fallen for h t m x like so many other people in the meme world online.

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,

Requires a lot of buy in.

It does feel the most like working in only you could tie, a bigger change on how your application is working overall. Again, we're not working with JSON there. So that's a a big part of it.

ever felt on the web with JavaScript.

with an HTMLX to the existing DOM.

What does Scott not like about it? I don't like the occasional need for a client side. JS has a lot of people doing a bunch of different stuff.

I I threw up to, a bun server you're working with these responses that are just feels nice in practice.

I don't have, like, a build process necessarily.

Just writing a server sending HTML.

Right? And, likewise, many people are using Go as a back end that's fairly popular in this space.

of, like like, is is HD Max a replacement for, 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.

pug or for server rendering or for templating, and the answer to that is is no. Right? HTML does not care what your,

HTML, in, like, an interactive sense? Pretty cool. I remember There's people using Pug. There's people using any of these, I have In a React context or a Svelte context, and you're sending And you would use Django to generate your HTML.

you know, many of our servers, they return JSON right now.

handlebars, whatever. Any of these templating languages.

You you could use React.

to work with this tool, you need a server that is sending HTML Kind of. You're Okay.

Right? Like, you could A 100% server side render your React

There's people using JSX and transforming it to HTML.

And that goes along with whatever server side manner you choose to use.

Long story short,

Yeah. That's that's a big part. And we had a question on the last podcast

your back end is like, and it only cares that you are shipping HTML to the browser,

has been very popular of a choice. I don't write Python myself, but I've used Django before. People seem to really like using Django.

and it will know how to swap out the parts of your app. Right? That's big. Correct. In fact, one of my things on you need to know before starting is You will most likely need some kind of templating And State lives on the server.

ESLint.

maybe not in the UI

enhanced form that would work, the client side JavaScript you're doing is very obviously like client side JavaScript. It moves most of your logic to the server So that way, Is it actually real? Are people using it? What do I need to know about it? Awesome. The, h g max.orgforward/examples I remember the pre JavaScript front end days when I first started working in backbone.

So it offers a lot of progressive enhancement. But I think the big thing to think about here is it can do a lot more than you imagine it can do because so many of us have have had our our brains, will be rough edges Wes in certain situations I could have the framework bail me out with client side JavaScript.

So HTMLX finished 2nd in the 2023 JavaScript rising stars

interactivity bits, doesn't do it.

The HTML has somewhere to go.

the kind of stuff that does require, like, client side interactivity JS like mostly swapping CSS classes. Right? I mean, there's there's obviously more to this if you're getting into

purely in a client side context that we don't think about just how much of the stuff needs to be done client side, which I think that was the biggest shift for me Wes, There's no sending data around. I don't have to You see people using Preact, React, Alpine, all sorts of stuff virtual DOM.

Bingo bango. You have yourselves a progressively that So there's some way for HTMLX to talk to the server and it's not rerendering. It's straight up just manipulating the DOM. Right? And I think that is like a thing. And it it all depends on how you do it. There's a way that you can do something called boost, to get the same kind of simple workflows that you're getting Scott of Svelte. Yeah. What you get in the output

does x, y, and z need to be done on ESLint side? And one thing you'll see a lot is hypermedia, where basically HTML is king. We're sending HTML. We're swapping HTML.

modified by working And this is one of those things where you're like, okay. If it's a replacement for React, which I don't necessarily feel like it JS, and it it it's not analogous. Right? while,

people will get mad if you call it client side routing, because technically it's not client side routing. It really is, and it has the ability to do the same style of routing that you get Wes sections of your page don't change, but sections of your page do change. And this could be even nested into nested routes. I've been doing some really cool stuff with this. It also allows you to progressively enhance XLX

forms. Right? You submit a form. That form does your data. That data comes back in the form of HTML.

HTMLX,

It's not something that you can just swap out your UI for in a spot. This is not taking a React website and turning it into a Svelte website. This requires on. But Node there's no limitations on seasons. You could include your CSS I think it's legit.

That's really the crux of this entire thing. And so when you start to think about it, like, what can you do with that? And I think it's not mature enough in this space where there isn't like, Well, I I also think to do that in my app that I'm working I I'm gonna preface this episode by saying, state A hamburger menu. Right? You're just swapping classes.

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, 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

just to, like

Hey. If you think about it, everything. React is the apple of Why does that template just renders.

But if you wanted to,

I'll I'll tell you. You're you're you have full control over that. HTMLX does not determine that. So for instance, if I say as streamlined as that. Right? client side routing is really just that. You're taking a section of the page.

Alpine

HTML function to to push all of the HTML of that response into the div.

where to insert that into the DOM.

sending and receiving is data rather than Rather than HTML. HTML. Right? with your HTML in it. And then when HTMLX And to me, I don't think that's necessarily a pro. I'm gonna try to keep A bit vanilla, but who Node? You know, those are the types of things we'll see. But it I think another, like, thing I don't like about it is this sheer amount of variability in how people use this Tool PHP With me, as always, is Wes Bos. Wes, what's going on, my man? Pretty excited to talk about HTMX that we need client side JavaScript less and less. And this is Especially with popover too. Hey? With popover and dialogue and,

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

AJAX, asynchronous JavaScript pnpm XML.

when it comes to

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?

Therefore, you don't need as many specialized tools. To go along with your point is you don't work in JSON. So what you're not doing is you're not modifying the data structure a build tool in this regard.

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,

Yeah. You still need occasionally things My mouth hurts. I don't want my brain to hurt as well because I have a bunch of bugs and errors in my code that I can't find and solve. And so this show is presented by Century, You're removing that DOM element from the the UI or adding a DOM element. You're doing so via, but there's no limitations on how you write CSS here. I would like to do something

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

HTMLX

a bigger Again, I'm not having to accept things and then distribute it via state or any of that stuff. I also like that you can use BUN in straight up TypeScript.

Wes a string that's a list item HTMLX, but it would submit the form correctly and do all those things like you'd want it to do.

Add a new to do.

you could fetch a page and it would return

especially if you're sending a small amount of HTML from the server. Or maybe you're doing this all at the edge. Right? anchor. All of these new APIs are going to make HTML so much more formidable m x and I'm writing TypeScript everywhere.

small chunks of HTML or big chunks of HTML.

which which is a little bit more automatic.

a function in that Wes would use quite a bit JS you could

Yeah. Absolutely. So really need client side JavaScript And the JavaScript we're writing is client side JS unless, of course, we're doing that on the server side.

There's lots of different options out there. Right? actually removing one of them, you could use

With this, You can also extend the HTMLX. There's plugins. For instance, one thing that I had was, hey. When I want this change to happen, I want it to affect multiple with your JavaScript or with your HTML partials that you're sending along the wire. You can do that. It's cool.

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?

My to do function on the server might add that to the database.

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.

HTMLX, and it uses Drizzle and SQLite And I think the the one thing that thing. Right? Like, you're saying that in a positive manner? Yeah. Okay. I'm saying that in a positive manner because largely in the JS world, we've been kind of fighting Yeah. I don't maybe not. Most of the stuff requires like, kind of a lot of stuff, which, Sanity JS, whatever you want.

So When I got into I'm feeling very nice about just the general workflow of whatever that may be. And the cool thing is is you're working with the DOM, so you don't have to bring in, you know,

And then it knows to just, like, take part of that page and swap it out? Or is there some way for

Your application, That was like Windows Vista era Wes they were just really I HTMX,

JQuery had a,

HTMX is a library, by the way.

so that way we're all working from the same bits and pieces here. I I do want to credit So what do you need to know before working in how much of application development is simply talking to the server and replacing parts of the UI.

So I I guess I'm Node to talk. But People talk about this often in the context of HTMX it, kind of a lot you're swapping that with simplicity of developer experience. Because with HTMX, distributing that data throughout your application.

And I thought that was Just a cute bit of humor. Oh, that's a nice little jab. It's a nice little jab, and it's just playful.

HTMX.

just behind React. And then in parentheses, it says, I think people might have the wrong idea about what it is but, this, just simply loading this, have to be done in JavaScript? oh, receives that response,

React folks We'll laugh at that because React,

piece of humor in their documentation, heavier ESLint side application. So Let's get into a little bit about what it doesn't do. It doesn't do any client side JavaScript really, as in I remember thinking, is telling most likely do not need as much client side JS as you think.

much from that's coming from the guy with a monster truck intro to the podcast.

And I think it's gonna be really helpful for you to kind of Get a what you need to know before even thinking about HTMX, The big thing here is that it brings back Ajax, which is a term that many of you will remember in your Dreamweaver textbooks,

I gotta say, my favorite a a pro in my book. I think it makes working with state less messy.

And, also, a thing I don't like about it is their website only has a light Node. So that way, when I browse to it while we're recording this episode, I look like this, so I can't leave the docs open while we're recording.

you'll find influencer a being like, Hey. I used really powers through because of the enhancements to CSS lately.

Bun and,

I think,

where you're thinking about JS this a true React replacement.

So that's really it. I think there's plenty more that I do like about it than I don't like about it.

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,

So we're not gonna be getting too much into actual code here,

perspective.

but bigger picture things. What do you need to know about this as somebody who might not know anything? burned out of that in JavaScript land. Well, let me tell you, I got something for you here.

Today, it's funny that a bit of a bomb question here? Bombing up.

from a practical And, basically, the the whole thing about AJAX is what we've been talking about. It talks to the server and replaces a part of the UI without refreshing.

you still need something to do client side JS.

So It it it It's like, from that that route, perhaps

I have my data. I put it into the HTML.

I send the HTML. That to me You're swapping out the contents of that page.

Send it across the the Internet and then distribute it through my application.