HTMX for Impatient Devs
ฝัง
- เผยแพร่เมื่อ 25 มิ.ย. 2024
- Ever wanted to write a web app without having to write any JavaScript? Yeah, me too!
You might be interested in HTMX, a JS library for creating server-first web apps using HTML attributes. Cool, eh?
Resources:
HTMX: htmx.org
__________________________________________
Check out my other socials!
🐦 Twitter ▶ / isaacharrisholt
🖥️ Portfolio ▶ ihh.dev
📝 Blog ▶ isaacharrisholt.com
__________________________________________
Timestamps:
00:00 - What is HTMX?
00:31 - Installation and setup
00:54 - AJAX requests
01:22 - Triggers
02:46 - Indicators
03:00 - Targets
03:21 - Swaps
04:29 - Synchronisation
05:08 - Out of band swapping
05:51 - Sending data
06:29 - Confirmation dialogs
06:39 - Inheritance
06:51 - Boosting
07:04 - Websockets and SSE
07:13 - Not covered
07:34 - Building the backend
#htmx #javascript #webdev #softwareengineer - วิทยาศาสตร์และเทคโนโลยี
ERRATA:
3:10 - When using hx-target="this", descdendant elements will target the element with hx-target="this" instead of themselves. It's only the default behaviour if no hx-target is set. Thanks to @foxoninetails_ for this!
great summary for my impatient self, now ill watch more shorts instead of actually building something
You embody the spirit of a true dev
lmao
Small note for accuracy: hx-target="this" is not actually the default behavior, as descendants will now target that element instead of themselves unless they define their own hx-target. The actual default behavior when no hx-target is defined at all is for the triggering element to target itself, rather than the parent that hx-target is inherited from.
Thanks for calling me out! I've added a pinned errata comment :)
This is what I’ve been looking for. Perfect guide.
Glad you found it helpful!
Love the format of this video dude, like having the docs read to me like a bedtime story
I'm glad you enjoyed it! And if you do ever want me to narrate a bedtime story...
@@IsaacHarrisHolt🤣
wow, i was looking for an htmx tutorial. Glad i saw this one. Save lot of time 🎉
I'm glad you found it useful!
00:00 🚀 HTMX Introduction: HTMX is an HTML-centric extension for web pages, aiming to enhance them with Ajax, websockets, and more, favoring HTML as the application state engine.
00:43 🛠 HTMX Usage: Adding HX attributes to DOM elements (e.g., HX get, put, post, patch, delete) allows issuing HTTP requests on element events, updating inner HTML with the server response.
01:09 🖱 Event Triggering: Events like change, submit, click, etc., are naturally triggered, or custom triggers like load, reveal, intersect can be set using HX trigger attributes for specific behaviors.
02:04 ⏲ Event Control: HX trigger options (e.g., delay, throttle), modifiers (e.g., closest, next, previous), and filtering (e.g., with JavaScript expressions) allow precise event control.
03:14 🔄 Manipulating Response: HTMX provides various options (HX swap) to control how server responses replace or merge with target DOM elements, enabling fine-grained content handling.
04:38 🔄 Syncing Elements: HX sync allows coordinating events between elements, enabling control over race conditions or overloaded server requests by defining syncing strategies.
05:21 🔄 Advanced Swapping: Techniques like out-of-band swaps, preserving elements during replacement (HX select, preserve), or scrolling control after swaps enhance user experience and functionality.
06:03 📤 Sending Data: Methods for sending form data, including additional parameters (HX include, HX params), file uploads (HX encoding), or confirming events before submission (HX confirm).
07:13 🌐 Extended Support: HTMX supports websockets, server-sent events, history API, CSS transitions, and offers headers for behavioral changes, making it versatile for various browser features.
07:40 🧰 Backend Agnostic: While HTMX is backend-agnostic, choosing a suitable backend with HTTP API frameworks and templating languages (e.g., Express, Django, FastAPI) is crucial for efficient HTMX applications.
08:07 🛠 Backend Choices: Selecting backend frameworks and languages compatible with HTMX, focusing on reusable components and maintainability, ensures effective development of HTMX applications.
Appreciated! I have already created chapters though 😉
I've seen this on other youtube videos. It's almost assuredly chat gpt
I had a feeling...
Ohh, thanks. Finally someone explained what the thing is it
You're welcome! I'm glad you found it helpful!
This is so good I think you should make it into a full-fledged tutorial. None I have seen so far go into this amount of detail. Well done!
The reason most tutorials don't go into everything is because finding a coherent demo that showcases every feature would be difficult, and explaining it would take ages 😅
I use it with custom WordPress themes (so with PHP). Works pretty well to turn them into semi SPA's this way. (hx-boost is really usefull for this)
Oh interesting! That's very cool
We need to get rid of too much reliance in JavaScript. HTMX is leading that way.
Agreed! It's great for a lot of the simpler apps people want to write
Lol, htmx is just a javascript library. So you are as reliant on javascript, but in a different way because it's packed in to a library.
@@TeamCykelhold yes, similar to jQuery it allows you to write JS codes in a clean and shorter way. Get rid of JS means, eliminate it's weird ass syntax.
True, but it means you don't have to WRITE any JavaScript. Also, most JS (or WASM) frontends will get JSON back from a server and then have to turn that into markup for the browser to display. This way, the server returns the markup directly and all the JS is doing is inserting it. Doesn't have to parse any JSON, etc.
Also, if you need to make an addition to what's being rendered, there's only one place you need to make that change (the server) rather than two (the client and the server).
I'd recommend the HATEOAS page of the HTMX docs as a great read
@@IsaacHarrisHolt Yep that's right. You will write something that looks like HTML and get functionality that normally would require either JS or a library to do something. htmx seems like a great choice for some projects with specific requirements that fit into whatever functionality exists in htmx but you are also limited in other ways unless you want to make a hybrid and then you are back to either JS or a mix of libraries. As with all project it's all about figuring out the scope and choose the correct technology/library/structure.
Wonderful details
Thanks! I hope you found it useful
Thats a whole lot to digest soo quickly.
I hope you found it useful!
amazing explanation
Thank you!
nice tuts, but can I have a question? how can I solve the "Not covered" part of this tech, "form validation" for example...
The docs! HTMX.org is a good place to start. Links are in the video description
is this video style inspired by No Boilerplate's "Rust for the impatient"?
Somewhat, yes! And Fireship's "X in 100 seconds". It's one of the reasons I haven't done a Rust video 😅
thanks .. you got a subscriber.
Thank you!
Hero!
Glad you found it useful!
excellent!
I'm glad you found it useful!
Will try it with Leptos
Let me know how you get on!
Can I start a w sockets server on page load, and then just talk to new socket instead of the backend?
There's a WebSocket extension for HTMX that might do what you want, but where are you hoping to open a connection to if not your backend?
@@IsaacHarrisHolt I was only thinking to connect to a server that is started on the client.
I'm only thinking of an example, so the client services/server then be like a router/filter.....
Maybe doesn't make sense but I still thought of it 😄
@@beest_ I'm not 100% sure what you're going for, but you should give it a try!
Im sold.
Awesome!
First comment, thx mate
Congrats, and you're welcome!
good video
Thank you!
This is modern day jQuery.
Pretty much! But with extra memes
Came to say exactly this. Feels like if angular and jquery had a weird baby
I dont remember ever sending HTML down the wire with jQuery or Angular?
Reminds me more of Handlebars on steroids honestly.
@@decoysloiswith jquery ive done that a bunch of times 😂
What is HaychTMX?
As opposed to...?
@@IsaacHarrisHolt It's about the pronunciation of the name of the letter "h". You use "haitch" instead of the common "aitch". That threw me slightly off as well.
However, checking out en.wikipedia.org/wiki/H revealed:
"... the name for the letter is pronounced as /eɪtʃ/ and spelled "aitch"[1] or occasionally "eitch". The pronunciation /heɪtʃ/ and the associated spelling "haitch" is often considered to be h-adding and is considered non-standard in England.[2] It is, however, a feature of Hiberno-English (from Latin Hibernia: "Ireland") and occurs sporadically in various other dialects."
Now I know. You Irish by any chance?
Just spent way to much time looking into this 🙂
Good video btw.
I'm not Irish! I'm Welsh 😅 I don't have a regional accent at all, so maybe that's it
It's called English
you didn't mention PHP. However I ve tried Vanilla PHP and Laravel (with blade template engine) and I ve build SPA with htmx in frontend and it works perfectly fine!
ps sto hating PHP or any other language. you don't like a language just don't use it but you have to mention this as backend you like it or not it empowers the 74%+ of entire web
I didn't mention PHP because I'm unfamiliar with it, not because I hate it. This channel is predominantly Python focused, with sprinklings of Go, Rust and TypeScript, which is why those got a mention :)
PHP indeed holds a significant place in web development, and as you rightly pointed out, it consistently ranks among the most popular programming languages. Its regular improvements, especially with advancements in frameworks like Laravel, contribute to its enduring relevance.
While there has been a historical stigma, the language has been making strides to address concerns and enhance its features. Many developers are recognizing the positive changes, and PHP is regaining a more favorable reputation.
Each language has its strengths, and the key is to choose the right tool for the job.
Promoting a broad and equitable discussion about technologies is essential for a thriving developer community.
I'm not religious about programming languages either. I use PHP because that's what I've been using for over 20 years. I know its idioms and quirks. My custom HTML parser is written in PHP. It may or may not do some of the same things HTMX does. I had difficulty listening to the video because of the lack of verbal whitespace. Why do TH-camrs talk so darned fast and edit out all of the pauses these days? There's no time limit on the length of a video.
I create videos this way because they're the type of videos I like to watch. I understand they may not be for everybody, but lots of people do appreciate not having to watch at 2x speed :)
Deleting Emacs?
Yes, it's my favourite pastime. Unfortunately it does mean I need to install it first...
Wait, why would you use Leptos, which is essentially a Rust equivalent of React or SolidJS? The whole point of HTMX is to not have to learn a frontend framework. This makes no sense. You would use Actix or Axum plus a a templating library like askama (Jinja clone in Rust).
I haven't done much HTMX + Rust, and honestly Leptos is the recommendation I've heard thrown around.
I think the biggest benefit to using Leptos here is the componentisation, which makes it easy to compose UIs without messy template mangling
@@IsaacHarrisHolt Leptos is super ugly for simply making components and is it's least attractive feature. If you really want components, you can export components in svelte, then use them directly in your templates. You just have to include a single JS file and you get easy, native web components that can be called in directly in HTML. I would do at least 5 minutes of research on the topics you cover. I love Leptos, but if you saw how the components are implemented you wouldn't be suggesting this as a good alternative to templates. Do better.
Fair enough! I just wanted to have a Rust suggestion in there for people to get started with. It's a suggestion I've heard from a few places around TH-cam and X, so I decided to include it.
I'm sorry if it's not the solution you personally like the best.
As for doing better, I suggest you try making some TH-cam videos yourself before making comments like this. There are so many better ways to phrase what you've said without coming across like a spoilt child.
Do better.
@@IsaacHarrisHoltYou suggested Leptos as a templating library when in reality, it's a front end framework. The whole point of htmx is you don't need a front end framework. You're an educational channel, doing zero research on a topic and suggesting something simply because others have talked about it in passing isn't okay. And when someone calls you out for spreading misinformation, you call them a child. If you don't want to put the effort into your videos, then don't make them at all. And when someone gives you completely valid criticism, don't insult them. You made a video on HTMX which replaces front end frameworks, then suggested a front end framework. That's a pretty big screw up that could have been avoided if you actually put effort into your videos instead of insulting your own audience.
PS: The templating library i suggested is a clone of Jinja specifically for rust. The funny thing is, you suggest Jinja as a templating library for python. So why is it okay to use a templating library in python, but the exact same templating library isn't good enough for rust, and instead we have to use a front end framework? To me, it sounds like the whole componentization thing is an excuse to cover up your lack of research, because you're contradicting yourself directly in the video by suggesting Jinja for one language but not the other
Okay, great points. I understand that there are other alternatives available for Rust, that's great.
What isn't great is the way you decided to inform me of this fact. There were plenty of other ways you could have phrased what you did without slandering the effort I put into making this video. I would argue that the point you're making is arguably very minor. It's at the end of a video about HTMX, and is merely an implementation suggestion. If the video was "The best backend for HTMX", then yes, it would be a bigger deal. But, it's not.
I'm very open to constructive criticism and admitting when I'm wrong (see pinned comments on various videos), but I don't take it when people come at me with a combative attitude. If you have nothing else better to do with your day than diminishing the hours of research that people put into educational content like this, then I guess I feel sorry for you.
Look, I'm sorry for how I initially reacted, but when someone puts a good deal of effort into making content like this, and people in the comments say throwaway things like "Do better", it's really not a pleasant experience.
Next time, you could say something like: "While you could use Leptos for this, I'd say that X is a better option". Much better than "Omg why would you use Leptos you've clearly not researched this at all", which is how you're coming across, somewhat.
PHP for the backend? Hold my beer!
Bit of a PHP fan? 👀
you can now say: I program with HTML!
True!
How is this html native if the very first thing you need to do is include JavaScript?
You don't have to WRITE any JS yourself, if you don't want to. Making this work entirely in HTML would be impossible given the restrictions of the language, so there has to be some JS.
It's also much closer to pure HTML than something like React.
@@IsaacHarrisHolt It’s subject to defer, async, and everything else regular JavaScript has to wrangle with. It sounds like it’s another form of binding, which sounds like precisely what Angular, React, Vue, etc do.
Don’t get me wrong, progress is progress. In hindsight, we’ll have some perspective on the idea. Right now, not so sure.
Native is not needing to import a js library for a select dropdown. Anything short of that is mixed concoction. Concocting native elements to perform calls that they don’t natively do. Cool, I guess.
I this was a new browser code/interpreter, so to me its just html with a JS library
It's just a JS library, but it's what it allows you to do that's really special
golang + htmx
Absolutely!
So it’s for super simple web *pages*.
I suppose, maybe, but with the right backend tools, you can build really complex web apps with HTMX :)
apart from the accent it was an awesome video ❤️
Hey, what's wrong with my accent 👀
@@IsaacHarrisHolt hey man sorry if i offended you, nothing wrong but your H sounds more like 'hache' rather than 'ach'.
That's just how us Brits speak 😉
There was no accent.
You have the accent.
@@vivsh.1999 you are the one with an accent. he is speaking normally
ew.
What's ew 👀
web dev @@IsaacHarrisHolt
Web Development is 90% of all development.@@betterinbooks
Bloated JS frameworks like Angular are ew.
Dislike the format of this video - too fast and not enough explanation
Fair enough! I appreciate that the Impatient Devs videos aren't everyone's cup of tea :)
You're too patient for this video
😂@@tinkmaster1054
Stop pronouncing it "haytch" it's ridiculous.
Almost as ridiculous as going out of your way to insult someone you don't know on the internet over something they can't control 🙃
i heard that "hey Jacks"... luckily my name is not Jack 😀
hxswap is too good
I know, right? It's useful as heck
@@IsaacHarrisHolt yes it is very handy to have an SPA from pasting a cdn link lol