Creator of HTMX Talks HTMX
Вставка
- Опубліковано 16 січ 2024
- Recorded live on twitch, GET IN
/ theprimeagen
Become a backend engineer. Its my favorite site
boot.dev/?promo=PRIMEYT
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-Kinesis
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/deeznuts - Наука та технологія
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!
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
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)
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.
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 UA-cam, which is tough.
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 UA-cam 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 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.
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.
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.
This is actually I think one of its greatest assets, it is not "all or nothing" and you can simplify just what you need.
What an amazing talk and QnA. Such a humble and inspiring person.
Thanks for this, Prime.
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.
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
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!
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.
This is perfect! I've been looking into HTMX for a bit now. This came at a great time!
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.
This is peak programming content
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!
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.
Your best vid yet. Amazing presentation by Carson and great interviewing and moderation by you. Very excited for the future of Htmx.
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.
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.
But nearby isn't "jumbled together". No decent builder has light switches, cement, tools, paint, etc all mixed together in one bag. Using your analogy, SoC in web development is much like organizing tools and materials to make building a wall more efficient. Also, as far as I understand it, the "concerns" part of SoC tends to refer more to the application's aspects - such as its structure, style, and behavior - rather than to a developer's individual concern like "getting a button to work."
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.
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.
Carson looks like HTMX and i love it.
This really amazing talk, specially the QA part. Looking forward more and more of those format whenever possible ❤️❤️❤️
Really great talk, I've been playing around with HTMX for a while now on a personal project (a ticketing system for tracking work using go, echo, templ and sqlite). It is actually a real joy to use once you get into it. I have a rich, complex, app with basically zero js apart from the HTMX include.
Gotta Love this stuff . The Interview, the venue , the Tech
Great presentation. Stuff like this should become part of the web standards.
Why isn't drag and drop?
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! 👏🏼👏🏼👏🏼
My man's working on his changeup grip, love it!
"Has anyone on this stream heard of HTMX?" HTMX mentioned!!!!!
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
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..
Nice presentation. I like how easy it is to implement lazy loading. I'll give it a try!
Good to see people doing big things from Montana!
Amazing talk and guest. Also good questions during Q&A section. Really enjoyed it
Thank you
HTML6 when?
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.
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.
Prime promised and prime delivered! Thank you for inviting him to the channel Prime!
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.
6:40 I think the rare tag also counts as a hypermedia control
Is that different than a textarea?
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.
Blessed to have learned how to program from him
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.
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.
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
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 !
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.
❤loved i
Came to get a grasp of it and watched the entire video
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)
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
Great talk and Q&A.... love it!
Man, I've been waiting for this video
as someone said in the chat, I'm already sold
Unless I’m mistaken, we were doing this in 2009
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 ❤
u are the man, thx 4 the presentation
Thanks for hosting this prime!
Thanks for this community service!
Awesome presentation. Thank you!
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.
Be cool to see more content like this. No set schedule but if anyone has a topic you think is interesting.
@27:33 - "Drag and drop is not part of the web" - maybe I'm misunderstanding this...the HTML Drag and Drop API is absolutely part of the web standards, and it was integrated within HTML5 in October 2014. Furthermore the "Drag and Drop API" was part of the specification for several years prior to this and was being implemented in browsers well before the formal standardization. Hence we have HTMLElement:drag, HTMLElement:dragend, HTMLElement:dragenter, etc - plus the DataTransfer, DataTransferItemList interfaces, etc
I should have said "Not part of HTML as HTML" in that you need to use javascript to access that functionality.
@@carsongross8543 Yes parts of it are only accessible via events, i.e. drop targets - but the basic draggable behaviour requires no javascript at all, e.g. foo. The same is true for Canvas, it is part of the HTML standard, but most of it is functionality is only available via scriptable rendering.
@@carsongross8543 Whist parts of it are only accessible via events, i.e. drop targets - the basic draggable behaviour requires no javascript at all, e.g. foo. The same is true for Canvas, it is part of the HTML standard, but most of it is functionality is only available via scriptable rendering.
Q&A is awesome!!! 🔥 I would love to have more 👌
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?
It's a useful thing, i hope it'll be default feature on next html release.
This was awesome! Please more content.
this is what I've been waiting for: HTMX hype!
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.
I have GRUB brain.
Bailing out, Good luck your on your own
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 can't wait to see you guys at Big Sky #BSDC2024
this gave me goosebumps
What a banger of a video Prime
Is it generally a good idea to render HTML for HTMX in a separate "microservice" or integrate the backend for HTMX frontend right into my main (monolith) backend?
You have pages that sends like MB before anything happends and here we have discussion about 10KB vs 14KB, love it.
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
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.
new channel idea: *The PrimeCast*
I'm already doing Blazor, if I can further get rid of JS with HTMX I'm all for it!
This dude is so humble.
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.
Carson Gross. You should put some of his info/links in the description.
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?
awesome talk, REALLY VALUABLE!!!
HE IS THE GRUG DEV ?!
Sometimes I forget how professional Prime can be
It´s so good, it´s BANTASTIC!
THE MAN THE MYTH THE LEGEND
Best line: "I want to double click on something."
HTMX mentioned, let's go!
Carson mentioned some htmx-like, potentially in Typescript, that compiled down to less than 10k. But my search-foo is weak and I was not able to find it. Anyone have a link?
Like a library similar to htmx? Maybe unpoly.js?
@@jhuyt- No, I know about that one, so I would have recognised the name if Carson mentioned it.
Back at my desk and looked through the video transcript. Around 36:50 Carson talks about a differnt implementation. It is called "Datastar", which I assume is delaneyj/datastar on Github. Looks very interesting!
@@jhuyt-He mentioned BetaStar. I couldn't find it either.
That's my library "data" - "star" dot "dev"
This is why i advise moving into management if you care about your learning trajectory. Massive regression to 15 years ago here
May I ask, since what I understood from the presentation; to put it bluntly HTMX is controller infrastructure which controls the output of the html by injecting it at runtime. How this differs from Java based JSF system (Jakarta Servlet Faces) which is SSR infrastructure?
I love this. Also … (immature coming up) listen to 29:00-29:07 with no context …. lol … love you prime
Anti javascript lib writed in javascript
Pair HTMX with something like Bootstrap that has more HTMX based widgets - and you have a very solid framework.
Bootstrap yes! Advanced UI
Is it possible to have debouncing with active-search?
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.