Understanding HATEOAS

[00:00:00]
>> So first thing is HATEOAS. You've probably seen this term, heard this term, it stands for Hypermedia As The Engine Of Application State. Meaning the state of your HTML is the state of your program and that is how we drive the changes, further on down the line is what is currently there.

[00:00:17]
In the modern world, we don't do that. What we do in the modern world is that we have the virtual DOM usually contains the state of your program. Then you have a secondary state, which is all the closures and things within your JavaScript, the use states, all the little bits that are going to update that virtual DOM.

[00:00:34]
That's your second layer of state. Then typically if you're more enterprise, you'll have a third layer state which is your Redux state. Which is controlling your routes, it could be controlling how you're getting data, async reducers, selectors all that fun stuff to just simply drive the engine of state.

[00:00:48]
And so, in the HTMX world, we try to make it simple. The hypermedia, the HTML, that's the engine of application state, not all the other things, all the other layers. It's your server is the truth, your client is the reflection of the truth, and there's little in between.

[00:01:06]
Now you can go as much as you want. I've seen projects where they use HTMX for all the chrome and all the stuff around the application, and they use React inside of it to drive all the user interactions. Totally reasonable, you can emit events from within a React application and have HTMX actually run on the outside and do all the updating and executing on the outside, so totally okay.

[00:01:27]
Does that mean HTML is finally a programming language? Yes, does that mean you're finally an HTML engineer? Absolutely, what a great day to be alive, finally. Also, this is a 2011 nice little document, which you should read. This is by the current community manager of Rust, and he has a whole talk about how to do HATEOAS and all this stuff, even in 2011.

[00:01:52]
So this is a fairly, again, this concept has been around for quite some time, this is not something new. It just feels new because some unhinged Montana man has now made it popular. And that by the way, I'm not the unhinged Montana man. All right, so let's do this.

[00:02:08]
Hopefully I have the exact link, yes, I do. Fantastic. So typically this is kind of like your standard server interaction, I do a GET at the root and the server responds with some HTML, that has links off to JavaScript, maybe it's not a server that actually does it, maybe it's like a CDN in front of the server.

[00:02:27]
Whatever happens, something happens and you get HTML back, right? And so typically we're gonna be doing something like this with a HTMX. Any element may have some sort of hx-VERB. That VERB will have a path, we will make a VERB request to that path, it will hit the server.

[00:02:46]
The server's expectation is to respond with HTML. The contents of the HTML will replace the inner HTML of the element that initiated the request and that is only if it responds with the 200. So if you respond with the 400 or 500 or whatever, you now have to define some sort of custom behavior.

[00:03:07]
HTMX just says no, we're not gonna do anything in the 400 to 500s. So, that means if we had a div that posted to foo, and it had the contents of four green squares, and the server responds with two blue squares, the final state will look something like this, the div will now have two blue squares.

[00:03:28]
HTMX does emit a lot of events, so you can hook in with JavaScript if you want to add custom behavior. It can react on a lot of different things, including custom events. It has ways to reduce HTML from the request, so you don't actually get the entire request, you can just select out parts you want and it also has ways to redirect to the HTML to other parts of your application.

[00:03:46]
So this is all a part of it and you can even redirect from the server or you can redirect from the client. You can make the choice yourself depending on where and how you do it. All right, so pretty fantastic. Hopefully everyone's like that's it, I just taught you pretty much all of HTMX right now.

[00:04:02]
So we're gonna kind of go through some exercises and put this into practice. I just really want you to see this image right here. This is, I think, is the best image to understand HTMX. Starts with some green squares inside of it, you make a request, server responds with blue squares, now you have blue squares inside of that same div.

[00:04:19]
The div was not removed, the insides were removed. All right, so that probably explains what happened here, right? I think we can start guessing as to why our button has a button inside of it.