HTMX

Right, so let's look at HTMX website. Go over its documentation, see what could be good use cases to use it and general news about it. So first what is HTMX? So basically it's related to HTML of course because it's called HTMX and when you have a website and you have HTML in this website, then in order to make this the basic structure to get new data. I mean we can host just an HTML page and that's it, that would be static page and if it's not connecting on any button click or whatever to any

server then it's fully static, it's not changing the content. So the big question is how do we change the content of web pages once the users are making actions. So if the user is making a click, the question is then how do we change the content for this? There were once the user clicks the login button, how do we make a request to the server, how do we respond with the content back to the user?

That is the big question, right? And for that there are plenty of solutions from JavaScript's Azure requests to just a button click on a form where in the form you specify where to go in the server and then form a link, right? An href offer website is going to make a call, get a new page and go to that link to react that manages states and then changes part of your web pages. And we have all these web frameworks and everything revolves around how do we change? How does

the world change? How does the HTML page changes? Do we want to render the whole page? Do we want to render the part of the page? Do we change the URL? Okay, all these revolves around these simple, basic questions and there are different solutions for different kind of problems. And and then this, some of these solutions require you to to learn frameworks and become a font and developer with years of experience and deep knowledge and react or anger or whatever and deep

understanding of these frameworks. This contradicts the the simplicity of HTML. I mean when you look in the simple HTML page, it's simple, why do we need to involve all these complex frameworks? To learn them for years, to to to to see all these abstractions, the answer is is that if you are going to maintain a whole product, then this could make sense, right? This could make sense.

But sometimes you you're not building a whole company, right? It's not the end of the world if there you would find a way to keep the HTML page simple and and some some methods to the actual HTML that would assist you in updating the HTML page. Okay, so this is what HTML is trying to see as you see HTML. So it's mostly HTML, but it's extended it. This is the premise of HTML, the premise of HTML is write your HTML as usual, incorporate a couple of tags there that would fetch

contact from the server. It's not going to be super complex, such as React etc. It's not going to be abstractions and the back-end that generates things. You just want to get some content from the server, right? So just say in the HTML, I want to get some content in there from the server, just say and replace this div when the content arrives. You can do it with JavaScript, but do you want now JavaScript code to maintain and understand what it's doing and so we have two

languages in HTML, the JavaScript and the HTML. HTML, extension of HTML. Let's continue reading this introduction. HTML mix gives you access to Ajax CSS transitions, WebSocats. Okay, so it's not okay. And server send events directly in HTML. For Ajax is, I think, calls CSS transitions is how things probably update. I'm not full show CSS. Let's see what CSS transitions are. Probably updates to the, let's keep this. Probably updates to the website with CSS. WebSocat is a protocol,

right? In order to make the website more dynamic and server send events is open connection and the server keeps sending you back responses. All this deal with the important thing, the important thing to Ajax CSS transition, WebSocat and server send events is that all these make websites dynamic. So what they say HTML gives you access to dynamic website changes directly in HTML. This is what I sang here using attributes so you can build modern user interfaces with the

simplicity and power of hypertext. HTML mix is small, 14k, depends if free, extensible, i.e. 11 compatible, has reduced code base size blah blah. Motivation. We discussed it a little bit. Let's see what exactly they say motivation. Why should only an A anchor in the form be able to make HTTP requests? Why should only click and submit events trigger them? Why should only get and post methods be available? In that jmail, why should only be able to replace the entire

screen with with plain HTML? By removing these arbitrary constraints, HTML is hypertext. Quick start. Scripts. So we include the HTML script. And now we have here a button called click me. That and here are the HTML stugs. We say when someone clicks the button, Hx post, make a post request to slash clicked and swap replace the outer HTML of this button. Replace basically the content. Okay, so what happens when we make a better request? You see it's

simple. You see it's inside inline inside the HTML. We didn't need JavaScript. It looks also good intuitive. Okay, so we are now able with these tags to communicate with the server. Get back content and change the website and parts of the website because we said change only the outer HTML. Okay, so we have here a button when someone clicks this go make a post request,

HTTP post request, swap the outer HTML. Okay, the Hx post and Hx swap attributes on this button, the HTML when a user clicks on this button, issue an adjx request to slash clicked and replace the entire button with HTML response. HTML mix is successful to integrate with the docs. Okay, so it looks like if you want to create something some site project, though, even internal project, I would claim also for bigger projects, this could be great,

excellent, right? Especially that they are getting more and more traction. I mean the safe bet today would be of course to use React, right? This would be the safe bet. But for site project, perfect. And I can expect, I can expect it's not something totally imaginary that in a couple of years, this would become more and more mainstream also for companies, for internal tools, it will start with internals and go to more places. I mean, this is something to

stay as I said, it's not some hype. News we are excited to announce that Hx has been as rapid into the first classes of GitHub open source accelerator. This means that GitHub says, okay, here is an open source. I want to support them. I will give them $20,000. I would give them some mentoring and help them make these open source both a more known accelerator, right? Like why combinator accelerator for companies, this would be an accelerator for

open sources. Okay, so let's go a little bit also about the documentation and then we cut this dogs. Okay, so this is the documentation. Let's see, they have some contracts, triggering special events, indicators, swapping, thing, synchronization, out of pants, but basically web sockets and server side events mean we get dynamically content from the server. So the documentation HMX is library that allows you to access modern one browser features directly

from HML rather than using JavaScript to understand HMX. First, let's take a look at the uncor-tug uncor-hf blog. This uncor-tug tells the browser when a user clicks on this link, issuing HTTP get request to the slash blog and load the response content into the browser window.

With that in mind, consider the following bit of HTML. But in Hxbox, let's click Hx trigger, click Hx target, some div, Hx swap, some outer Hdm and this tells HMX when a user clicks this button, issuing HTTP post request, post to slash clicked and use the content from the response to replace the element with ID, a parent div in the DOM.

And the trigger for this would be a button click. HdmX extends and generalizes the core ID of HTML as a hypertext, opening up many more possibilities directly within the language. Now any element, not just anchors and forms can issue HTTP request. Now any element, not just clicks or form submissions can trigger requests. Now any HTTP verb, not just get and post can be used. Now any element, not just the entire window can be the target for update. The target we want to

update something specific, some specific div. Now that when you are using HTML on the server side, you typically respond with HTML, not JSON. Okay, this is important. Usually when we make a request server, we get back JSON, now they say you just report it and the HTML. This is both good and bad. I think that for our use case, it's good because we are trying to keep things in HTML. JSON is another structure. You need to parse it, you need to decide what to do with the JSON.

Now not just return the HTML. I like this. I mean, you can claim that by doing this, we are mixing up presentation layer HTML with JSON data. So yeah, again, if you have a product, Airbnb or booking.com, you might want to return a JSON, right? But if you have some internal tool of website, you might want to keep things as simple. There is a boundary between having things simple and making things complex unnecessary. There are some use cases that should be complex with JSON,

but there are some many other use cases that should not. This keeps you firmly within the original web-popping model using Hypertext as the engine of application state. Without even needing to really understand the concept, it's worth mentioning that if you prefer, you can use the data prefix when using HTML. I don't think this changes anything. You just perfect it with data to make things clearer. Maybe, I mean, the idea is mentioned. If it's doing any change, okay.

Installation HTML is dependency-free, browser or integer script library. This means that using it as a simple adding as script to your document had no need for complicated build steps or systems. Yeah, I forgot to mention this. With React and all these libraries, you are going to a hell of dependencies that you add and builds and compatibility is in between versions. This is just save you all of this. If you are migrating from HTML to an intercooler, please see

the immigration form. I enter code to HTML. So, we can get it from CDN, we can get it from local copy, from NPM, from Webpack. Ajax, the code of HTML is a set of attributes that you allow you to issue an adjx quest directly from HTML. It should be xgad with my gared request, post request, put request, pet request, and delete request. Each of these attributes takes your red to an issue and adjx quest to the

element with issue requests to the specified tag to give URL when the element is triggered. Hxput put to messages. This tells the browser when a user clicks on this div issue, put request to the URL slash messages and load the response into the div. Trigger request by default adjx request are triggered by the natural event of the element in put exterior, triggered on the change event, form is triggered on the submit event, everything else is triggered on the click event.

If you want different behavior, you can use the hx trigger. Trigger modifiers trigger can also have additional modifiers that change its behavior. For example, you want to request only happen once you can use the once modifier. Okay, let's look some other interesting things. Polling. Polling is interesting. Polling would mean, let's say I upload the file and this is going to take a couple of minutes and I want to show some true progress.

If you want an element to pull for given URL rather than, I mean this is what could be one of the use cases. If you want an element to pull for given URL rather than white for an event, you can use the every syntax with the hx trigger attribute. Every two seconds. Yeah, I can tell you there are so many systems that this can make them so much simpler. So yeah, we don't return JSON, we'll return HTML, but I think this could work.

This has hmx every two. I mean we can return HTML with CSS classes and okay, every two seconds issue a get to news and load the response into the div if you want to stop polling from a server response, you can respond with hdp response code 286. So from the server you can tell, guy, HTML makes it finished load polling. Another technique that can be used to achieve polling in htmx is load polling when an element specified a load trigger along with the delay and

replaces itself with the response. If the slash message endpoint keeps returning a div, set up this way, it will keep polling back to the URL every seconds. Load polling can be useful in situations where a poll as an endpoint at which point the polling terminates. That is when you're showing a pogaspar. Let's see how it is. Let's see the pogaspar and then we'll finish it with a pogaspar. If the slash message end point keeps returning a div setup this way.

So it will, so it was the server to keep returning distinct. And once the server returns something else then. Okay, I think what is this? Well, the htmx indicator, okay, we can customize stuff. You can specify what is the target. We can extend CSS selectors. We can decide what do still up. The inner HTML by default puts the content inside target, the outer HTML replaces the entire target element after begin. Prepend the content.

More films, more foam, more films, swap based on the morphed on the origin of morphing library. So how it animates the changes, view transition, API gives developer a way to create animated transition. Okay, so this is kind of advanced inquensation, often you want to coordinate the request between two elements. Okay, so if something

just wants something else to change. For example, you may want a request from an element to so perceive the request from another element or wait until the other element request is finished. Make sure that your Hx sync attribute help you accomplish this, consider a risk condition between a forms of machinery and the individual input validation. Without using Hx sync, they're filling out the input and immediately submitting the form

to your two parallel requests to the validate and store. Yeah, you want first the validate. Using Hx sync closes form a board on the input we'll watch for request on the form. So first we trigger this Hx post, validate and then they put a request. If a former request is present, starts the whole request in flight. This is of the sequinsession between two elements and declarative way Hdmixt also supports problematic way to cancel the request. You can send Hmx

a board event to an element to cancel. So we have your button cancel and we're canceling which which request. Ah, trigger, we specify here that we want to cancel this one. Okay, and that's it. So I think Hmx is great. I think the first case use case is side project. The second use case is internal company project. And the third project which requires some more examination work is actual company project, actual user facing project.

But it looks like it can do it. I mean, if I look at websites and what they do also user facing websites, what do they do? They make a request to the service right. They get in response, they update the screen, they show some progress bars and usually that's it unless you have super, super fancy things in which things also get complex. Maybe just leave everything to the server side. I mean there are these single page web apps which I think we should be careful about.

It's better to have distinct URLs for different web pages and different things and not just a specific URL. But so in general this is elegant. I think this would be used more often. And I hope that now that they have the GitHub acceleration on this to get more traction. I'm pretty sure we'll hear about this a lot. This is going to catch on fire maybe. I think. This was a gimmick.