Creator of HTMX Talks HTMX
HTML-код
- Опубликовано: 8 фев 2025
- Recorded live on twitch, GET IN
/ theprimeagen
Become a backend engineer. Its my favorite site
boot.dev/?prom...
This is also the best way to support me is to support yourself becoming a better backend engineer.
Reviewed article: / 1724324807268069732
By: Eduards Sizovs | / eduardsi
MY MAIN YT CHANNEL: Has well edited engineering videos
/ theprimeagen
Discord
/ discord
Have something for me to read or react to?: / theprimeagenreact
Kinesis Advantage 360: bit.ly/Prime-K...
Hey I am sponsored by Turso, an edge database. I think they are pretty neet. Give them a try for free and if you want you can get a decent amount off (the free tier is the best (better than planetscale or any other))
turso.tech/dee...
I would love to see Prime host more of these talks from third parties. like yeah conference talks are always something i look forward to, but having presentations like this outside of waiting for those events are super useful and so beneficial to the developer community
agreed
@@ThePrimeTimeagen By all means attack JS' supremacy, but don't couple data and presentation. You don't want to parse data from markup to show it on a native client, UI changes would be breaking. And if you were to use an API on the server-side, you'd just be doing on the back-end what you did in JS on the front-end: Turning serialized data into HTML. Unless you're using RPC perhaps. Should we be using RPC?
P.S. If memes are a part of your thinking process, your thinking process is objectively worse.
@@paxcoder"Look at me"
@@ThePhiloctopus I'm not sure whether you're saying you'll do it anyway, whether you're suggesting that I'm seeking attention, or whether it's a meme that I'm unfamiliar with.
A bit out of frame for you, PrimeTimeagen; and _I_ like it! Show those AI worshipers who's boss!
I love that a discussion about 10KB vs 14KB occurred. Meanwhile I’m sitting here looking at “my” enterprise app with megabytes upon megabytes.
I kinda wanted to start with leptos, but once I saw the default release build at 400k I got turned off a bit. Playing with htmx now! The way page loading can be done is very similar to what I used to do with PHP and jQuery a decade ago, but obviously didn't have the other features that htmx does have. (Just a Query param to not render etc. for replaces)
We have a react mono repo with a nice lib of components and utilities to reuse. Handy, right? Well yes. It also takes me longer to setup a new micro-frontend than it does for me to just build the entire tool I was setting the project up for in htmx and go.
How 10kb still matter, when React on Contentstack made my browser consume 3GB of my memory ?
Prime really brings programming contents to a whole new level
Amazing that he managed to get the Internet’s most reasonable man to present.
@@Kane0123 *Web's
You know that there's infinitely low and negative levels also, right? But they're crowded, so he may be trying his very best to avoid that space.
When I started working in software, React always was the silver bullet for every frontend project. I always liked to follow the latest tech trends and I also remember looking down on the engineers who interviewed me for a job which wanted to keep the frontend light without the latest and greatest tech. I have worked with React for years and when I started working in a startup as the only dev, there was no reason not to pick React again. I watch a lot of dev stuff on RUclips and Prime is one of my favourite channels, when he started talking about HTMX I was first sceptical, but after copying so much business logic from the backend into my frontend it sort of made the case for HTMX and gave it a try. Within a day it clicked and rebuild everything using HTMX. Since I now only have to change one code base, my productivity increased by at least 100%, also you don't have to think about how you design your API anymore.
Prime and Carson, thanks for bringing me more joy to my work ❤
I worked on the web first when I started programming, then got hired as a desktop app guy. I moved more to backend work and started working and using SPAs and I found the experience awful and have struggled to force myself to learn it. Why do I have so much stuff to make a web page for a medical form? When web pack started breaking, I knew frontend was truly off the deep end. 30k line package lock files in PRs? This is a joke.
Htmx is reminding people why HATEOAS matters and the large tech companies who made big investments in all of this unnecessary Javascript infra should be worried. We all kind of deserve it though for not appreciating these hard to understand but important concepts that were created in the 70s and 80s.
Thanks React! Thanks Facebook!
Will it replace frameworks such as Angular and React in your opinion?
@@raishw6483 I think that, like everything else, there will be people that 'get it' and want to use it, and people that don't.
@@raishw6483no. Web apps written in react and angular are backed by a json REST API unlike HTMX.
So this man is the CEO of HTMX
we all are the CEO of HTMX my friend
Who cares - I'm the CEO of my parents basement.
yes, we both are
are you hiring? @@theoriginalneckbeard
the correct title is actually CXOJDSL
thanks for having him on, prime. i haven't watched a conference talk in a while, and I hope you host more of these in the future.
What an amazing talk and QnA. Such a humble and inspiring person.
Thanks for this, Prime.
debounce input being built into the trigger on active search is absolutely nuts. its the pure "you dont need to write JavaScript". Looks really nice!
This was a great watch. I want to add one point to question about caching responses on SPAs vs hypermedia application. Hypermedia already has caching, and it's damn good: the Cache-Control header. Consider the data view example Carson provided. If an element is expensive to generate, you can use "max-age", "must-revalidate", and potentially "public" to only re-compute the element when needed instead of on each request, essentially implementing what Vercel sells as "incremental static regeneration" at the component level in only a few lines of web standard code. Paired with HTMX lazy loading, both your client and your server will be happy.
I see htmx I click. This guy comes from the 90s. Best era for programmers.
Curious. Why do you consider it the best era?
@@vitola1111 There was no detachment between the computer architecture and the algorithms running on it
@@simonegiuliani4913 So people coding in smalltalk or turbo pascal were looking at the resulting op codes created?
@@simonegiuliani4913What does that mean? How is computer architecture related to algorithms? Computer architecture haven't changed much and algorithms are unrelated to them.
@@bobweiram6321 it means that in the 90s knowing how to write html made u a programmer and now u have to know shit and thats fkd up and annoying
This is perfect! I've been looking into HTMX for a bit now. This came at a great time!
This is peak programming content
The good thing about HTMX is that you don't have to make everything HTMX. You can just pop it in, do the thing you need it to do and basically just forget it exists. You don't need everything to be made with it just to make it worth using.
Maybe you don't have heavy page loads so just redirecting with full page loads is fine, but you have this one thing you want to reload, update or whatever without reloading and it has little logic built into what it actually does; perfect for HTMX.
People need to be less afraid of just doing basic stuff. Most of us aren't solving difficult problems. We just made things difficult.
YES! I kept saying that you use very little of HTMX. but when it does, it unblocks so much technical issue that may takes few hundreds lines of JS code.
I have project that in total I uses HTMX exactly 12 times, but doing that I got:
- Infinite Scroll Pagination
- Active Search in TWO different places
- Server-Rendered Markdown -> HTML
- Self-made OAuth2 Login
What is the overhead for including htmx in your project?
wow nvm, just looked. tiny.
@@mattpickel223 A single file to include, 15kb roughly. So very little overhead to speak of.
@@FraserChapman Yeah, there's still loads of room for more complex JavaScript solutions, but they can be much more contained and you can keep things a lot slimmer. HTMX combined with Solid or Svelte is something I imagine could be fairly popular because of their relatively small size.
Your best vid yet. Amazing presentation by Carson and great interviewing and moderation by you. Very excited for the future of Htmx.
I built `html-form` which is 2.2 kB minified/gzipped. It doesn't do all that HTMX does though, only a fraction. It also relies on forms for interactivity so not everything is interactive like HTMX. I've successfully used it to create offline-first applications that are SPAs (to make it an SPA a little bit of code is needed to add to it).
It's really amazing how much this pattern simplifies web development.
For whatever reason, when I first started learning web development, Laravel + Blade templating was the framework that really started to make sense. I just couldn't grok React at all. A few years later, Livewire allowed me to make more reactive interfaces. So all this HTMX stuff just totally makes sense to me.
Yeah, I find React to be confusing also. Partly because it inverts everything and components make it so you have to learn HTML and whatever abstractions were made on top of it. Abstractions aren't bad, but it seems like they over do it.
@@dovh49 I feel like at some point abstractions on abstractions on abstractions gets to an unhealthy point where you arent even meant to know how anything works at any level. They want you to learn so you're stuck with them and whatever cloud stack they are selling.
Finally found my pack, htmx to the rescue 😅
@@dovh49 you still have to learn html lol
Wow, that was great! Thx for making this interview happen prime! And also clap 👏 for Carson, you are amazing and the presentation as well as the Q&A were solid!
Gotta Love this stuff . The Interview, the venue , the Tech
Prime should start a netflix for programmers
But not host it on Netflix. They only let me watch in 480p or ultra low bitrate 720p. They send me back to 2005 for the low price of $10/month
LOL just stop making Kevin Hart movies. Save the stock holders billions.
@@spicynoodle7419it’s your own fault, just don’t be slow. Should’ve installed nodejs since it’s non-blocking and therefore very fast
@@youtubeenjoyer1743 I'm not slow, WideVine doesn't like Linux
livecoding tv was a thing but I guess it wasn't that successful because they changed it up completely to live edu, also Twitch allowed non-gaming content at some point. Anything on-demand has to compete with RUclips, which is tough.
From a guy who used jQuery for a long time in the past, i like what HTMX offer.
Simple DOM Manipulations, simple reactivity, backend-driven for business logic and state.
And if you need more, you can always add JS back where it's needed.
I'm still skeptical about the evolution/maintenance of the code in bigger apps.
For those who used jQuery, we all know how it's a nightmare to debug..
Knowing which trigger is doing what, especially if the files are everywhere with broad selectors...
It's an event base reactivity model with triggers left and right.
It's the whole Choreography vs Orchestration "debate".
Do you want decentralize or centralize event handlers ?
I'm not a huge fan of Choreography since you don't easily know what are the impacts.
Maybe it's just a question of architecture and tooling..
I'm gonna try to play around with it and make an actual app and not just small demo that don't really show the draw-backs.
Exactly. HTMX is cleaner than jquery because its really a “click here and inject what is coming back into this div thing”. And when you think about it, the web works like this. One request at a time. The server renders most of the app and sends that back. What Jquery did back in the day, it did it well. Nowadays, pure JS is very close to the simplicity of jquery, and the way htmx extends html, makes sense, so i see some parallel’s here. That being said, a couple of events and the use of fetch calls can do what htmx does. Its just not that comfortable as what htmx comes with. Convenience.
The beauty is that those patterns are well defined and use cases have been documented and talked about ad nauseum for decades. HTMX has escape hatches to the Javascript API and tie ins to htmx events. This allows you to fall back on old wisdom instead of prescriptive frameworks.
Generalized hypermedia is a great and beautiful idea! Htmx should be part of all browsers.
i was thinking this library will kill itself. It's so good, simple and obvious it should be a standard not a library.
It should have been implemented in browsers at least a decade ago, strong agreement here.
My man's working on his changeup grip, love it!
Great presentation. Stuff like this should become part of the web standards.
Why isn't drag and drop?
Prime promised and prime delivered! Thank you for inviting him to the channel Prime!
Good to see people doing big things from Montana!
Amazing! Thx Prime for this opportunity to hear the creator bring his idea! HTMX is here to stay for sure!
Since you're going to Laracon, would you be able to do a review of the PHP Slim framework? I'm kind of sure you'll like that a lot better than Laravel, especially since they seem to have dropped Lumen..
Carson looks like HTMX and i love it.
I get to teach htmx to my class for school. This is very well timed.
wow this is wild, htmx in school, let's go
@@peterszarvas94 it’s a research project where we have to learn a library, framework, or language then teach our classmates using a PPT, live demo, and guided exercise.
This is so cool. I'm planning on learning JavaScript soon and HTMX seems like a logical step to learn after learning the foundations.
If you're shuffling your feet on it, this is your sign to start learning.
Carson’s presentation is a literal conversation of my thoughts on this matter into words. I don’t know why web development went down this strange path of complex frontend frameworks. Let’s all just get back to the very basics of how the web was originally designed to be built and work. I’m happy that htmx is gaining attention and hopefully it becomes more mainstream + this mindset about JavaScript.
9:13 Holly shoot! Just this brilliant introduction to the main generalization concept is amaizing! I feel like I can stop watching and just go and use it! 👏🏼👏🏼👏🏼
"Has anyone on this stream heard of HTMX?" HTMX mentioned!!!!!
I was actually tasked with supporting offline functionality of a relatively small React app, and it was not as easy as people seem to think it is. If you actually want to do optimistic mutations and persistent state even when offline, it takes a lot of extra work (and/or a bunch of dependencies). In cases where users mutate mostly their own information (the scenario i was in) its definitely doable. But supporting optimistic mutations with a bunch of shared data would be a nightmare of collision detection and resolution.
That being said, its probably easier to do in React than something like HTMX that prioritizes server side rendering over client logic. But it doesn't come for free in React like some people seem to think.
Blessed to have learned how to program from him
6:40 I think the rare tag also counts as a hypermedia control
Is that different than a textarea?
Nice presentation. I like how easy it is to implement lazy loading. I'll give it a try!
I think it'd be very nice, if he showed us his prduction project written in HTMX. He would be able to show some unique tips and tricks, because he knows it in and out, better than anyone. And it would be a better advertisement for his framework.
there are plenty of repos now.
i even will be creating a new project in the next few months with it
@@ThePrimeTimeagen that's cool, and I'm not arguing, but this man is the creator, he knows da way (TM). Can you ask him to show us some of that HTMX wisdom in a next vid?
He mentioned in the talk that he has written some books about htmx
@@Slashx92 yep, and he's published it on hypermedia (dot) systems
This really amazing talk, specially the QA part. Looking forward more and more of those format whenever possible ❤️❤️❤️
I love that HTMX just works. After a few hours of experimenting I already have all the tools to build the frontend of my project.
Is the project online for the general public ? I am eager to try something myself.
Amazing talk and guest. Also good questions during Q&A section. Really enjoyed it
Thank you
as someone said in the chat, I'm already sold
God damn. This is earth shattering. I need to branch out from js now or I'll be in a cardboard box in 5 years
Thanks for hosting this prime!
I have never understood that "Separation Of Concerns" thing in the web world. If my concern is getting a button to work I want everything I need to understand it to hand, shall we say locally. I don't want bits of that concern splattered all over a huge directory structure and impossible to find. By analogy when I'm building a wall I want all the tools and materials nearby so that I can get on with that wall rather than endlessly running around the place trying to find hammers, nails, timbers, whatever.
It always seemed to me that when they said "Separation of Concerns" what they really meant was separation of implementation details depending on the technology rather than any regard for the actual concern. It's a misnomer.
Now I can kind of understand it if we recognise styling a button may depend on some global style and be best done by a page designer with an eye for style. There is the mechanical concern, HTML and JS, and there is the decoration concern, CSS.
I'm so glad to hear someone also has a problem with this.
It’s actually easy to explain.
People back then used Dreamweaver, and the idea behind SoC was that at some point a better tool would pop out, something not too different from figma, and the designer would autogenerate the html and css, leaving developers only to work with the actual logic.
Part of the problem is that there’s multiple ways of doing one thing in html, and choosing which one to use might impact how complex certain stuff is, not to mention markup and logic are heavily codependent.
The other part is that the jobs on the web ecosystem fractured further with things like Wordpress, when aside from the coder and the designer, now there’s users acting as writers, editors, etc…
@@theondono I guess so. I missed the Dreamweaver time. I try to avoid web dev as much as possible. It seems like a swamp to me. I'm amazed it works as well as it does given all the wobbly standards and tools they get to use.
yes, and if you have tailwind, you have all the pieces in one place
@@peterszarvas94 "tailwind"? What's that? Where did that come from? Seems like only yesterday I did my last web work. Bootstrap was all the rage.
@@FraserChapman Yeah, well, all analogies break down if you look at them sideways.
I just love that both of these dudes live in rural environments. I would love for Prime to focus on elaborating on that and exploring how many other people are in that culture.
Htmx is the best thing that happened to me as a frontend tech hater. Django projects are much better with htmx.
This is cool. Very smart of him to look at html and reduce it to some simple general concepts, requires quite some experience and talent.
Well said. It takes a lot of XP to simplify
to decrease the size of htmx they could do something like tailwind, parse all the files to look for the used attributes and produce an output that includes only what's been scraped + what the user manually declare to use with some configuration.
As the creator of htmx comments, the entire library is in the same file, and that makes it difficult to decouple, it would be necessary to develop a system of modules for htmx.
@@csnzlatino no you just have to generate the bundle after parsing the source code. It's technically possible, just extremely hard.
generating js is harder than generating css. also, react and next js is like 150KB, i think 13KB for htmx is good enough
❤loved i
Came to get a grasp of it and watched the entire video
The fact that javascript became such a huge thing in controlling the dom. It's nice to see the events, controls and behaviours that are really just simple bindings moving to the html/dom side.
41:30 - imho the use of optimistic updates does not make the app less dependent on the server, it just gives the illusion something is happening while we wait for the server to come through (in a lot of cases).
At least with htmx it seems that what the client sees is in fact server state, while with optimistic updates, depending on how they're implemented, it might not be the case.
(Carson mentions this later with the subway example)
The bright future:
1. htmx become much more popular than react
2. htmx is included by default on all navigator
3. hypermedia systems is the new standard
4. HTML 7 makes all tags hypermedias
5. JavaScript is the new COBOL
46:42
Locality of Behavior sounds like it is pretty different from separation of concerns, but I do not think they're totally exclusive. They're overlapping slightly in that both of these acronyms are ideas about organizing code.
For example, you could group the markup, the scripting, and the styling for a button into one file (demonstrating a locality of behavior), this composes all the code involved in a single button while still providing a separation of concerns by keeping the different syntaxes together but separate from the code/style/markup of other elements in a different file.
The developer may pick and choose over the other based on how they've grouped other portions of the code as well, but a consistency in choosing one over the other, or both together is important.
HTMX is one of the few things that felt natural to me from the beginning when I knew nothing about it and just wanted to try it out.
u are the man, thx 4 the presentation
Unless I’m mistaken, we were doing this in 2009
THE MAN THE MYTH THE LEGEND
I love HTMX. Not sure why they chose to add hypermedia term, as it might muddy the conversation.
I think the offline / caching stuff could be solved with a service worker, to at least show the user something is not received.
This honestly feels like the next logical step in html we should have taken, but like 20 years ago. If these ideas were implemented in the HTML spec back then, it would have changed the way we view reactivity.
IMO they already did, albeit in an outdated manner, via .
Back then, we're limited by multiple factors (backend and frontend capabilities, bandwidth, cross-browser behavior uniformity). So previous solution to the problem () have limited capabilities in terms of interactivity (while ironically being less secure than XHR).
IIRC, up until HTML5, is the only textual element that carry special property of being embedded and interactive.
Not to mention that before jQuery, the idea of post-render content loading and client DOM manipulation is rather unorthodox, if not alien. Both Fetch API and DOM Query API are added long after jQuery's made them popular.
Man, I've been waiting for this video
I like HTMX. I like the idea of using backend tools and backend environmental stability to drive behavior on the page. But all of the "hypermedia limitations" and "why don't we expand beyond tags and tags?" and "do we have to replace the whole page" isn't really a thing in 2024. None of those are limitations of web development since AJAX, Google Maps, and Web 2.0. But you do have to use javascript, with all of the wibbly-wobbly language versions and browser idiosyncrasies and everything else that sets my teeth on edge about frontend development today.
I like HTMX. I think it solves an old problem in a new and useful way. But you gotta cut the first several minutes of your pitch completely out.
I’m starting to delve into creating a website with Django and wagtail. htmx fills nicely the functionality I needed for now. Thanks for the hypertext !
Great talk! I so enjoyed this discussion.
Reminds me when I wrote maybe 15 years ago (before backbone existed) a similair framework with jquery to allow automatically do ajax updates to dom by using special html attributes to tell where data from ajax call should go ❤
One thing I've been wondering about htmx: how do you avoid bugs from chained states?
For example, you press a button, it replaces some content, you click there, replace something else, but it only works when you're in that second state.
Maybe it's a difference between imperative vs declarative?
@@peterszarvas94 yes, exactly - the hypermedia you send back might rely on the rest of your markup being in a specific state. just thinking out loud, I wonder how you'd avoid this
I think your way of thinking about the web was just ahead of its time.
It took time for people to start coming to the same conclusions as you - The browser is a better user experience when you use it to render HTML instead of a heavy computation tool.
The partial fetch idea has been very appealing for some time now. Noone likes having to render, download and load entire huge pages with a gazillion queries.
What a banger of a video Prime
You have pages that sends like MB before anything happends and here we have discussion about 10KB vs 14KB, love it.
Thanks for this community service!
Carson Gross. You should put some of his info/links in the description.
HE IS THE GRUG DEV ?!
Great talk and content, there has been a lot said of how good htmx for making frontend 'thinner' and all about this 'one source of truth' that resides on the backend. I miss one thing and perhaps there could be some talk about it too - since we are moving a lot of stuff to the backend - what are special considerations for the backend code to make htmx apps 'blazingly fast' and sustainable for a long term? I imagine there are far more API endpoints on the backend to support those 'micro-calls' to the backend and return tiny-winy html bits so this would make backend more complex right? Are there good practices on how to prepare/setup/structure backend for htmx?
Great talk and Q&A.... love it!
Best line: "I want to double click on something."
htmx can be paired with s and anchor targets to work without javascript, at least the "get that html bit and place it there" part. It becomes a hydration language.
Why s instead of just dummy divs?
@@Slashx92 can you have anchors target divs? If you target an it effectively replaces the content without reloading the main page
Maybe I'm getting senile. Iframes are a security risk that is avoided. Popular extensions and other anti-virus softwares block the crap out of s. How do you use s?
this is what I've been waiting for: HTMX hype!
new channel idea: *The PrimeCast*
Q&A is awesome!!! 🔥 I would love to have more 👌
It's a useful thing, i hope it'll be default feature on next html release.
22:33 This part seems to be missed by a lot of aspiring HTMX users I've talked to. So many of them try to do everything in HTMX and refuse to write any JS, even when it's only good solution.
I have GRUB brain.
Bailing out, Good luck your on your own
What about a tailwind type approach to using HTMX to get it under 10K? Like some kind of build/transpile step that watches the templates and only includes HTMX code that is necessary in a project.
Yuck.
not really needed with htmx. tailwind does it, as the css file can get heavy, htmx is ~ 11 kb
That's my library "data" - "star" dot "dev"
Be cool to see more content like this. No set schedule but if anyone has a topic you think is interesting.
This is an interesting concept. Using his streamer platform as a mini conference of sorts. Unspoken hero's people just depend on never knowing their names, but at least with this guy, hes not fifteen dependencies down, instead he's your only JS dependency.
Sometimes I forget how professional Prime can be
HTMX mentioned, let's go!
This dude is so humble.
@ThePrimeTime i appreciate the stage given to diverse hosts for technologies up and coming, however it would be valuable in regards to comprehension to enhance the audio signal for the future, because frankly this ones suck and it's not easy to follow along, even with subtitles.
HTML6 when?
I'm already doing Blazor, if I can further get rid of JS with HTMX I'm all for it!
"22:38 Javascript was designed to be a light-weight programming language, we're letting it be what it should be, on the other side we're making a markup language responsible for logic, why not?"
so true
quick question: how do you feel about the href attribute
@@carsongross8543 HTML means "HyperText Markup Language" which by the name means a text-oriented language. I disagree with HTML having tags like forms and anchors. They should in my opinion use only Javascript, it creates yet another abstraction over fetch, while the web already had enough of it.
At this point, people are using both HTML and Javascript to add logic to the website which is obviously contrary to how the web was made to be.
The web was born with very clear and separated concepts.
- Styling (CSS)
- Interface definition (HTML)
- Event Handling (JS)
Nowadays people are using Tailwind which brings the Styling to HTML.
Nowadays people are using JSX which brings HTML to Javascript.
Nowadays people are using HTMX which brings Javascript to HTML.
Nowadays people are using Svelte which is another language that isn't either JS or HTML.
Obs: Svelte uses a templating system for HTML and the Javascript part of it is far away from how Javascript was supposed to look like.
HTML should never have a hyperlink as it's a hypertext language.
Javascript was thrown together at the last minute, not "designed"
@@ukyoize It was poorly designed.
@@ukyoizelet’s act like the js ecosystem of today is anything like it was 30 years ago. At this point compare birds with dinosaurs.
Awesome presentation. Thank you!
this gave me goosebumps
This is why i advise moving into management if you care about your learning trajectory. Massive regression to 15 years ago here
Shouldn't W3 look to standardize these concepts? Seems like these are straightforward additions that should be in html6.
This was awesome! Please more content.
awesome talk, REALLY VALUABLE!!!
I can't wait to see you guys at Big Sky #BSDC2024
Very smart dude... Love him