HTMX is amazing!

00:00:00: So I recently released a brand new

00:00:03: course, "HTMX - The Practical Guide".

00:00:07: That's a course I actually didn't plan to

00:00:11: create, because I got plenty of work to

00:00:13: do with an ongoing Next.js course

00:00:16: update and an ongoing Angular course

00:00:19: update, and both updates will be

00:00:22: amazing.

00:00:22: I'm working on them, but they will still

00:00:24: take some time.

00:00:26: I get some other work and some other

00:00:27: course related work as well.

00:00:29: So HTMX was originally not a topic I

00:00:33: planned on covering with a course, but

00:00:37: then I worked with HTMX quite a bit over

00:00:42: the last couple of months.

00:00:44: And I have to say, it's really an amazing

00:00:48: JavaScript library.

00:00:50: And you might, of course, wonder if you

00:00:52: haven't heard about HTMX, do we really

00:00:55: need another library?

00:00:56: What does it do?

00:00:57: What the others don't?

00:00:58: The answer is HTMX helps you avoid

00:01:03: writing front-end JavaScript code.

00:01:06: You can still use it with front-end

00:01:10: JavaScript code, and I do cover that in

00:01:12: the course as well, but you don't have to.

00:01:14: And at least in my experience, you often

00:01:18: end up with websites, with web

00:01:21: applications that have a way simpler

00:01:24: front-end code structure than you would

00:01:28: have with React and so on.

00:01:30: Now, I'm also not saying that it's better

00:01:33: than React, that it should always be

00:01:35: used instead of React.

00:01:37: Instead, both are amazing libraries.

00:01:40: And of course, the same is true for

00:01:42: Angular and so on.

00:01:43: But for, at least in my experience, quite a

00:01:47: few web applications and websites,

00:01:51: HTMX might be the simpler solution, to

00:01:54: be honest.

00:01:55: Now, what exactly is HTMX though?

00:01:58: What does it do?

00:01:59: How does it work?

00:02:00: As the name suggests, the idea is

00:02:03: essentially that it extends the HTML

00:02:06: markup language.

00:02:08: It extends it by giving you a bunch of

00:02:11: new attributes, which you can add to

00:02:14: HTML elements.

00:02:16: Now, what do these attributes do

00:02:18: though?

00:02:19: Well, in the end, they deal with sending

00:02:23: AJAX requests.

00:02:24: So, behind-the requests from the

00:02:28: front-end to some back-end.

00:02:29: And they, or HTMX as a library, then also

00:02:33: deals with the response that's sent back.

00:02:38: And HTMX makes sure that your

00:02:40: front-end UI, your DOM, is updated with

00:02:44: that response data.

00:02:46: Though that data part is now also

00:02:49: special and interesting.

00:02:51: Because the idea with HTMX is that,

00:02:55: unlike with React or Angular and so on,

00:02:59: you're not exchanging JSON data

00:03:01: between the front-end and the

00:03:03: back-end.

00:03:04: But instead, the idea is that your

00:03:07: back-end prepares the HTML code that

00:03:11: should be rendered on the screen.

00:03:14: And that could be an entire page or just

00:03:17: a snippet, just a fragment.

00:03:19: And HTMX then makes sure that that

00:03:21: response HTML code is inserted in the

00:03:25: right place in the DOM.

00:03:28: So, in the website the user sees.

00:03:30: And you control where exactly that

00:03:33: response HTML code will be inserted.

00:03:36: And how it will be inserted with special

00:03:40: attributes, special HTMX attributes that

00:03:43: you can add to elements.

00:03:45: So that you could use these HTMX

00:03:48: attributes to make sure that when a

00:03:51: form is submitted, a POST request is

00:03:54: sent to a certain route, and the response

00:03:57: HTML code that is sent back is then

00:04:00: inserted in a specific place in the

00:04:03: currently visible page.

00:04:05: That's the idea with HTMX.

00:04:07: And you don't need to write any

00:04:09: JavaScript code for setting up the

00:04:11: request, for sending the request, for

00:04:13: preparing the data, for using the

00:04:16: response data and for updating the

00:04:18: DOM.

00:04:19: You don't need to do any of that.

00:04:21: HTMX does it for you.

00:04:23: That's the main idea.

00:04:25: Now, of course, since HTMX essentially

00:04:29: needs a back-end that sends back HTML

00:04:33: snippets or documents instead of JSON

00:04:36: data, you can really only use HTMX if you

00:04:42: own the back-end, if you're building a

00:04:44: full-stack application in the end.

00:04:46: Because only then can you make sure

00:04:49: that it is such HTML data that's sent

00:04:53: back instead of JSON data.

00:04:56: So that is essentially a requirement, you

00:04:59: could say.

00:05:00: And that, of course, also means that if

00:05:03: you're maybe building a back-end that's

00:05:05: not just meant to be used by a web

00:05:07: front-end, but also by a mobile app, for

00:05:11: example, you might think twice whether

00:05:14: you really want to use HTMX or not,

00:05:17: because you might need to send JSON

00:05:20: data to the mobile app and HTML data

00:05:24: to the web app if it uses HTMX.

00:05:27: And maintaining these two different

00:05:29: APIs or these different sets of API

00:05:32: endpoints might not be something you

00:05:35: want to do.

00:05:36: In addition, if you're building a super

00:05:38: complex web user interface with a lot of

00:05:42: interactivity, if you're building something

00:05:44: like Google Docs or anything like that,

00:05:48: you also might still want a library or

00:05:51: framework like React or Angular

00:05:53: because you have a lot of DOM updating

00:05:57: to do and it's not all related to HTTP

00:06:00: requests being sent back and forth.

00:06:03: And in such a situation, HTMX also

00:06:06: might not be perfect, though you could

00:06:08: also definitely use it for applications like

00:06:11: this.

00:06:11: Also, because as I mentioned before,

00:06:15: you're not limited to just using HTMX.

00:06:18: You can use it and combine it with

00:06:21: vanilla JavaScript code or with some

00:06:24: other JavaScript library.

00:06:26: You can do that.

00:06:27: It's not an either-or decision.

00:06:30: But still, I'd say HTMX shines the most if

00:06:34: you are building a full-stack web

00:06:37: application where you do own the

00:06:39: back-end, where you don't necessarily

00:06:41: have other clients like a mobile app, and

00:06:45: where you definitely have not

00:06:49: necessarily a trivial website, but also not

00:06:52: a website that is hyper-interactive and

00:06:56: that got a lot of things going on.

00:06:59: And it turns out, at least in my

00:07:01: experience, that quite a few websites are

00:07:04: like that.

00:07:05: They are not super complex.

00:07:08: They don't need a super-interactive,

00:07:11: complex web user interface.

00:07:13: Instead, if you're building something like

00:07:15: an online shop where you're essentially

00:07:17: fetching products, fetching product

00:07:19: details, updating a cart, and so on, that's

00:07:23: something HTMX can do really well.

00:07:27: You don't necessarily have a UI that

00:07:31: needs to be powered 100% by JavaScript

00:07:34: or by JavaScript code you write, to be

00:07:37: precise.

00:07:38: Instead, HTMX might be a great choice

00:07:41: in situations like that.

00:07:44: And therefore, even if you don't plan on

00:07:46: taking my course, which is fine, though I,

00:07:49: of course, am happy if I can welcome

00:07:51: you there, but even if you don't do that, I

00:07:53: would definitely recommend that you

00:07:56: give HTMX a try because it really is an

00:08:00: amazing library, in my opinion, because

00:08:02: it can help you write less code, simpler

00:08:06: code, and build websites quicker than

00:08:10: you might be able to do with React or

00:08:12: Next.

00:08:13: Because I think as web developers, or as

00:08:18: humans in general, I don't know, we

00:08:20: sometimes tend to use the wrong tool or

00:08:25: maybe not the perfect tool for a given

00:08:28: job.

00:08:29: And I feel like HTMX can sometimes be

00:08:32: the better tool for certain kinds of

00:08:35: websites than React or Angular might

00:08:38: be.

00:08:38: Of course, it also comes down to

00:08:40: personal preference, and that's why I say

00:08:44: that you should give it a try.

00:08:45: You don't have to use it, but at least you

00:08:48: should be able to use it if you want to,

00:08:51: and you should know about it.

00:08:52: And therefore, definitely have a look at it

00:08:55: in the internet.

00:08:57: As always, you will find lots of opinions

00:08:59: on it, some pretty extreme opinions in

00:09:02: both directions, and well, just ignore

00:09:05: them.

00:09:05: That's always the best thing to do in the

00:09:07: internet.

00:09:08: Don't read what people are writing

00:09:10: about all these libraries and frameworks.

00:09:12: Try to find the middle ground and just

00:09:16: give it a try.

00:09:17: It's really easy to get started with it, and

00:09:20: with my course, I, of course, try my best

00:09:22: to make it as easy as possible, whilst also

00:09:25: diving a bit deeper into HTMX and

00:09:28: explaining a bit more about it and also

00:09:31: showing you more advanced features.

00:09:33: But you will see, using it is really simple

00:09:36: in the end.

00:09:37: In the course, we start at zero, and we

00:09:39: then gradually dive deeper, but you can,

00:09:42: of course, also take a look at the official

00:09:43: docs, also in addition to the course, and

00:09:47: who knows, maybe HTMX is also a great

00:09:50: choice for your next project.

00:09:53: I'm super interested in learning what

00:09:57: you think about it, so please share your

00:10:00: opinion on HTMX.

00:10:02: Let me know if you used it, if you like it,

00:10:04: what you don't like about it, maybe, and

00:10:06: well, maybe I also see you in the course.

00:10:09: But even if I don't, HTMX, in my opinion,

00:10:12: is pretty amazing, and you also might

00:10:14: want to give it a try.