HTMX Getting Started

HTM X I've been excited to dive into this one it's interesting to me because the idea that I could use just HTML to build a modern user experience on the web that sounds exciting one of the challenges with technology in our modern world is that it does have a barrier to entry if you want to become a software engineer or developer that build applications on the web or for mobile you have to have this extra ass set of knowledge however if we lower that entry level then it becomes a lot more accessible to everyone and I see that HTML X is that that way forward to allow us to provide that capability just dump jumping in here real quick htx gives us access to a lot of things that we would normally have to deal with JavaScript and CSS directly on we get Ajax which is HTP calls and web access CSS transitions web sockets and server sentiments directly in HTML this allows you to build modern user interfaces with the Simplicity and power of just the hypertext itself what's great here is I see they provide us a quick little example of a button we can see see that there's an HTP an attribute here of HX hyphen with the HDMX Library it's going to interpret this as calling this API endpoint and then taking the result of that value that's returned and then supplying it to the user interface directly see they even show when a user clicks this button it issues an Ajax request to click for slclick and replaces the entire button with HTML response that's what the outer HTML is it says the entire the entire bit here you could also have it replac just a click me by saying inner HTML I I'm pretty sure HT Max is really powerful with the ability to use just HTML we can build a full user modern user experience let's dive in let's give it a try I want to see what this is like firsthand taking a quick look here that I do see that it is a it is a JavaScript library that you do have to import one of the things I mean it's HTM X it sounds so foundational it's just a powerful capability that I thought maybe it was built into the browser and it turns out this is a library that you do need to import taking a dive in here it is a small Library about 14,000 kilobytes of minified and gzipped well it's okay that is that is a quite a bit of JavaScript for uh for a library but if you compare it to react it's significantly smaller in general browsers these days are very capable at handling the most modern user experiences with minimal JavaScript need you can build the user experience the user interface using just a HTML and CSS with HTM X it does Bridge a bit into that side of things and it extends some of the capabilities that you wouldn't normally be able to get with uh with just HTML alone the big one is specifically interacting with apis and data on maybe a server or a serverless system the motivation I see here that's listed it describes that why only anchor tags and form tags be able to make HTP calls from HTML directly that's kind of exciting I does that mean that every kind kind of a HTML element it looks like can make an HTTP request using HTM x o and we can add extra trigger all right well we can have a click and submit trigger to uh invoke H request it looks like I suppose we could add others like maybe an onhover every time you hover it's going to make an HTTP call somewhere ah and it looks like we get more than just getting post methods they link here to a bunch of methods so there's the the get the the head which only grabs none of the content of the requests just just the HTTP headers the post which is uh usually signifying State change on the server side put is typically used in a restful fashion that replaces the entirety of an existing or non-existing object delete will delete the resource I like that one cuz it's obvious what's going on there there's also this connect which I've uh not personally used or seen firsthand on a regular basis just kind of walking through what it mentions here it says starting a two-way communication so my initial thinking is you know a secure website socket ooh there's a there's a trace option method performs message loop back test along with the path and the target source that is pretty nifty didn't know that never needed that one before options method usually related to accessible resources from the target potentially like security restrictions or other kinds of things where hey you can't touch that over there but you can use these things you know that kind of situation and the patch which is a a modification of the server resource kind of like comparing that to a put where a put will replace the entire object you can say maybe update just the first the first name name of a user for example with a patch what's great is they provide a lot of examples here and probably the the most important one is the initial click the edit the ability to edit a form and have it update on the page directly and also issue API calls to the server so here's the example what I like about this is It's really straightforward and simple I can understand how that looks and works it's clean and it's minimal we can see that this is just displaying a user record Joe and we want to be able to edit Joe based on the details of their their name and email so here's our API call endpoint where we're going to be editing the data and there's a nice button here super clean I like this it's pretty straightforward and so once we click the button it's going to turn this uh I didn't have we would never have to write any of this but it's going to turn this into a an HTML form that automatically looks like this it is interesting how it does choose the the name of the input this is critical because this is what the server is going to see it looks like it converts this from the label into the the name put here same for last name and email is pretty straightforward oh how oh okay so it looks like here's here's the initial label so it takes this and then it will probably camel case all the the label uh the label names all right that makes sense I where did this address come from I don't know let's they have a demo on the page oh okay so maybe it's just a typo in their example let's check out the demo so we see here I'm going to look under the hood really quick okay here's their canonical example we have here on the screen screen the original HTML which is very simple uh div and label statements and then as soon as we click the edit button the HTM X is going to take over and we're going to see all this change so I click on that and we see it generated a form automatically for us oh gave a nice little submit button and a cancel button too so I can change this to Steven here we go gave it my name and we'll say Steven pubnub and then I click submit and then we can see that it Updates this all on the page but it also made an HTTP call to the server back end I'm pretty sure let's see if it actually did okay well I'm looking here I don't see any let's try this here yeah I'm not seeing any HTML call as or HTP requests probably because it's just a demo and there's no need to do it in a demo I guess uh but this is really powerful so this allows you to interact with apis on the web and you can provide just HTML and create a complete edit form directly and this provides the modern web experience where you don't have to do an entire page reload when you're submitting a form HT Max is a powerful JavaScript framework that turns your developer experience into just having to deal with HTML directly and you won't have to deal with JavaScript I really like this because this helps a lot in making just a lot of the common patterns taken care of for you automatically oh this is neat check this out uh it HTM X was something before it became HTM X it was intercooler all right intercooler JS uh it says uh intercooler 2.0 is actually htx 1.0 and that is nice it'll continue to support the 1.0 forever this is pretty powerful you can see the minimalism here which is is really important because every line of code that you create becomes Tech debt right that becomes you you own that code it becomes your debt which means that in order to maintain that functionality going forward you will have to ensure that that works it's something that you depend on uh and having less code and fewer characters means lower cost overall with the Simplicity of just having to deal with HTML directly that means that you can have a larger population of folks who would be able to contribute to the the code base cuz HTML is a lot more simple than dealing with JavaScript directly and I was clicking I was clicking the demo here you see okay it took me all right so we're we're we're done checking out the 1.0 let's check out the 2.0 we're going to we're going to try out the 2.0 here ah here we go all right we're going to give it a try we're going to try out this directly and we're going to run it into our terminal we're going to bring up our code editor all right to make this simple we're going to paste this into our HTML file HTML it's just a regular HTML file it's not like a a new fun extension which you know could have been htx but just HTML or whatever open up our text editor very simple okay so we have our library here at the top and then we've got our button which has an attribute here that says HX hyphen post supposed to invoke an API call using the same domain name it looks like to for slclick and then whatever's returned from there will be replacing the entire button we'll open up here uh the example and then let's see see let's make sure it looks all up Yep this is our our code from our file looks good and then if we click the button it should do something I see what it okay we clicked it oh it worked okay this is this is what we wanted to see it did make the HTP call and we can see here that you since I'm running it just from a file uh it file for slash clicked isn't going to do anything because there's nothing there to have happen also it's a security concern so it it failed but the good part is that it actually invoked the API call just my be I just clicked on the but Buton and I didn't have to do anything special import the HDMX Library directly all right let's see if we can uh see what it looks like if we do start a web server simple web server that's going to give us a file server here and then we open that in our browser really quick we'll click the click me and see what happens this time okay perfect all right this is what all right this is much better all right so it did do a post and it posted it against my endpoint and since of course it's not you know an actual API server it's just uh a file server it's going to post to something that it can't post to so it's still going to give it an error but the good part it is it's uh working as intended so this is really straightforward as long as you have a web server backend that can deal with the API calls on the front end it'll this is exactly what you need htx lets us achieve a lot of things that we would normally have to use JavaScript for directly now with HTM X we can use just HTML and some HTML attributes and this will take care of the majority of all the functionality that we need and expected modern UI we're going to walk through some of the examples that they provide here let's check it out they have a click to edit which is a simple button that simply posts data to a server a bulk update which lets you update multiple records all at once ah and a click to load which will load in Dynamic data that isn't uh included already in the page this is a good one I'm actually interested in checking that one out let's dive into click to load first I'm curious about this all right so we've got all our HTML here right on the screen it say it's an example it shows an Implement click to load on the next page and a table of data so if you have a lot of data you don't want to load the client with all the data you just want like the initial part of the data and then you can start incrementally adding more based on the user Us's requirement the user can click the load more agents button this button is very detailed there's a lot to it O A get page two I wonder if this Auto increments a replace me ah okay so here's the replace me ID and it will replace the entire thing I see okay all right this just looks like a snippet here of the important parts where I'm looking at the demo does see like we have more details ah okay so here's the initial data here's the initial table itself we can see table the header of the table which we know is going to be the name email and ID and then the data for the table which are the rows all right and they give us a load more agents button let's check it out I'm going to click it oh and it it worked it loaded more agents for/ contacts with the parameter of page equals 2 and it gave us more data 21 22 23 okay and if we click it again oh it gave us more data and what's interesting is it just continuously appends it over here and I was assuming that it was going to overwrite it but it actually is appending it to the to the screen interesting can we just keep clicking this forever ever I bet you we can all right here's another common one that I I like to see often is a lazy loading you've got a web application that might need to fetch some data depending on the user's need and a lazy loading is a good way to do that let's dive in all right so here's our lazy load demo we have it looks like it's going to be an image so we're loading the page here we see the image loading and then it fades in nice and pretty that's pretty straightforward so it it's not clear if I have to provide the CSS myself though kind of does it look like I need to no it doesn't based on what they're showing here diving into the HTML really quick and I just ran into their fake server side okay this is why I can that makes a lot of sense now looks like this allows us to override some of the interactions on the HDMX uh capabilities all right based on what I'm looking at here really quick is that I do see that the CSS was included and uh outside of HTM X sort of just like a little extra sprinkle of integration that shows you how you integrate CSS and HDMX directly pretty cool I'm I'm most certain in this case that we definitely have to hand write our own CSS to provide this kind of uh experience where the the image will sort of fade in like it does right there and it doesn't seem like that's something that's just natively included with HDMX so it's uh just a little bit of extra it's nice from a perspective to let us know how do we integrate CSS for custom experiences like this although on the other side it would have been nice if maybe that's just like a standard default that the library includes hmx lets us write all of our application logic in HTML directly without having to use JavaScript one of the great things in their documentation they provide a lot of UI examples let's go through a few of these examples let's check out the row edit the editing Row the example shows us how to implement editable rows so here's the table uh the normal HTML that we usually write and then we have a couple of attributes here that indicate how HTM X is supposed to interact with the HTML and the user's input usually when they click on something right okay taking a look here reading this HX Target closest TR which is going to match this here I believe it's going to provide this sort of uh end result you don't have to write this this is something that the HDMX Library provides for you automatically I am not familiar with this syntax here what is this what's uh what are they doing if the results this must be pseudo code I I assume oh that is not pseudo code it's something called hyperscript which is this enhance HTML with cons prce Dom event and acing features making which makes writing interactive HTML a joy I don't know I mean it is a little more simple and I can see that for sure it is all right let's try it we're going to press and hold oh pretty okay I mean this kind of stuff can be done with CSS if you're just trying to update the UI you don't really need any of this CSS NH HTML vanilla without any libraries can basically do that right there I'm typically a minimalist so the less dependencies the better so this is our edit button here when we click on that edit button it's going to take take us to this uh the hmx library is going to provide us with this HTML directly this is something that we have to write this is something that htx provides for us automatically oo neat it even includes a cancel button and then of course the save button when you click the edit you want to be able to save any of the changes you've made now here's a quick demo we've got uh our table that we saw in the HML before now we got this edit button we're going to click that and we can uh let's change John to to myself and put my email in there and click save ah fantastic so here's what the server API calls would look like we're doing a put which replaces the entire contact row there with name Steven email Steven and we get back a response from the server the HTML that we need to put in the place it replaces the entire row all right let's take a look at some more examples here see there's also an animations uh demo let's check it out uh it says hmx is designed to allow us to use CSS Transitions and to add smooth animations and transitions to our web page using just CSS and HTML I mean you you only need this part to be able to make that happen you don't need the HTM X itself though it is it is important to note that a lot of the HTM X capabilities are not going to be providing you much of anything in regards of a CSS or design of the UI so it is good that they have this demo here because it is giving us the scope of where HT Max is at it's only going to be providing that foundational communication technology that allows you to edit and manipulate data in a web app without you having to write any JavaScript however you do have to write some CSS if you want things to look pretty so we've got a nice smooth transition here it's a class named smooth uh transition everything oh okay so whatever is changed it'll transition to so if we change the the background or the color or the opacity it will animate for 1 second oh this is neat all right so we have a trigger event that says trigger every 1 second that's kind of neat so we can have it's going to do something every second let's what exactly is it going to do do here is it really going to make a web call every second the div will pull every second and get replaced with the new content which changes the color of the style so it looks like we started with red and it's going to go to Blue o and here we go here's the demo so the color swap demo we see what that looks like I'm just kind of curious to see what that looks like underneath okay we see it here animating it's being triggered every second the smooth it's going to swap between oh it's doing more than just one yeah I was wondering if it cuz see it's going orange red blue green all right we're seeing like a whole bunch of different colors more than was mentioned in above here but we are seeing it transition all right so we've got a fade out on Swap demo so uh oh a simple easy uh delete button so we have our CSS here that describes uh opacity to ease opacity for 1 second HX swap outer HTML swap 1 second oo interesting a neat little a new thing we haven't seen yet with HDMX so we'll click the demo delete me and O it disappears when building UI it is really nice to be able to have sort of those clean transitions that proove that user experience cuz you can and it it allows you to see that you've made an effect the user will understand that when they've interacted with the page it's a confirmation when something is changing more gradually rather than an instantaneous change so it's kind of a nice little addition there so we have another demo here fade in on addition in this case we see we're building on the last example where we can fade in the new content using HTM X added okay so there's it looks like there's a class here that it's going to be looking a class during the settling proc ooh settling phase okay and it says here from the the settling perspective that we can also write CSS transitions against the target rather than the new content using the htx settling class let's try it out let's click the button all right we click the button and it f o okay disappeared and came back can it does it do it again it sure does come back okay so very straightforward some simple CSS here uh looks like we've got some special class names that hmx is expecting to be able to make an improvement on that user experience it also looks like uh here's another example with anim animations that there is a class tools extension it's like interesting animations can be created using the class tools extension just check that out really quick here ah it's an extra Library you got to grab that and import it as well okay and it gives us the ab oh we get this new classes in class it allows us to specify a little more cleanly in interesting ways what that's going to look like based on the interactivity okay so that helps that's kind of a nice capability it's important because this allows us to change the UI as it's being interacted with gives us a little bit more control I see okay so it's going to toggle the class itself so we've got a subass here of toggle on The Faded which is going to be defined here very interesting Okay so we've got our our top level class here and it's going to toggle in the dot faded part which gives us this neat animation effect all right and then we have a nice final example here in the animation side of using a view Transport oh Transportation API view trans oh no transitions API all right here view transition API and experimental technology and MDM documentations the idea is that we can oh okay so it allows us to easily create animated transitions between different Dom States so as we manipulate the Dom and that's what hmx is doing on the most part it can provide an animation of before it's modified it can animate that modified unmodified State and then bring in the modified state so rather than just an immediate flip it can do some Nifty anim that seems pretty nifty so we have here defined our key frames and the name of the animation class itself so we've got several we've got one two 3 four of those and then ah look at this okay so this is kind of neat all right so this is not an HDX thing itself directly it's mostly involved with CSS and how HTML is going to be modified it's neat to show that this this example here cuz uh I'm I'm not familiar with this one it is kind of neat all right so we've got view transition old which is the slight it which is defined here and then we've got our HTML here which has the class slide it and then essentially anything that happens inside of here will follow these animation rules that's pretty neat I like that that's uh pretty powerful essentially we don't need to do any toggling of classes in JavaScript or any special HTM X implementation we simply just say here's the class and then anything that changes in here follow these rules for animation that's really powerful let's try it out all right so we've got the entire div here which is going to be these two things uh initial content and a button I click it and then who check it out there's the new content we click restore and then boom it comes back to the way it was all right so we can keep clicking this and it will flip back and forth between the two that's really cool that's neat because usually in order to provide an effect like that you would have to be toggling classes and have a state where you before any of the content is replaced you'd have to add like maybe a timer animate out and then replace the content and then animate in which is quite a bit of extra work this is pretty powerful so just taking a quick review what we had in the animation section here I was pretty satisfied with seeing that for the most part we're leveraging native browser capabilities and not so much the HDMX Library itself it is showing how HDMX will interact with the different classes and animations um it is fairly lightweight which is nice I like that lightweighted overall I'd say HTM X is pretty powerful and its capabilities that makes it really straightforward and easy for us to use HTM L directly rather than having to jump in the JavaScript there was no examples that we ran into where we had to actually use JavaScript which was a whole point of HTM X is just using HTML directly and getting that interactive modern user experience so I would definitely say it achieved the goal from that perspective it is a bit large amount of JavaScript to be able to handle that when the majority of the browsers and capabilities from a modern UI perspective can be done with just HTML and CSS directly itself the interactive part where you're making API call calls yes you will need JavaScript for that if you're not using HDMX directly however the majority of the user experience is still possible with HTML and CSS exclusively without any libraries whatsoever and I was kind of expecting that HDMX would bring with it some of that visual UI experience because that's a large part of it however you still have to jump into CSS to make that work so the strong part for HDMX in this case is going to be its foundation of being able to make API calls change that data on the UI using modern techniques where you don't have to reload the entire page and this is great from a fantastic user experience and it's basically what you expect these days on the web and in any application

Channel: Stephen Blum

Views: 2,996

Keywords: htmx, ui, webdevelopment

Id: Wgvr9zOKyJo

Length: 23min 40sec (1420 seconds)

Published: Tue Dec 05 2023