HTMX: 3 IRL Use Cases

Recorded live on twitch, GET IN
/ theprimeagen
Reviewed article: www.bitecode.dev/p/3-irl-use-...
MY MAIN YT CHANNEL: Has well edited engineering videos
/ theprimeagen
Discord
/ discord
Have something for me to read or react to?: / theprimeagenreact
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

[@aleksandrvershinin952]

this's guys attitude in the topic feels so calming and natural. No dogma no selling points no hot takes and hot techs. Just build smth with simple tech in team of two. Feels like 90s-00s vibe :)

[@shaftymaze]

It's so great and fast to poc with fast API. Js lol. Why would I submit myself to that crap?

[@purewantfun]

@@shaftymaze I've literally regained my will to build web stuff thanks to htmx. Currently using it to rewrite an entire website and together with the view transition API it looks and feels far superior to anything I could've done in a JS framework in the same amount of time.

[@tiagoinaba2450]

whats dogma

[@LtdJorge]

@@tiagoinaba2450 dogma deez n… wait no

[@jonforhan9196]

@@tiagoinaba2450it’s like sugma

[@kilo.ironblossom]

At this point I started to think JS is the greatest technical debt ever created.

[@der6409]

Honestly I sometimes feel like the JS people are under some kind of mass psychosis forcing them to use the same tool for every problem regardless of how well it fits.

[@kilo.ironblossom]

@@der6409 Indeed. They are. Sadly 😔

[@cat-.-]

at this point js is just another server side language. yes they forced it at first, but now how is it different from 60 other server side languages.

[@deiminator2]

@@cat-.- It's different because it's bad compared to rust

[@tim.martin]

IRL I deployed htmx + Fastapi in school; all the teachers use it to report students leaving the classroom (usually to vape). As a result the principal has a large collection of vapes.

[@hk.32]

Tim this is why you don't get invited to parties.

[@LtdJorge]

On the one hand, a chad for implementing that on your own; on the other hand, a rat for implementing a snitching system (although fuck them vapers).

[@josefaguilar2955]

I used to think there was something wrong with my thinking which is why my solutions always ended up so simple. I then realized, its all of web dev thats wrong.

[@katrinabryce]

Absolutely not. Simple solutions are the best.

[@user-sv3dc5nz8w]

Probably you reached your zen. It doesn't mean the web dev is wrong. It may perfectly fit the devs who're still on their way to nirvana. You can write your own damn "capitalize" now!

[@legion_prex3650]

most of web devs make a fuzz out of anything. everything has to be super scalable like FB, must be super asynchronously, must be multi threaded,. Oh, you need a fancy new Frontend-Framework for your 20 customer site as well and a Docker Setup of course, and yeah, without Kubernetes, forget it! It's ridicicolous.

[@Tennyson999]

i gave up on webdev after an internship and having to deal with horrible react code and went into networking and now cloud/infra engineering. pretty happy now but kinda have an itch for htmx

[@JeremyKolassa]

"Everything you do is simple. YOU make it complicated." 100% fair and justified.

[@Sam-qn4ly]

>refused to learn git basics this is 9/10 developers

[@urbaniv]

After I've seen the htmx video with the French guy I had to try it out. It's so great, logical, straight forward. Can't wait to try it out with in a next customer project; pretty sure I never going to look back

[@x--.]

I haven't had to do web dev since like 2015 and I had to do some help with this React site and I just about lost my mind trying to understand what the heck was going on. I'm down to try this out.

[@DryBones111]

I just wanna pop this here in case it inspires anyone. Astro + HTMX is beautiful. Astro works great for making hybrid sites, so you can make a bunch of static pages and then your few complex flows can be SSR + HTMX. I'm lovin it.

[@JohnFallot]

Another day, another great video from the coding world’s version of Gilbert Gottfried.

[@natekidwell]

RIP to the goat

[@HaraldEngels]

I am developing websites since 1996. There was a time where you would have gotten fired when you dared to implement JavaScript on a professional website - JS was considered being evil. The sentiment has clearly changed but what I noticed is that many websites are nowadays sluggish, unresponsive or do not load at all. That never happened before the fat JS-client rush started. HTMX brings a good portion of sanity back to the web. The whole hypermedia concept is still valid and makes sense in combination with HTMX. When you pair it with Alpine JS and Tailwind CSS your front-end development stack becomes ridiculously simple, reliable and you can focus on writing HTML and server-side code.

[@CristianMolina]

Very nice article & video, thx!

[@Fleebee.]

I don’t have the attention span to read this stuff . Prime reading and adding perspective is accelerating my learning

[@ThePrimeTimeagen]

that is the goal!

[@katrinabryce]

Viola - a large violin 🎻 Voilà - French for there

[@homelessrobot]

Raviola - a delicious pastry

[@Tony-dp1rl]

At the end of the day, whatever framework lets you write the LEAST new code, but still meets your performance, security, and testing requirements, is likely the right one to use.

[@Comeyd]

Rust, Maud, Poem Open API, and HTMX come pretty damn close… With the power of Rust macros for templates and repetitive code… it’s absolutely silly how little code you write for the level of functionality and performance you get. You can get a very good basic web app in around 1,000 lines of Rust… which after macro expansion turns into quite a bit more than that… but you really don’t need to “write” much for what you get! And best part… even with fully dynamic page generation, and all sorts of nifty interactivity because of HTMX… the server can still handle over 100,000 requests per second. All out of a single, statically linked, binary around 15MB in size. Stick it in an Aline Linux container and you’ve got all of that in less than 20MB binary size, and very little RAM use at runtime, even under heavy load… During testing I only used 1.5GB while serving 140,000 requests/second. It’s amazing how much further you go with *less* than trying to use stupidly over complicated JS frameworks that are slower than frozen molasses in comparison!

[@rickwoods5274]

3:10 I was out of software between 2012 and 2017, and webdev completely transformed (not in a good way imo) during that period and I basically had exactly the opposite of this experience. I wanted to keep doing it the way I had done it before 2012, but no company was doing it that way anymore

[@redpillsatori3020]

Yeah my feeling exactly. I was thinking the other day that I almost wish we could just ditch all these frameworks and libraries and go back to Ajax with Vanilla JS/HTML/CSS (and HTMX). Though, I've been learning Vue.js lately and really digging it

[@3borsresistance551]

If you were in the right country, I'd probably hire you for that statement. After 30 years I'm on the other side of hiring and frustrated with all the "You need Angular to build a website, what is HTML?" and "I don't use Javascript. React is way better." people. Never understood the framework hype - unix tools like grep are great because they try to do perfect doing exactly one thing, instead of f*ing up 100s of things.

[@arcrad]

​@@redpillsatori3020HTMX might be of interest to you

[@fltfathin]

Mainly because companies refuse to just separate web and webapp. React and co is good for webapp but for mostly static website jquery works if you have non full html responding server and just replace innerhtml like htmx does. Also different solution solve different optimization problem

[@oleg4966]

15:00 That is the best 10-second sales pitch for HTMX I've heard. I always thought it was kinda inefficient to query the server for every little thing, but... yeah, sanity-checking logic in two places at once is worse.

[@cassell1253]

honestly after hearing you talk about htmx i started using it in my projects. i only really know python i dabble in some other stuff but im working on learning frontend and i thought id learn some htmx instead of react and honestly took my basic flask site to look clean and snappy and feels good

[@Daniikk1012]

Okay, I have to ask at this point, WHY does Prime always select everything BUT the first and the last characters whenever he highlights text in articles? He goes out of his way to unselect a character too, it's not just by accident

[@cryptogenik]

Thanks for bringing this article to my attention, and even reading it to me in 2x speed 🤣🔥

[@chovbee]

The point made at 3:05 is actually so true. I learned web development between 2020 and 2021 and was taught the ways of React. Up until literally a few days ago when I started looking into GO + HTMX, if you had asked me to make a website without React or NextJS I would not know where to start. Even deploying applications that aren't built in a Javascript framework seems like an impossible task. Learning the big frameworks definitely got me a job fast, but it forced me to have to learn the way of the web backwards.

[@ArkhKGB]

Data table with pagination, column filters and sort feels way too easy with htmx + some vanilla js.

[@internetkite]

Thank you for the great content!

[@the_synack]

HTMX should be part of the next HTML standard

[@homelessrobot]

@5:20 while its not about 'the best way', its a good idea to avoid 'the worst way' if you can, because it is only very rarely actually the only way.

[@ybvb]

If you quit Netflix and your new work makes you happier -> Win. If you quit Netflix and your new work doesn't work out, Netflix will pay you more when you come back to them -> Win. If you don't quit Netflix and reject the other work, you'll never know what would have happened and if the new work blows up massively and you feel like you lost out on it, you'll regret it.

[@x--.]

Gotta keep the family in mind. If it's a startup and he is paid less and works more.... harder decision.

[@ybvb]

@@x--. I imagine he's doing a lot with KZbin and has some savings. But yeah if it's more hours, then family considerations make sense!

[@pkop4]

​@@ybvbhe did say he'd have more time to stream actually, so maybe less workload than Netflix

[@ybvb]

@@pkop4 good point

[@taylorkoepp3048]

I hope the HTMX guy appreciates your perpetual stanning.

[@GreyDeathVaccine]

Comment: "Crying in microservices" cracked me up 🤣

[@fanshaw]

/off-topic: Assembly is for wimps. When I was a lad, we would punch in pages and pages of hex digits from magazines. One person would read out the hex, the other would type.

[@saltycaramelenjoyer]

0:47 I do believe you apply it on top of the coconut oil, chief

[@jaysistar2711]

I think htmx just makes things slightly more convenient by templeting or serializing on the server side instead of the client side, but now is awkward to consume (since it's now html, which could change over time, not just the data) for non-web browser clients, such as native mobile apps and game engine apps. It doesn't even buy much convenience.

[@legion_prex3650]

I think, it's good for little projects or even big projects with little dynamic content. With Django and Templates, it IS conventient.

[@ArkhKGB]

Most backend frameworks can easily render html when they get an htmx header and json otherwise. Or a gateway can handle that.

[@jaysistar2711]

​@@ArkhKGBA gateway is just added cost. I had a gRPC gateway to add OpenAPI, and REST (...at least JSON over HTTP) to a server already able to do gRPC reflection and gRPC-Web. I took out the gateway, and my cost went down to 30% of the original. (That was with autoscaling for both the gRPC service (Rust) and the gateway (Go).)

[@909crime]

I wish i could make a couple of personal websites and make a living off of them

[@0ia]

Do it man. Work hard. Enjoy it. Realize your potential.

[@oleg4966]

I think the important part the author forgot to mention is that Mr. Nemesis doesn't make a living off the sites themselves, but makes a living off of something else that he sells through the sites. Consulting services, maybe.

[@rapzid3536]

HTMX: It's not the best choice, it's the...

[@tim.martin]

...very best choice

[@skyeplus]

What do you think about things like Elixir Phoenix, or similar servers-side rendering technologies, say in Haskell? I like it. Although, I'm still reflecting if it's a magic bullet. Obviously there are downsides too, like being "always online".

[@coced]

4:32, that mic drop tho

[@bloqDev]

Oh boi, you really like DHH

[@mareimorsy3182]

"DHH builds apps you can never dream of" ... this is hilarious 😂

[@laughingvampire7555]

If you learn Functional Programming first you don't get that issue with Object Oriented programming. The problem is OOP does something weird to your brain, traps it into a state that becomes difficult to do something else, OOP is just wrong, is the least useful of all paradigms, even Procedural Programming with C is superior to OO

[@DEVDerr]

Depends on what you exactly mean by "OOP" in this context. In terms of frontend development I see that people understand "OOP" in various of ways f.e class-based syntax vs. functional syntax, treating Components as an Objects and letting the framework to orchestrate them or weird mindset of always grouping common functionalities within a class (even if they can be a separated functions within one module file)

[@ea_naseer]

17:43 isn't that how LLMs work

[@jeremycoleman3282]

I think we need a java version of angular that compiles to wasm , then we will have pinnacled

[@jeremycoleman3282]

Actually, even better if it compiled to an xml ast, then compiled that to wasm at runtime. -10 years to human web tech, on par with webpack lets goo

[@dixztube]

Hmmmm I was thinking of doing this new project in htmx. I don’t know tho. Something just tells me trend

[@me1ch]

ORM, the part with Unit of Work, is pretty good for the write part of your model, especially if you have complex domain behavior modelled with objects. The loading and saving parts are taken care of there. For the read part, it depends on your use case. You may decide to load data into facade objects, or you might write SQL and chuck the data at a template, etc.

[@nerdy_dav]

I am that not-so-good-coder friend :D

[@tudogeo7061]

Congrats on being featured on this channel, you're now famous!

[@josegabrielgruber]

gut

[@Lestibournes]

I was taught that recursion is less efficient or that there's some limit to how much recursion you can have, so it's better to loop instead even when recursion is the more obvious solution.

[@Lemmy4555]

The rule is always true, those who backend development claim that frontend development is easy - is just some button that calls an API on click. While those who love frontend development claim that backend development is easy - is just querying a db and serve the data in an API. The truth is that both are very hard, only 1 out of 20 excelles at it and if you think they are easy it's just because of the Dunning-Kruger effect.

[@covle9180]

I just need an infinite amount of rocks. #xkcd

[@aleksandrvershinin952]

Oh, mister Primeagen, your last take about opinions is so true to me. I keep on thinking about it for last year from time to time. I feel like for some reason people think that every person MUST have opinion about EVERYTHING. Its OK to have opinion but is is also OK to not have opinion. I don't believe people having opinions about everything (or making opinions on the go) do really care about subject that much, because why even care, chose your side because you have to be on one side or another. Also, everything "objective" is usually overblown subjective.

[@x0z59]

this guy has no words of honor. In his recent video he bashed htmx now he does what again? haha!

[@FragmentJS]

Im Listening

[@md.mohaiminulislam9618]

in the npm/yarn/pnpm ecosystem, we expect a package to do something for us. same for wordpress, they look for a theme/plugin that can give you modal/pagination, cart etc. I was adding daisyui just to add modal in my practice project. This reliance on packages leads to using bad, bloated code, dependencies that aren't maintained properly.

[@glyphack]

Go work with them

[@samuelschwager]

Big Python = MS

[@RocketLR]

Im so tired of developing with python.. I want to learn React just so that I can develop without having to refresh the browser and wait for the loading to display the changes. Does anyone have a live server solution for python flask projects?

[@johnyewtube2286]

I read enabling debug mode on flask may help, idk I have not used flask before.

[@muharief3885]

for simple project, debug mode on might help reloading if changes detected on python code. But If the project becomes bigger now that auto reloading doesn't help you, bcose the start up might become slow and yu don't want reloaded everytime your code changes.

[@RocketLR]

Yeah debug mode just reloads the flask application but does not detect when i change the HTML code or JS parts. So every visual change has to be reloaded with clean cache. So even longer reload than regular reload :( SO sick of doing this. I learnt my lesson now. I will do most of the work in react. Then for some certain api endpoints i want to keep it python. Just wish i could wrap my head around react as easily. What CSS libraries is best? I started using Bulma because its free and seems simple enough. Documentation could be better though.

[@johnyewtube2286]

@@RocketLR oh that sucks

[@RohithCIS]

Checkout livereload.js I have been using it on my go projects. I see no reason why it shouldn't work with python

[@eboyd53]

Your statements at 3:16 are reversed for me. I started with functional programming and then all of a sudden all the rage came about OOP. LOL

[@adrianjim7830]

we all need KISS

[@Lestibournes]

Can't you get it to serve some beautiful animated UI thanks to css animations and transitions? And aren't there UI libraries for web that can be used within any framework or without any framework, such as material? So why would an HTMX app be inferior in any way to a React app?

[@pedrogorilla483]

The Python Industrial Complex sponsored this article.

[@felipedidio4698]

viola

[@realdaly]

I realized something, Theo reads faster and better than Prime :)

[@ghurammi]

I need HTMX for sanity

[@gngn2973]

I am the not-so-good-coder friend everyone needs.

[@MandatoryHashTags]

I am the not-so-good-coder friend lol.

[@alfred.clement]

He who injects HTML attributes, controls the behavior. He who controls the behavior, conquers the system. HTMX is a meme that just increases attack surface, please use it with poor sanitization so that I can continue doing my job.

[@demolazer]

Shitposting horse head language 😂

[@sirico]

I don't have a not so good coder friend....wait

[@DKLHensen]

Lol... is he a code-friend that is not a very good friend? Or is he your friend that is not good at coding? And how does he himself think about that statement? so many questions to answer. I will now continue watching the video, cya

[@huuhhhhhhh]

Probably heard it here first but if you take the view that coding is declaring intention to the next developer, then JS and 'specially React don't seem to be great. HTMX, in the context of this article, seem to do that much better.

[@mage3690]

It's viola: "vwa, la". Fr*nch is weird.

[@TheHackysack]

just... 3? :(

[@Jing0_]

Viola

[@osc3892]

I assume when he said sparkled he meant sprinkled

[@EVGizmo]

LOLOL about bad programmer living off his website

[@nega_smith]

This video is sponsored by Python

[@NotAFanMan88]

There's nothing that produces as much technical debt as using a javascript framework.

[@ea_naseer]

When the framework changes from v1 to v2 and the team is deciding whether v2 transition is even worth it. 5 versions later we are still on v1.

[@Kubamorlo]

older versions of PHP were probably even worse with stuff like require being littered all over the place

[@lolikpof]

Svelte vs HTMX if I'm only gonna learn one?

[@iCrimzon]

HTMX

[@samuelberton3778]

Svelte, because it might be here to stay. It's sponsored by Vercel after all.

[@punkweb]

Apples;oranges

[@chepossofare]

Both, HTMX is a matter of hours, Svelte some days and both can be useful.

[@GreyDeathVaccine]

@@samuelberton3778 LOL. intercooler.js (HTMX predecessor) appeared in 2014. Draw conclusions.

[@Cal97g]

PUT != PATCH

[@falven]

@ThePrimeTime 4:30 no, I think you oversimplify things. Try creating a Virtualized DataGrid with filtering, sorting, paging, searching using HTMX vs React + MUI. It will probably take you a month meanwhile I could do it in an hour... Let alone an entire DBMS frontend. You use the right tools for the right jobs, you don't try to force a low level simplistic worldview on every problem.

[@bionic_batman]

>Try creating a Virtualized DataGrid with filtering, sorting, paging, searching using HTMX vs React + MUI. It will probably take you a month Heh, didn't know that now this is considered to be a difficult problem. I did tons of them back in the days when React was not even a thing yet, with just PHP, HTML and some JQuery plugin Took like a couple of hours for each for 1 junior dev after the initial PHP boilerplate for handling Ajax actions was written. Honestly it is probably easier to write it on the backend because if you are doing it on the frontend with React you are either filtering and sorting huge amount of data in the browser (which is not the best idea) or still forced to implement some backend logic anyway.

[@bovfbovf]

First

[@jearsh]

you use a pixel? boomer

[@xali2008]

I prefer vanilla javascript over HTMX, you don't need a library to send requests to the server and update a DOM element. there's nothing you can't do with API's like querySelector or addEventListener.

[@DKLHensen]

Viola