HTMX for Impatient Devs

Подписаться 11 тыс.

Просмотров 44 тыс.

50% 1

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

Наука

Опубликовано:

17 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 122

@IsaacHarrisHolt 5 месяцев назад

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!

@Rtzoor 6 месяцев назад

great summary for my impatient self, now ill watch more shorts instead of actually building something

@IsaacHarrisHolt 6 месяцев назад

You embody the spirit of a true dev

@dwiatmika9563 6 месяцев назад

lmao

@foxoninetails_ 5 месяцев назад

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.

@IsaacHarrisHolt 5 месяцев назад

Thanks for calling me out! I've added a pinned errata comment :)

@eric-seastrand 5 месяцев назад

This is what I’ve been looking for. Perfect guide.

@IsaacHarrisHolt 5 месяцев назад

Glad you found it helpful!

@tomthetitan101 6 месяцев назад

Love the format of this video dude, like having the docs read to me like a bedtime story

@IsaacHarrisHolt 6 месяцев назад

I'm glad you enjoyed it! And if you do ever want me to narrate a bedtime story...

@tomthetitan101 6 месяцев назад

@@IsaacHarrisHolt🤣

@TriNguyenKV 5 месяцев назад

wow, i was looking for an htmx tutorial. Glad i saw this one. Save lot of time 🎉

@IsaacHarrisHolt 5 месяцев назад

I'm glad you found it useful!

@shofada 5 месяцев назад

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!

@IsaacHarrisHolt 5 месяцев назад

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 😅

@antonsinitsyn6420 7 месяцев назад

Ohh, thanks. Finally someone explained what the thing is it

@IsaacHarrisHolt 7 месяцев назад

You're welcome! I'm glad you found it helpful!

@roelvaneyken211 5 месяцев назад

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)

@IsaacHarrisHolt 5 месяцев назад

Oh interesting! That's very cool

@dameanvil 6 месяцев назад

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.

@IsaacHarrisHolt 6 месяцев назад

Appreciated! I have already created chapters though 😉

@InOtherNews1 6 месяцев назад

I've seen this on other youtube videos. It's almost assuredly chat gpt

@IsaacHarrisHolt 6 месяцев назад

I had a feeling...

@takacszsolt4940 5 месяцев назад

nice tuts, but can I have a question? how can I solve the "Not covered" part of this tech, "form validation" for example...

@IsaacHarrisHolt 5 месяцев назад

The docs! HTMX.org is a good place to start. Links are in the video description

@RishabhDeepSingh 5 месяцев назад

Thats a whole lot to digest soo quickly.

@IsaacHarrisHolt 5 месяцев назад

I hope you found it useful!

@GirishVenkatachalam 3 месяца назад

Wonderful details

@IsaacHarrisHolt 3 месяца назад

Thanks! I hope you found it useful

@manuelquiroga8022 6 месяцев назад

amazing explanation

@IsaacHarrisHolt 6 месяцев назад

Thank you!

@ukrustacean 5 месяцев назад

Will try it with Leptos

@IsaacHarrisHolt 5 месяцев назад

Let me know how you get on!

@bhavyakukkar 4 месяца назад

is this video style inspired by No Boilerplate's "Rust for the impatient"?

@IsaacHarrisHolt 4 месяца назад

Somewhat, yes! And Fireship's "X in 100 seconds". It's one of the reasons I haven't done a Rust video 😅

@binodsharma112 5 месяцев назад

thanks .. you got a subscriber.

@IsaacHarrisHolt 5 месяцев назад

Thank you!

@sergehulne 4 месяца назад

excellent!

@IsaacHarrisHolt 4 месяца назад

I'm glad you found it useful!

@manit77 5 месяцев назад

This is modern day jQuery.

@IsaacHarrisHolt 5 месяцев назад

Pretty much! But with extra memes

@sregexer 5 месяцев назад

Came to say exactly this. Feels like if angular and jquery had a weird baby

@decoyslois 5 месяцев назад

I dont remember ever sending HTML down the wire with jQuery or Angular?

@owenwexler7214 5 месяцев назад

Reminds me more of Handlebars on steroids honestly.

@uflidd 5 месяцев назад

@@decoysloiswith jquery ive done that a bunch of times 😂

@Monkers18 6 месяцев назад

We need to get rid of too much reliance in JavaScript. HTMX is leading that way.

@IsaacHarrisHolt 6 месяцев назад

Agreed! It's great for a lot of the simpler apps people want to write

@TeamCykelhold 5 месяцев назад

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.

@Monkers18 5 месяцев назад

@@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.

@IsaacHarrisHolt 5 месяцев назад

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

@TeamCykelhold 5 месяцев назад

@@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.

@simonegiuliani4913 5 месяцев назад

Hero!

@IsaacHarrisHolt 5 месяцев назад

Glad you found it useful!

@science_trip 6 месяцев назад

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

@IsaacHarrisHolt 6 месяцев назад

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 :)

@trlpht 5 месяцев назад

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.

@RealDevastatia 5 месяцев назад

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 RU-vidrs talk so darned fast and edit out all of the pauses these days? There's no time limit on the length of a video.

@IsaacHarrisHolt 5 месяцев назад

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 :)

@codexed-i 4 месяца назад

Deleting Emacs?

@IsaacHarrisHolt 4 месяца назад

Yes, it's my favourite pastime. Unfortunately it does mean I need to install it first...

@PerryCodes 6 месяцев назад

What is HaychTMX?

@IsaacHarrisHolt 6 месяцев назад

As opposed to...?

@michaelbuerge 5 месяцев назад

@@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.

@IsaacHarrisHolt 5 месяцев назад

I'm not Irish! I'm Welsh 😅 I don't have a regional accent at all, so maybe that's it

@EnglishLaw 3 месяца назад

It's called English

@AhmadHddad01 7 месяцев назад

First comment, thx mate

@IsaacHarrisHolt 7 месяцев назад

Congrats, and you're welcome!

@Cypekeh 6 месяцев назад

good video

@IsaacHarrisHolt 6 месяцев назад

Thank you!

@beest_ Месяц назад

Can I start a w sockets server on page load, and then just talk to new socket instead of the backend?

@IsaacHarrisHolt Месяц назад

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?

@beest_ Месяц назад

@@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 😄

@IsaacHarrisHolt Месяц назад

@@beest_ I'm not 100% sure what you're going for, but you should give it a try!

@Callmedstone 3 месяца назад

Im sold.

@IsaacHarrisHolt 3 месяца назад

Awesome!

@yarmgl1613 17 дней назад

you can now say: I program with HTML!

@IsaacHarrisHolt 17 дней назад

True!

@Debianz 5 месяцев назад

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).

@IsaacHarrisHolt 5 месяцев назад

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

@Debianz 5 месяцев назад

@@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.

@IsaacHarrisHolt 5 месяцев назад

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 RU-vid 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 RU-vid 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.

@Debianz 5 месяцев назад

@@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

@IsaacHarrisHolt 5 месяцев назад

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.

@colinmaharaj 4 месяца назад

I this was a new browser code/interpreter, so to me its just html with a JS library

@IsaacHarrisHolt 4 месяца назад

It's just a JS library, but it's what it allows you to do that's really special

@TracyNorrell 4 месяца назад

PHP for the backend? Hold my beer!

@IsaacHarrisHolt 4 месяца назад

Bit of a PHP fan? 👀

@TesterAnimal1 5 месяцев назад

So it’s for super simple web *pages*.

@IsaacHarrisHolt 5 месяцев назад

I suppose, maybe, but with the right backend tools, you can build really complex web apps with HTMX :)

@naranyala_dev 6 месяцев назад

golang + htmx

@IsaacHarrisHolt 6 месяцев назад

Absolutely!

@justingiovanetti 6 месяцев назад

How is this html native if the very first thing you need to do is include JavaScript?

@IsaacHarrisHolt 6 месяцев назад

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.

@justingiovanetti 6 месяцев назад

@@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.