over 2 years ago Syntax Podcast
HTMX Web Apps with Carson Gross
- 02:33 HTMX is HTML plus plus, generalizing hypermedia controls like forms and links to handle AJAX requests
- 04:04 HTMX attributes allow HTML elements to make requests and update DOM with returned HTML
- 07:13 Intercooler.js in 2013 originated concept, improving slow client-side table sorting
- 09:39 PJAX blew minds updating routes without full page loads
- 16:09 HTMX is part of evolution of web dev, not backwards step
- 18:49 Rendering HTML vs JSON not hugely different in resources
- 21:33 Partial HTML updates can be very efficient
- 26:43 Carson likes Python and Ruby backends
- 32:32 Carson not very experienced with web components
- 33:48 Carson likes template fragments for locality
- 38:44 HTMX not great for local-first
- 39:10 HTMX 2 maintains backwards compatibility
- 40:07 Carson has fun trolling on Twitter
- 45:33 Carson wants less tribalism and rhetoric around tools
Partial HTML updates can be very efficient
Guest 2
I agree to you know? I agree.
Wes Bos
It makes sense that you you can do that. And, like like, my so I build full stack JavaScript applications, and my back end is
Scott Tolinski
I did hear this criticism, shameless plugs. Did you come
Wes Bos
They are
Guest 2
right, coming coming at people, and there's this sort of fruitless So I and I don't anticipate it changing much going forward.
Guest 2
I think it's good for a list of people to exist a baseball coach here, and, I just checked Twitter and was like, that can't be right.
Guest 2
React type code or JavaScript on your back end. Whereas if you if you just take the hypermedia model and say, okay. We're gonna exchange hypermedia. One of the good things about HTMX is you can pick whatever back end language you want, and that's something that I'm pretty passionate about. I you know, there's been a a a meme going around, like, this lava flow kinda, way to do web development.
Guest 2
back end frameworks that, you know, have been for the last 5 years in particular kinda shunted aside in favor of the, you know, what a lot of people seems like the obvious pick of JavaScript on the server. That's not to say I'm not in favor of JavaScript on the server. There's some very good run times Node,
Guest 2
but,
Wes Bos
Do you have any thoughts or opinions on sort of that trend as well? and just run the most hilarious
Wes Bos
do not have a tightly coupled front end and back end, and they they need something like this. So I thought that is is pretty neat that you can do that JS well as, like, some people prefer
Wes Bos
to build their logic in
Wes Bos
not it's not React. Like, my logic is not yeah. I'm not writing database queries in in JSX. I'm writing it in JavaScript, and then I pass that data to
Guest 2
person using a a backhoe trying to, you know,
Wes Bos
your thoughts on, like, a lot of these frameworks right Node? Obviously, React Vercel components.
Wes Bos
Just do it on the server where it could be a lot faster and then just ship the the actual endpoint. Right? Like, clearly, that's going to be in in some cases, in a lot of cases, that's going to be a much smaller payload that needs to be shipped to the end. But you can sort of, like, dip into front front end stuff as as well if you need it.
Wes Bos
I do think that it's important because a lot of times people just assume, like, that's the only way to build these types of things, and they realize, like, no. There are large companies out there that
Wes Bos
my templating layer. And and that that's at the point where you you sort of pick up React, but done
Scott Tolinski
Personally, like you, if you're writing an app, what is your favorite
Guest 2
You know, I I I got pretty good at, like, you know, making memes and and stuff like that. And I didn't do it for a while because I I was I had a startup gone. And Intercooler JS kinda I don't wanna say it died, but it it definitely flat lined. Like, you know, it had nowhere near the attention that HDMX is getting now.
Scott Tolinski
Yeah. I I I think there is some poignant things in there. Like, the fact that
Wes Bos
PHP or Ruby or Python or all these different languages.
Wes Bos
the JSON and the library to build the table and all this other stuff that you need just to render it out in the browser?
Guest 2
So,
Wes Bos
now saying, alright. Well, let's render everything on the on the Vercel,
Scott Tolinski
you like that it can expand to all sorts of different back end languages.
Scott Tolinski
But, unironically, they're not even recognizing the fact that if you are using React Vercel components, that's a much more tightly coupled system.
Scott Tolinski
Given that you're saying that, you know, there there's some, just I don't know. The the vibe out there is really great. Obviously, the the skiing and mountain stuff is is wonderful too, but, yeah, big fan.
Guest 2
But I think it would be a shame if the Lisp community was not able to participate in web development you know, spark the thinking around what what could HTML be? Because I don't think HTML can you know, Figma, for example. Like, h you're not building Figma in HTML, so forth. I I understand they're improving,
Guest 2
and a and the ESLint programming language to put pressure on other programming languages and so forth. So I like that diversity of back end, this this idea, you know, as as we pointed out, HDMX does let you pick whatever kind of back end you want, and that's because I I think that those approaches from what I've seen, and I'm not an expert on that stuff. You know, I get people that come in on Twitter and are like, oh, you know, have an opinion on server components. I'm like, I can't even have an opinion on React, really.
Guest 2
pick up HMX. And I think HMX does give life to some of these, and network,
Scott Tolinski
from React folks a lot when talking about HTMLX was that it it does tightly couple your your server to the UI because you're sending HTML.
Guest 2
you know, I but I I think JS as well as I understand it, my my criticism of that would of React components in particular, and I even this might be wrong because there's someone I think who's doing work to make this not true, is that it tends to tightly couple your front end and your back end. Like, now you have to be running
Guest 2
Yeah. And one of the things I say is, like, I'm never gonna be a ESLint person. You know? I may use Go at some point in my life, but I'm never gonna be a Lisp person.
Wes Bos
because in a lot of cases, that makes sense. Why send
Guest 2
just decided, okay, we're gonna do everything in JavaScript.
Guest 2
obviously, the the Django world, the Python world, and integrate them into HTML in maybe a more standardized form. Like, okay. Maybe you don't want everything to be a hypermedia control because of accessibility issues, but, like, let's just look at buttons and make it so the buttons have the ability to be stand alone hypermedia controls. And, I think you could start making progress again.
Carson likes Python and Ruby backends
Scott Tolinski
routing.
Scott Tolinski
framework world
Guest 2
encapsulate your business logic or your domain logic changes at all.
Guest 2
world that we're entering here. Yeah. I've seen some pretty crazy, One of the interesting things about HTML is that you embed HTMLX so, basically, you can think of it as HTML plus plus. It's it takes the ideas of HTML, in particular, anchor tags and forms.
Scott Tolinski
it was easy to pick that up and Cool. Well, do you wanna give a a brief introduction to who you are and what you do, to our audience? shoot some HTML. It comes with a folder based routing setup and stuff out of the box. So yeah. There I I do love that that flexibility and and freedom. I did quite a bit of Rails and Django myself earlier on in my my career.
Guest 2
But it has a lot of life life cycle hooks, and it does, I think, a really good job of, allowing you to encapsulate your React Vercel components in other programming languages.
Scott Tolinski
especially more in the data piece,
Scott Tolinski
migrations. You get ORM. You get,
Scott Tolinski
runtime a little bit, just because,
Guest 2
unfortunately, right now because just so I'm so busy with teaching.
Scott Tolinski
that you you get in JavaScript. And that's a the an area that I think the JavaScript frameworks are afraid to touch. You know? Oh, yeah. You know, one thing I really like from Rails
Guest 2
and server side JavaScript.
Guest 2
all of them. Yeah. But Yeah. But, you know, it's cool. Have fun.
Scott Tolinski
that we never really quite reclaimed
Guest 2
but that also adds a bunch of complexity. So in the book, I used, it's it's building, taking some of the good ideas from today, Active search where, like, you type something and then the results kind of immediately come back. That can be implemented
Guest 2
And so separating those 2 actually helps
Scott Tolinski
And
Guest 2
people saying, oh, we're we're we're coupling It's just really, really funny and, like, awkward in a in a sort of very h t m x.
Scott Tolinski
shipping HTMX. And I was thinking, this is a this is a wild Yeah. Well, it's been awesome, Carson. It's been really great getting to talk to you. And, I I hope the audience has a little bit better of an idea about the intricacies of HTMX after this one. And,
Guest 2
a a tight integration between client side JavaScript client model. And, you know, in some ways, I have to say, even reactivity isn't new. Like, in the eighties, we were building apps in this way. You know? Like, we had if you only look at, like, Java ESLint, for example, which I hope looks very much like the past of HTMX. I think the core at like, you know, again, there's 7
Guest 2
because it's kinda like Rails and that it's sort of a a a one stop shop that has everything that you need, but, I don't know. What do you what was your take on it? Did it look interesting? we have, like, infinite scroll can be implemented in those terms.
Scott Tolinski
more,
Guest 2
at this point, I would take a hard look at Django. I didn't pick Django for the book,
Scott Tolinski
through their entire API and a worker using a SQL lite, and everything's local on device, stack to work in?
Guest 2
And, I I I started, but it's not something I would do unless I was really pressed
Scott Tolinski
Yeah. How do you feel about web components?
Guest 2
in model object in model classes. I like object train. I I've got a bunch of my popular opinions. I like object train in programming.
Guest 2
Like, Java's got a ton of really good libraries. I know Java pretty well. If there was a good library in Java that did the thing that I wanted to do, I wouldn't be
Guest 2
But I I would probably,
Guest 2
And then, you know, there's also page, and then our book at hypermedia.systems, just trying this technique out where, used for, for AJAX
Scott Tolinski
all kinds of different stuff to work in HMX lately, whether it JS, like, gave me an opportunity to get my hands dirty with BUN, the JavaScript
Guest 2
mashups with HTMX. I can't say I support all of them because I don't understand
Guest 2
so I think it just depends. Just depends.
Guest 2
So I would probably lean that direction. A lot of it would be driven by exactly what I was trying to achieve. Like, But the ideas there are good, and they're interesting. And so I think you could take the ideas of solution for an ORM, and then you can kick out the SQL when you want.
Scott Tolinski
Cool. Yeah. I've been personally grabbing,
Scott Tolinski
in the JavaScript world. Like what?
Wes Bos
Like what? Like,
Scott Tolinski
I even saw somebody
Guest 2
Mhmm. Rather than at the application level, you've decoupled at the network architecture level.
Guest 2
in a a a a pretty dramatic way compared with, like, a generic JSON API. Wes actually argue that's a good thing, not because you can do better u UI with it, but just because you can do good enough UI.
Guest 2
your your general purpose data API be more generic I will recommend they look at Alpine JS. I don't know how much you guys have talked about Alpine JS.
Guest 2
And so that is a different style of decoupling, but it does give you this sort of, freedom to pick whatever back end you want in a way that you can't if you're, you know, more committed to, generalize that idea.
Scott Tolinski
it it is funny how the types of things that you lost by moving into this JavaScript
Transcript
Guest 2
got a a lot more attention than I was certainly used to,
Wes Bos
some of the stuff was valid, and some of the stuff was just like, oh, you act I don't think that you totally understand how it works. So, hopefully, we're gonna clarify all of that. Yeah. Totally.
Guest 2
And it's kinda it's it's been that can't be writing for since about July. It was really good. I got very lucky because I released a book, like, you know, at the end in at the end of middle and end of July
Scott Tolinski
to reveal all of those bugs and why they happen so that way you can go solve them. So if you want
Wes Bos
understand
Guest 2
It's going pretty well. A little crazy. Things have been crazy since, last July in HTMX land.
Guest 2
did a short on it. And so there's been a sort of a huge amount of attention.
Scott Tolinski
man himself and talk all about
Scott Tolinski
from Denver. With me, as always, is Wes Bos. What's up, Wes? Hey.
Scott Tolinski
that you all have been asking about since our 1st okay. So what what come you could think of the closest analogy, and this is not even in JavaScript, but in PHP, like a Laravel system. Right? You you get, like
Scott Tolinski
And, also, if you're asking questions of your Node, like, hey. Why did this bug happen? Maybe you want to have a tool like Sentry on your side
Scott Tolinski
pick the brain of the hypermedia
Scott Tolinski
syntax. Sign up, and you'll get 2 months for free.
Guest 2
Yeah. I, so my name JS Carson Gross. I I run Big Sky Software, which is a Big Sky Dot Software.
Scott Tolinski
On this Friday's supper club, we have Carson Gross here. We're gonna be talking all about which is one of the great things about us getting to do this show is that, you know, Wes and I, we get to try a bunch of different tools. We we don't have to necessarily
Scott Tolinski
to use a tool like that, head on over to century.i0forward/
Wes Bos
what's going on here and and hopefully clarify. Because, like, we had tons and tons of feedback from that show, and
Guest 2
I was I was sitting on a on a bucket at a at the Scott youth baseball championship.
Guest 2
last year, and so it really helped. Just a lot of things kinda came together at one time, so very lucky in that in that sense.
Scott Tolinski
Yeah. Was that the sort of catalyst for the It was.
Scott Tolinski
Welcome to Syntex.
Guest 2
Little overwhelming, but, you know, it's all good. It's fun.
Wes Bos
Not too much excited to have Carson on today to ask him all the questions that we have about HTMX and,
Scott Tolinski
We're gonna be able to It's really cool.
Scott Tolinski
everything, Yeah. Wes, I've noticed that, you know I mean, it's not anything new.
Scott Tolinski
HTMX.
Carson wants less tribalism and rhetoric around tools
Guest 2
I've been trying to deescalate. So it's tough because, you know, I I do joke a lot. And so I'm like, yeah. You know, everyone be nice. And then I post some, like, just outrageous meme, and it's like, wow.
Scott Tolinski
It's like a platypus pickle, the buffalo with the laser eyes and
Guest 2
Yep. The influencer. Wes try to have fun. Chill of the month. You know? HTML doesn't have much to say about local first. It's they're hypermedia controls. You can set up a a web worker, I believe,
Guest 2
You might as well have fun. You might not be successful. You might as well have fun.
Scott Tolinski
And I think that's such a wrong place to be in in life, their entire API in a worker. It was like a Go compiled the WASM
Guest 2
life or death situation.
Guest 2
model. It's it's it's more sophisticated in some ways. But I think that's like if HTMLX doesn't grab you because it's too simple or stupid or whatever, setup for, you know, me pretending like Microsoft Wes gonna buy out h t m x. I just got really lucky, h t m x because
Guest 2
I don't know what's going on.
Guest 2
And, so that's really interesting.
Guest 2
And, for some interactions.
Guest 2
Yeah. It it is. And then there's also swag.htmx.org
Scott Tolinski
I'm gonna continue to dive deep into this world, and,
Wes Bos
They also have an essays page. All these academics getting into
Guest 2
he came on the HTMX Not a HTMLX is it's like, you Node, in my mind, again, if you're talking about HTMLX, you're talking about HTML plus plus. And so
Scott Tolinski
And shameless plugs, is there anything you would like to plug? So you get
Scott Tolinski
So Yeah. The website's really cool too.
Scott Tolinski
But, you know, peep people are so tribal about their tools.
Scott Tolinski
sick picks I guess that goes into one of my questions, which was, like, what JS the the future of HTMLX
Guest 2
And, you know, the the ideas of hypermedia are interesting,
Guest 2
in general, I think it's, I think it's an interesting tool which you can learn pretty quickly, and there's some interesting ideas behind it. Don't feel like it's, like, Yeah. I've got it in my it's in a It's in a tab somewhere. I need to read it.
Guest 2
together is something called DataStar. And I believe the URL is datadashstar.dev,
Scott Tolinski
Love it. Cool. Well, thanks so much, Carson.
Guest 2
just from a technical standpoint. So I think, you know, you don't have to and I I you know, I can't tell I can't tell people who hate HDMX how to behave, but if Node, you know, if you if you like HDMX, I would ask that you be, you know, reasonably balanced in your promises around it. It's it's not a silver bullet, and software development's always hard regardless of, you know, whatever tool you pick. So, The academy is kind of its own thing. So, HTMX is maybe a better option because underestimated by most people too.
Scott Tolinski
and just keep an open mind about them. Okay. So now is the part of the show where we can get into
Scott Tolinski
deeply ingrain them into our personalities. We can talk to people like yourself and and really get a a good handle on, you know, what these things are good for and maybe where they're not appropriate. But, yeah, I think it's a good advice for anybody out there and not just fans of HDMX is that you don't gotta be tribal about your tools. You know? I think these tools all exist for reasons. Right? They all exist for a reason,
Guest 2
I do like the idea of of of de escalating the language, HTML JS focused on updating partial bits of HTML, requires that you distribute the license and copyright with it, which doesn't make a lot of sense in a JavaScript library.
Guest 2
that and it's kinda has a a mix of h t max and Alpine I had this Twitter account that still had a fair number. You know, for me, it was a lot. It was, like, you know, a couple 1,000 followers, which seemed like a big deal at the time.
Guest 2
I I'll see you online. Great. Well, hey. Thank you very much for having me on. I appreciate it. Thank you.
Scott Tolinski
and HTMX that we haven't haven't covered yet?
Scott Tolinski
to the show with a sick pick or a shameless plug?
Guest 2
We sold the the smallest version of that poster at cost because,
Scott Tolinski
Cool. Yeah. I've never heard of this. I think it's pretty new.
Guest 2
Discord and had a bunch of ideas around how to improve HTMX, and we basically were like, Node. Too complicated. Mhmm. Mhmm. So he did the right thing. He went off and did it himself. And so that's another approach to Scott of this hypermedia oriented, You Node? That that that library has a lot of locality,
Guest 2
but I, you know, I did like, somebody else is is on board with me. Yeah. There's there's another I'm sorry to keep referring to the essay's page, but there's another essay up there called locality of behavior,
Guest 2
HTMLX is a tool. I think it's a useful tool. I think people who are React developers could, you know, learn about it and find something useful in it and maybe find it useful for, like, an internal project or whatever. If they've just gotta get a button up that does a thing, maybe they don't need all that stuff.
Scott Tolinski
And their their tool that they find to be effective is apparently the only tool that can be effective.
Scott Tolinski
Yep.
Scott Tolinski
You know? But, This is something that I've it's been on my brain just a little bit. I don't I don't Node. You know, I haven't been doing too much local first you know, that kind of invalidates many of those those conversations because people just straight up
Guest 2
you know, tools in in Rails in particular that are just there that are really nice.
Guest 2
associated with it. And then another one that's a a smaller library hamstrung by not continuing to add features, hypermedia features in any event, as it made progress. And so I view HTMX as sort of like a an Scott not necessarily a return to,
Guest 2
Let's see. I'm gonna,
Wes Bos
web development.
Wes Bos
Yeah. We had Caleb on the on the show.
Guest 2
photo p, I think is what it's called, the ESLint,
Carson likes template fragments for locality
Guest 2
into service to to make local first happen. So I would say, you Node we say this in the essay on when to use hypermedia. If if local first is a must for you, then h t max is problem or hypermedia is probably not a good thing, and h t m max is probably not a good thing. So kind of response that people typically have? Yeah. I think, you know, I look at it like a more of a Hegelian And so, I don't think there's as much of a CPU and memory JS appear is apparently somewhat But, you know, one thing you mentioned, Scott, a little earlier was, because we had I I you know, I grew up in, like, on the forums in the in the late nineties and early 2000, and there was a lot of rough and tumble. And
Scott Tolinski
okay. Even just in line, this is a template here. This is a fragment here
Scott Tolinski
the way that I almost wish HTML
Guest 2
of the screen, but I still can see everything in one place.
Scott Tolinski
story in HTMX
Scott Tolinski
myself.
Scott Tolinski
given that there's so much server required?
Wes Bos
I'm so glad you said that because, like, I in the past, like, 2 months, I've brought up the fact that
Scott Tolinski
It was an interesting repo. Have you have you is it have you come across that? I just saw it for the first time today. Yeah. I saw it on Hacker News. I didn't dive into it too deeply,
Scott Tolinski
Yeah. It looked interesting because I think, specifically, it does kind of what we're talking about here, where in line with your HTML, you're able to define,
Scott Tolinski
was invented to be where you could have your own fragments and templates
Scott Tolinski
Object oriented
Scott Tolinski
like,
Scott Tolinski
Mhmm. In one specific file. And
Scott Tolinski
But is there anything there that h t m x can can do?
Wes Bos
and type where I want it to go like it was HTML,
Wes Bos
Am am I wrong? And I'm glad, finally,
Wes Bos
Svelte can't do
Guest 2
on it. But what that lets you do is it lets you have 1 page with your content in it. And then if you need to dynamically if I was doing, you know, an AI thing, I would probably I would definitely look at Python. If I was doing something that was, you know, maybe, reasons to pick it, but I I I don't like the idea that, like, you have to you have to pick it on the server side. And so that's that would be and even that even that's not a particularly informed criticism because, again, I've seen someone claiming they're they've been implementing,
Scott Tolinski
even as far as you could reference another HTML file, it it seems like kind of
Scott Tolinski
both in line or imported.
Guest 2
you can just tag some of the content But the API should not change.
Scott Tolinski
HTML.
Guest 2
And so I think template fragments are sort of a an example of an implementation where you get more Sanity. So you can just see, okay, on this page, this is what's going on. Cool. Alright. Move on with my life. I don't have to navigate
Scott Tolinski
first
Guest 2
And that that works really, really well with h t m x because then you can say, okay. You Node? Something like, if you're doing a poll, for example, you can say, okay. Just rerender just that bit you basically shouldn't synchronize state with the, server,
Guest 2
I I like about it is, like, in still sort of see everything in one place.
Guest 2
languages are picking that up as they see HDMX being adopted, and they they hopefully, they read that essay, when the HTMX does couple your front end to your back end,
Scott Tolinski
local
Guest 2
in that template and say, okay. I wanna be able to render this separately.
Scott Tolinski
Yeah. Is there any kind of What's up with the pickle?
Wes Bos
multiple components in a single file. Everyone's like, ah, just bring them ESLint another file. And and React Vercel components, if if it's a client component, you gotta put in another file. And I I've gone so far to try to, like, change my editor so that I can edit them in line, like, put a mini editor inside the Versus Node because, like, I I just wanna look at the whole thing
Scott Tolinski
I was just reading before this conversation, which is why it's on my brain. I have no idea if this is a valid approach or not or anything, but I thought it was kind of interesting.
Wes Bos
but a lot of these templating languages make it really tricky to do that type of thing. So and I was thinking the other day. I was like, am I wrong?
Scott Tolinski
navigate around so much. I saw an interesting thing today.
Guest 2
to handle Wes, and so you can you can just kinda intercept the network, hypermedia in terms that normal developers can Unfortunately, the hypermedia world can often be pretty academic. There's a lot of negativity in it as well, I've noticed. I don't know what it's, you know, but it it's whatever.
Carson has fun trolling on Twitter
Guest 2
and so forth. So that's for, like, a week. I did that I did that for about a week. And then, literally, like, this is just shows it's way better to be lucky than than good. I got an email from, like, the Microsoft
Guest 2
So, you know, there have been a couple of times whenever, you know, Node to set things up like that. But for the most part You know, beyond that, it's all just been, like, Bos.
Wes Bos
like like, props to you, but you're like a a number Node troll online,
Scott Tolinski
Okay. So we're about 50 minutes here.
Guest 2
credit card division
Guest 2
And, I was like, you know what? I'm just gonna have fun again because I can't I tried to be professional a little bit. I mean, you can go look at some of the you can look at intercoolerjs.org maybe go check out datastar.dev.
Guest 2
it's just me
Guest 2
and and I wanted to change the license of HTMX from Bos d 2 to b s d 0 because b s d two
Guest 2
And, and then the next day, I I just said, okay. It's Bos d Deno, and the the offer was the stupid credit card offer.
Wes Bos
Oh, that's great. That's good.
Guest 2
being be me being me.
Guest 2
I I think, on Friday or I I forget what it Wes. But I was like I I first of all, I made my account super professional looking. Like, I took out all the, you know, junk. I made my icon, like, normal and so on and so forth and just started being, like, really serious, JavaScript has made so much progress in the last 10 years. It was it was possible to do that in a way that worked across most of the major browsers.
Guest 2
React and Vue and
Guest 2
from Microsoft.
Guest 2
So that was probably the biggest setup I've done.
Guest 2
just me being creative. Like, the just having fun. And And there have been a couple of times when, like, I you know, I got lucky. Like, that whole Microsoft I guess, you know, my my book, Hypermedia Scott Systems, you can read it online for free. If you want to, you can pay for the Kindle version or, we sell a a hardcover version of it as well. The hardcover version I've heard has had some printing issues, So it's unfortunately, Amazon on Demand with the HMX, you're coupling your front end to your to your back end, and that's true. They're not wrong.
Guest 2
I have a very interesting offer from Microsoft. And I was just talking about that stupid credit card offer that I got.
Wes Bos
on Twitter, you're like, I don't got time to research what this is about. What's the background here? Yeah. I think someone had,
Wes Bos
Because
Wes Bos
Twitter account. And so much as to be whenever somebody talks about HD Max, they have to say, I know the Twitter account is a little bit much, but it's actually a pretty smart way to to build applications. So,
Guest 2
And, when I came back and did HDMX,
Guest 2
offering me a credit card with 10% off on Bed Bath and Beyond,
Scott Tolinski
Is there anything that you want to get across about Carson, how's it going, my man?
Guest 2
another open source rug pull coming incoming.
Wes Bos
So Can you tell the story about the the whole Microsoft thing? Because I I had caught parts of it, but I I could not piece every all the hilariousness together. And I was like, I'm not gonna you you know Wes you, like, see, like, a subtweet
Guest 2
troll online? Good troll online. How did I learn to I think shoot post is the word you're looking for there. Yeah.
Guest 2
freaked people out. And then I posted, I think, on Saturday or Sunday night, I I was like, okay. I have an inter I have a very interesting, you know? Well, at some point, I think you I hope Elon Musk actually takes the bait on one of my tweets, and that that'll be I'll probably delete my account after that.
Guest 2
And so Yeah. It it it just it just works. I don't know what to say about it. There's a lot of good vibe stuff on here like the, the platypickle.
Guest 2
all this other stuff. Like, at the very end, they were like, oh, and HDMAX.
Guest 2
and I did that, and it, you know, it just worked out. People you know, there's not a lot of strategy here. This is Berkeley Graphics, which is now, I think US Graphics, he changed his name. They they did an unbelievable job on the cover, and so we wanted to make that available to people if they want. Wow. There's a lot of silly stuff on swag I'm The joke is that, the the nice thing about Bozeman is, like, it's right next to Montana.
Wes Bos
A a lot we went as far to to title our episode, is HTMX a Node?
Guest 2
And, I'm gonna announce a license change tomorrow to guarantee the financial stability of HTMX going forward. You Node? I'm just trying to get people freaking out, you know, about, what's going on on a given page, Node you have to look in, like, 10 different places. Mhmm. It gets very difficult to Yeah. You Node? You have to keep a lot in your head to understand everything that's going on. And so, we the terminology we try to use around that is locality behavior. You wanna put the stuff, like, where it's being used as much as possible.
Wes Bos
how did you learn to be such a good,
Guest 2
And, with h t m x, I was kinda like, you know what? This is just this idea is dead anyways, so I'm just gonna have fun and run the Twitter account the way I want to. And, because your web app tends to be very churny and, like, you need lots of little features to or or whatever, and this can put a lot of if you have a generic JSON API that's serving that, then that API ends up
Wes Bos
Yes.
HTMX 2 maintains backwards compatibility
Guest 2
That's my Node, anyways.
Guest 2
2,
Guest 2
And, you Node, and, eventually, I I learned a bunch more about that and kinda and, you know, I think there's which is it was made by someone who came on the Dave Delaney, who came on the, And, that was based on some work that I had done internally at a Scott up for a friend,
Guest 2
but not not any major API changes. So most h t m x Node users should be able to upgrade to h t m x two without any any,
Guest 2
there you know, there's flaws. Like, there if I could take things back, I would, but we're not planning on breaking backwards compatibility in HTMX which I think HTMLX helps with.
Guest 2
very much at all. There's gonna be a couple of sort of corner cases we clean up a little bit, there. But I I did try to be a little bit more serious about things.
Wes Bos
Let's talk about the Twitter stuff.
Intercooler.js in 2013 originated concept, improving slow client-side table sorting
Guest 2
just because, human or Node any coordinating activities. Like, very often, the the value of the app is is on the back end. It's not in the front end. And in those types of applications,
Guest 2
This was a Rails app at the time, and, I was a little bit shocked by that. And so I started writing. I I I I I recognize that technique.
Guest 2
and, I just couldn't make it fast. I was trying to sort a table. There were a couple 1,000 rows in it and, browsers at the time. I'm sure now browsers can handle it without breaking a sweat.
Guest 2
I was using jQuery because in 2013, Like, all apart JS that in order to understand
Guest 2
jQuery had a few methods for for issuing a request and then Flask What's up with the pickle? Someone generated that pickle, and I took it and hacked it up a little bit in Photoshop or I use,
Guest 2
There's also something called Pjax, which is sort of an old Mhmm. Older take on this idea.
Guest 2
So there were some ideas floating around, and I, I I then saw Angular one and the let's see. What's another good example?
Guest 2
slamming the results into the DOM. And, I did that, and it was it was very fast.
Guest 2
And, I ended up, out of desperation,
Guest 2
and that eventually grew into Intercooler JS. So it came out of a performance, but at the end of the day, it was a performance issue. I wasn't super passionate about hypermedia You Node? Just, just, again, thanks for taking a look at it. And admittedly idiosyncratic that's just a consulting company that I run that supports my open source work for the most part. And then I teach my primary job is I teach at Montana State, which is where the primogen actually went for under his belt. Nice.
Guest 2
wrote a bunch of essays and, you've decoupled sort of at the network architecture layer. So you've d you've d you basically decoupled, like, a level down.
Guest 2
that you're doing. So, Java based remote app you know, using what I would consider a real remote protocol There's also some, like, frame sets. There's some ideas that,
Guest 2
where and, it's kind of funny, but I was trying to sort a table, and I was trying to do it client side because in 2013, all the cool kids were doing stuff client side and JavaScript.
Guest 2
everyone was using jQuery,
Scott Tolinski
Yeah. I remember Pjaxx first hitting the scene,
Guest 2
run times were not as good, and so it was very slow.
Guest 2
But at the time, the browser save a street that's obviously gonna be destroyed. And the the title says this is back end developers trying to prevent JavaScript from taking over the world.
Guest 2
Yeah. So the original HTMX was Intercooler. Js, which was released back in 2013.
Carson not very experienced with web components
Wes Bos
people are using? Are you are you and or or what are you reaching for?
Guest 2
and so forth on the server side.
Guest 2
thinking through how to integrate them. Like, there's so much focus in the components world on isolation,
Guest 2
but I just I'm not an expert on them, so I don't have a super strong opinion. I've just never I've never needed them. I've always
Wes Bos
And what are the big, like, templating engines that,
Guest 2
achieved sort of similar ideas by using,
Scott Tolinski
Yeah.
Guest 2
I don't think they did a good job of at the time. Mhmm. It was only after I released it that people pointed out to me, hey. You know, this is restful. This is, like, real rest. I don't know if we wanna get into that or not, but this is a you you know, the language I would use today is, like, this is a hypermedia oriented approach to web development between JSON and HTML as many people suspect.
Guest 2
but they're often you know, they're just times when you when you need to integrate. And so form participation and, you know, satisfy the people that need that. It gets the the chaos of your web app sort of out of the JSON API.
Guest 2
kinda, you know, H t m x 2 is gonna have better support for them. They, So that's that's the big idea there. It's, again, I think it's probably it sounds pretty simple, and it isn't super complicated Okay.
Guest 2
JS always has always been Yeah. I think one thing I've been saying this on most of the podcasts I've been going on lately is, I do,
Guest 2
the component and the rest of the DOM, has has hurt their adoption. That's but, again, I'm not an expert. That's just my my outsider opinion on it.
Guest 2
So Mhmm. And I think I think that that that the the firewall that kinda got in the heads of the designers, like, we have to have this, like, hard firewall between And so I've you know, I'm pretty familiar with that stuff, or at least I was. It's been a long time.
PJAX blew minds updating routes without full page loads
Scott Tolinski
Wes we
Guest 2
you know, and then building on some of these older ideas as well. And so I think there's a dialectic in play there. And so h t m x. H t m x isn't right for everything. There's a lot of apps that it doesn't it just won't work for. Yeah. And we have an essay up on that Wes to use when to use hypermedia.
Guest 2
or at least you're not building it in, you know, HTML based logic. Like, there's just too much going on there.
Scott Tolinski
I don't know if it's that people don't realize that you can do things like, you know, Oh, so you're out in Bozeman? yeah, it it's something that I personally been really enjoying working with. So,
Guest 2
It's not thin client, but hypermedia oriented,
Scott Tolinski
Do you have, like, a a a comment on on that,
Scott Tolinski
Yeah. And, you know, it it is something that I've been really paying attention to when I use various apps that I use day to day. Like, I I tweeted about this. It was, you know, like, how many of these things really need
Guest 2
It it it'll be useful for people that adopt it. But I think the idea is, like, the essays,
Guest 2
Vercel side.
Scott Tolinski
scrap want to create something like
Scott Tolinski
there it JS really way more capable.
Scott Tolinski
everything streams or Vercel and events or stuff like that. But
Scott Tolinski
went forwards to this, you know, client side and now SSR and hydration world or even resumability world.
Scott Tolinski
and it blowing my mind. Being like Yeah. Wait a second. We're doing a a a route here without a full page load.
Scott Tolinski
is why would we
Scott Tolinski
But the Node comment I I I tend to get so you have a templating syntax. You get scaffolding. You get,
Guest 2
But on the other hand, there's a lot of apps that probably could be built in pure HTML, Yeah. I think the future of HTMX looks very much like the present of HTMX, I like any template system that supports something that we call template fragments, Primogen picked it up and FireShip dev, version.
Wes Bos
it from, like, totally scrap out everything we've done and and done it from from the beginning. Like, do you think that we would have 90%
Guest 2
nascent form early on, like framesets and I like, you can target an iframe with a link. It's just that iframes kinda stink. They can't participate in the DOM. There were frames and there were frame sets, and and those have been deprecated to an extent. And so there there I think the ideas are kinda laying around, and, my hope is that HTMLX helps sort of spark those, That's one thing that, rerender a part of page rather than extracting that out and having another file to deal with that's somewhere else and you can't see, you shouldn't be a false dichotomist or whatever. Like, you know, sometimes one thing's the right choice and sometimes another thing's the right choice, and it just depends a lot on the context.
Guest 2
you know, an older model so much as it's a, the an HTML app is going to be less burdensome on the client because we're just first of all, we're just parsing HTML, which is done in, you know, c like, we're not we don't have a lot of heavy JavaScript logic.
Wes Bos
some declarative ways to do what we're doing,
Scott Tolinski
anything more than HTMX to do what they're doing? And
Guest 2
And so, you know, I think there's a there's, again, there's a dialectic here.
Scott Tolinski
And that it's a step backwards into, you know, old school Ajax.
Guest 2
I don't think you even need to scrap it and start fresh. I think that the ideas of h t I say this a lot. Like, HTMX is cool and, you know, it's it's not like it's a big library.
Guest 2
to the the reactive
Wes Bos
and
Guest 2
which you can read online for free. It just talks a lot about as the web server because it's just a little bit easier, I think, for nonexperts to pick up. And this gets at something that I I've been talking about on Twitter a little bit lately, which is there's so many of these things are context dependent. Like, you shouldn't be erratic in what it produces, but the cover is really cool, which is why you're buying the hardcover anyways.
Guest 2
But then, eventually, we realized, okay, this use the the user experience that we can produce with hypermedia isn't good enough, So we need to start moving towards JavaScript using 3 or 4 HTML attributes. And it's all done in terms of HTML so I think that there, you know, there is some truth to that, if you wanna go buy HTMX stuff, including there's a poster of the cover. So if you don't wanna pay $50 for the hardcover, you just want the you just want the cover for a poster.
Guest 2
So, you know, I think I just you Node? Oh, it's an endless cycle. I don't know. Mean, we're making progress. HDMX is better than p jacks in many ways, so we're making progress.
Wes Bos
to to run fetch and and get parts back? Do you think that, like, HTML might look like or sorry. HTML might look like HTML if we were to
Guest 2
thick rather than sort of reaching for a a thicker client side model.
Wes Bos
and
Guest 2
based applications, and that's fine. But then there was also you know, in my mind,
Wes Bos
done
Guest 2
rather than JSON.
Scott Tolinski
totally
Scott Tolinski
out
Guest 2
it has reactive aspects to it. There's a lot of infrastructure there.
Scott Tolinski
on repeat whenever I bring this up to people
Guest 2
So, you know, I think there's there's been more in back more back and forth, particularly if you step back than, probably appears to particularly younger web developers.
Scott Tolinski
Wow. This is this is crazy. Yeah. I could have an, I was building, like, an audio player on a site. And the fact that I could change routes and have that audio Scott restart like,
Guest 2
HDMAX kind of led to your gives you a lot of flexibility around that were there in Yeah. We're trying. I mean, I'm sure yeah. It's I'm trying to write actual academic papers on it, and we'll see.
Guest 2
Progress again as a hypermedia.
Guest 2
and very effectively if they were to start, you know, picking off some of the bigger ideas from HTMLX.
Guest 2
h t m x.org/essays Well, I worked in Ruby for a long time, and there's an awful lot of, and then I used it. I don't know, man.
Guest 2
where hypermedia was really running the show.
Wes Bos
scrap it and start fresh?
Guest 2
HTML just kind of Wes always, abstraction a little bit from that sense. And I've seen people do that,
Guest 2
Like, we we were all And, you know, I built I built apps like that. Initially, this is kind of ironic, but initially, I sort of rejected the web, and I built web,
Wes Bos
we've
Scott Tolinski
go backwards,
Guest 2
And then we moved to, And which is the ability to, you know, within a a bigger template, to call out a piece of that template and say, this is a separate piece of content that I wanna be able to render by itself.
HTMX attributes allow HTML elements to make requests and update DOM with returned HTML
Guest 2
And,
Scott Tolinski
you could see that they're really they underestimate it, like you said, and they underestimate what it's capable of, especially with in the fact that many of the times when we're doing a lot of this stuff, you know, deleting a row or or, like you said, searching, you're having to hit the database anyways. Right? You're having to make a server trip. So wild
Scott Tolinski
what Yarn we doing just ESLint JSON and then,
Guest 2
these controls, the things the things that do stuff inside the document itself.
Guest 2
Wes these days. And then that HTML is placed in the dom somehow.
Guest 2
and then tries to generalize that idea.
Guest 2
you know, full page refreshes and so forth. All the browsers have gotten better at that stuff. So website. There's some silly stuff is the model stuff, like, an active record and then all the callbacks, like, life cycle callbacks they have. Active record, I know our ORMs have a little bit of a bad name now, but I really like active record. It does a pretty good job of giving you the 80, 20 choices for for web development, in Google Sheets, you've got very fiddly interactions.
Guest 2
that let you trigger, an HTTP
Guest 2
And so h t HTMLX
Guest 2
request based on whatever event you'd like. And then that HTTP request is going to be, returning HTML rather than JSON, which is what's normally, For sure, So Oh, yeah. You know, SPAs can be done very well. I don't wanna say they can't. But on the other hand, I think you can build very good HTML Bos applications that don't overburden your server.
Scott Tolinski
Yeah. One thing that I've really noticed is that when when you bring up HTMX, people are so quick to say, well, you can't do x, y, and z with it. And I do think that one of the smartest things that you've you've done on the site is have this examples page. Because if people were to just take a quick glance at this examples page,
Guest 2
Scott what HDMX does is it takes those 2 ideas, forms and lengths,
Guest 2
So, Well, Not all interactions, but for some interactions. And so there's a network latency there to implement in, The original web HTML, it was amazing what we accomplished with HTML. You know? Like, the web apps that we were able to able to build, it just showed the power of, you know, the the network and because it was clunkier. And and a lot of people
Guest 2
And, this is surprisingly powerful 7 or 8 attributes. You can do quite a bit with it. So if listeners wanna go to h t m x x.org/examples, And to implement either. But, it's a surprisingly powerful idea.
Guest 2
basically just provides you there's, like, 7 or 8 core attributes you know, the the whole
Guest 2
just sort of stopped that there there are gonna be user experiences that are difficult to achieve in HTMX, that are easier to achieve in SPAs. On the other hand, what I would say is is your experience with SPAs universally good? Mhmm. Like, this this promise of performance we've gotten, I I would say, has not been achieved as broadly as many of the advocates for SPAs would suggest. It's it's hard to do. There's a lot of layers often between, like, the front end and the back end. It's you know, it can be difficult to figure out exactly what's happening. And, so that can lead to, you know, the the sort of famous, understood what I was doing a lot better, you know, over time. And, the HTMLX is basically a rewrite of Intercooler Wes where I pulled out the jQuery dependency
Guest 2
I think that hypermedia is
Scott Tolinski
you know, using JavaScript to distribute that? And and so I I think that's really powerful. I wanted to know, like, what was the the catalyst that made you
Guest 2
making progress GIF of, like, you know, an Yarn argument in favor of SPAs, and then it's just a spinning GIF. Right? way they use attributes. And and I thought to myself, well, I'll just use this this attribute idea, this custom attribute idea to to basically drive this little custom function that I've been using to do the same pattern, And, so someone retweeted that, and I was like, oh, okay. Let's we'll we'll have some fun with this. And, so I, like, I just I quote tweeted that and said, oh, this, inter I think I just said interesting. I tried to be, like, really mysterious about it. And then I started, like, finding people that were mentioning Microsoft positively and, like, quote tweeting them and saying interesting somewhat there was a job posted at Microsoft that mentioned the HTMX. That's what started it. And so there was a this job and it didn't even say, like, oh, you have to be an HDMAX expert. It was like you it was, you know, as a comma, like, after
Guest 2
And then when I say, those are to use some fancy terminology, those are what warp called hypermedia controls.
Guest 2
today because HTML has unfortunately
Guest 2
that let you like, you know, there. And so I got this stupid email from Bed Bath and Beyond I don't do I may start this summer doing some web development again, but I don't do a lot of day to day web development, where we talk about kind of exactly what you're the the the big idea of what you're talking about, which is you don't yeah. And this is a criticism I have of the idea that you should separate scripting and styling and HTML
HTMX is part of evolution of web dev, not backwards step
Guest 2
You update 1 cell in Node part of the screen, and then you've Scott update some other cell in another part of the screen, and that's all highly dependent on the formulas, and it's very difficult. Like, all you know, with There's an essay up on the HTMX website called 2 approaches to decoupling.
Guest 2
Yeah. Well, I don't know about React because I just to be honest, I don't have a ton of experience with it, so I don't know what it's good at.
Wes Bos
Yeah. What are some examples of apps that are,
Guest 2
But, you know, the one thing I've tried to point out to people is that the difference so okay.
Guest 2
And you're adding your value on the back end, and then you save a tremendous amount of complexity, hopefully. And then that, you know, that complexity that you save on your front end can be dumped into functionality on your back end instead where where there's more value to be found.
Scott Tolinski
to do more? I think that's a a comment I get a lot. You know, I've been talking a lot of HEMX ESLint the the Svelte Discords and stuff like that. And people say, well, that's putting a lot of that,
Guest 2
And similarly, I you know, another example that's given in that essay is something like Google Sheets would be difficult
Guest 2
The difference between rendering a JSON representation and rendering an HTML representation, And that that's kind of an obscure feature of template languages. More more templating I think if the situation is not that dire, and I I've seen a lot of people in the Go world, in that area. And so, you know, people, when they think about hypermedia, they think about clunky,
Guest 2
That's actually typically a good thing because it means your client can often perform more quickly.
Wes Bos
like, you you shouldn't build with with HD Max? Like, when should you
Scott Tolinski
And do you think that puts more of a
Guest 2
Wes dialect. Like, you know, it's a dialectic.
Scott Tolinski
more of a a load onto the server,
Scott Tolinski
resources now that you need onto the server rather than dumping it into the client.
Wes Bos
personally, do you think that you should reach for React or some sort of SPA framework?
Guest 2
tabular data, then HD max can be very effective. Like, if most of your value is being added on the server side rather than on these client side interactions, which is the case in a lot, like, ERP apps and, you know, any sort of app where you're coordinating
Guest 2
Yeah. I you know, I mean, there's some truth to that. Like, server side template reuse, like inclusion But obviously, I haven't used them very much myself.
Guest 2
Figma is something you're not building in HDMX.
Rendering HTML vs JSON not hugely different in resources
Guest 2
HTML JS actually more efficient in some ways than JSON because JSON repeats field names, right, unless you do, you know, something crazy, around HTMLX and just the web development in general.
Guest 2
per se. Like, we encourage scripting. We just say you should script in an an an a hypermedia friendly manner. Like, you shouldn't be doing
Guest 2
particularly if you have compression enabled, which you should, and partial bits of HTML can be very efficient to generate. They can actually be more efficient to generate than, like, a bunch of JSON API calls to to build a particular part of your UI. Mhmm. And what what about difficult and, it it lets you put attributes on it in HTML in a non hyper medium way. Now that's you know, I'm pragmatic about it. Like, there's gonna be times when you're just gonna do that, and it's fine. I'm not gonna hunt you down about it. It's fine. It's all good. We gotta get work done. Mhmm. But,
Guest 2
that is present in HTMX that might not be present in, you know, a a well tuned SPA application,
Guest 2
because a well tuned SPA application might do an optimistic update or whatever, you know, or might be able to do something entirely client side. Now that being said, there are tools available in HTML like the details element, for example Mhmm. That are there to support client side getting very complicated because of that. So you either have to introduce something like GraphQL or you have to create a bunch of specialized endpoints for your app or whatever.
Guest 2
interactivity. And HTMX is not against client side interactivity, they kinda suffer from what frames iframe suffer from. They're kinda ice they there's almost too much isolation.
Guest 2
is actually very low. Like, there's there's not a massive difference between the 2. And, so, like, you know, if you have tabular data, attributes.
Guest 2
transfer time difference And my hope is that that, you know, we're gonna drop IE support for Intu, so that'll let us clean up the implementation a little bit, use some more modern JavaScript features internally.
Guest 2
in your formatting.
Guest 2
And so, you know, that's the first thing that I'd say. But on the other hand, what HTMX does imply is a network request, I'm gonna recommend your listeners look at 2 pieces of technology.
HTMX not great for local-first
Guest 2
core, complained about, you know, web apps versus the thick apps they were used to. But web apps still kinda won, and the web still kinda won.
Scott Tolinski
Yeah. You you've mentioned h t m x 2, embedding a
Guest 2
The core abstractions of the library are are correct in as much as they implement what my idea of generalizing hypermedia controls is.
Scott Tolinski
look like given,
Scott Tolinski
its rise in popularity now?
Scott Tolinski
in this conversation.
HTMX is HTML plus plus, generalizing hypermedia controls like forms and links to handle AJAX requests
Wes Bos
developing what HTMX is? Actually, maybe let's step back 1 step further because people are probably tuning in to the 1st couple of minutes and being like, should I listen to the rest of this one?
Wes Bos
Right. What is HTML for anyone who hasn't heard of it?
Guest 2
you can see you can see Montana from Bozeman. So,
Scott Tolinski
Yeah. I get it.
Wes Bos
And, like, what led you to
Guest 2
Like,
Scott Tolinski
Yeah. Bozeman, Montana. Yeah. Yeah. I've been there a few times. Yeah. It's cool town.
Guest 2
Yeah. Yeah. It's a cool town. Don't move here, but it's a cool town.
Wes Bos
So So all of these HDMX ideas are, like, institutionalized
Wes Bos
at a a very high level?
Guest 2
I didn't I you know, I did not. I know people who taught him, though. There are people that are still there that he that he knows.
Wes Bos
So, funny connection there. Did you teach him?