HTMX - What they don't want you to know!

hi folks we've got a new front end framework on the team but the thing is it's only HTML so the new library of framework is called hmx and it's just simply just HTML and it makes you use no JavaScript like literally zero JavaScript code to build web applications and user interfaces so HDMX is a new front end framework that adds superpowers to your HTML it's not exactly a front-end framework it's more of like a library that allows you to add functional ities on top of HTML so you can eliminate JavaScript completely so here if you lot anything introduction in here it gives you like oh HTML gives you access to Ajax CSS transitions websocket service and events and all of those are actually directly inside of your HTML file and of course it's going to use attributes so if you remember the old good angularjs like angularjs V1 where it just used attributes everywhere where allowed us to do something like this where we can do oh initialize the application or maybe the click in here so you can do this is actually could be you know you map a single click to a function but of course it's a little different because angle J L does use like JavaScript alongside that one while HDMX is completely independent from JavaScript it doesn't actually recommend using JavaScript at all because everything that you should do everything pretty much should be done through HTML through the attributes and the added syntax that hmx actually provide and it's actually only 14 KOB minifi and G it's like completely dependency free and extendible and it supports Internet Explorer 11 of course you can read about the motivation in here how it works and they have like really nice small book in here I haven't read that one but it looks nice and if you look at this at GitHub it has almost 22k stars and everybody like literally everybody is trying to actually make a big of deal with this so in this video I'm trying to actually go through and actually bring HDMX and try to build a simple application with it and see the cons and pros of HTM Max and does it actually eliminate JavaScript out of the picture and and if you compare it to something like reacts is it good so I tried to visualize a small diagram in here of how like the evolution of the front and development going from the vanilla HTML back in the days to where we are now so apparently it looks like we started with nice van HTML with CSS everything was good we were making good website with HTML CSS some JavaScript that was pretty nice then we actually all the sudden decided to invent something called Jer which has been very helpful in the past years before you know the new era friend development Frameworks like angular and react everything was pretty nice with jQuery it was a pretty nice library that allowed you to do pretty much everything that would be harder to do in vanilla JavaScript and Dom then all of a sudden angular came out out of the picture in here from Google and they invented the angular V1 particularly and it was pretty nice of course we had to do a lot of stuff we have syntactical sugar on top of HDML we can like call functions from our HTML we can call our JavaScript functions from our HTML very easy using attributes we can have Scopes we can have router so many things that was pretty nice and now we are at the era of react and of course we are all react lovers we all love working with react components and everything that goes with the react ecosystem that's pretty nice so far so good and everything but for some reason some guys or some folks actually decided to invent HDMX which I'm not against or anything it actually looks pretty nice but we found ourselves actually going around in circles and actually finding a lot of complexities and a lot of complex for example if you try to build a simple application a simple web page I mean you have to install a lot of Building Systems CCD uh build and deploy and so many things going on so why not just simplify things and just go back to the rout in here and actually invent something that is called HDMX so it's just simple HTML like that's literally what it is with an added syntactical sugar X in here with some attributes some functionalities that actually eliminate the use of JavaScript so you can easily and quickly set up your web pages and get started with them without that much of complexity so that's as far as I can see as far as like works with HDMX and build some project and try to build some web pages with it so everything looks good so far and everything is pretty pretty simple now I went through and actually use HDMX to build this really simple application here I'm not going to say it's application just a web page that when you click on a button here it goes into an API outside fetches the users from that particular API and renders so simply here if I click on that one it's going to PR me for oh are you sure which ftch the new list of users you click okay and the AP is going to return the new ones it's going to render the users in here with images and like you know the username the email of the user and so on and so forth it's pretty simple so that's of course that's we've been doing that in reacts and many other libraries forever now so let's go and see how we actually build this using HDMX to understand how actually hmx works behind the scenes so if you go to the documentation in here you can read like HDMX in a nutshell to understand more about it but we're more interested about the the installing so if you can go in Ste mix in here is a dependency free and you can as simple as that because we're back in the old days of HTML and no longer need to install anything on mpm or host or bundle anything with pack or any bundle like V or something all we simply need to do just use a script tag in here to point to the HDMX version you want and you put it inside of your HTML kind of like file and you're good to go I mean this is actually the recommended way to do it but of course you can actually go ahead and D like download a copy in here like amenify copy and point to it which I think is a pretty good one for more of a production thing but of course you still got the choice to use mpm in here or any little package manager to install it locally and maybe you want to have use it with weback so for me of course I'm going to head over with the simplest approach I'm going to use the script tag in here like the all good days and I'm just going to go ahead and just copy the script tag in here and put it inside of my HTML file so here I have my simple project in here so I go to index.html and this is actually where all the magic happens and this is actually where all the magic is happening so so simple in here I'm loading tayin CSS first from the script tag and I have like htmo I'm going through the latest two HTM X and I'm actually loading a couple of extensions because htx is actually the core library and you can extend it with some extension so like in here I'm extending it with a c side templates that allows us to use these templates and I'm using a template called mustache it's veryy much like handlebars and if you're familiar with like HMO templates mustache is is a very basic one okay we we don't need that line of cutting there and that's it and it just like I simple is that HTML is just simply an HTML file you have HTML code inside of it and all there is added a new is some extra parameters or attributes that actually allow you to do pretty much everything so let's get started actually understand how this button works because buttons are a very crucial part of any application because they are the way to interact like for users to interact with the web page for example this button will actually fetch user data from an API endpoint and actually grab it up and render it on a specific container container so to better understand that we have got a simple but in here so it looks like a pretty simple B it has a lot of added attributes like a lot of HDMX added attributes for this and all of them like literally all of them are prepended and start with HX so for HDMX any attribute you have and you find it starting with HX you're going to immediately know that this is an HTM X attribute so for example here we're telling it to do a get request to this API when it's clicked so H HX gets in here will actually send your API request like get request get HTP request to this API end point when the button is clicked and of course you can do the same thing for like HX post or put or I don't know delete or something any HTTP method all of them are actually put in here um for the confirming here we're telling it to actually whenever we click we display this uh warning on top here we can click okay or cancel so just like a small confirmation which is good and now for the swapping in here we telling it how is swapped by default it's always going to be in your HTML so I'm going to leave for in demo for now and the target is actually you tell it which div or elements for any other element in here that is inside of the Dom with like in here it's cly we're using CSS selectors with an ID so we tell it's an element that has an ID of content which is this div element right over here so anything is just going to go ahead and grab this Target and actually replace all the this in our htmo we'll go ahead and replace all the content inside of that one and put the contents it fetches from the basically from the API inside of the Devan so that's basically how rendering works and of course we got some like indicator in here to do a loading so whenever the API starts actually is going to go ahead and do an opacity one on this indicator and when it's done it's going to turn the opacity zero so that's why we're just doing like ID in here and we're giving it this HDMX indicator inside of the CLA so the CSS would work with opacity zero and one actually can toggle between both of them and last but on Le in here we're using some mustache custom to plane in here to render the list of users of course because I already said in here we're using mustach in here and we actually telling it to use like this extension the C side template extension from HTM X particularly and of course if we go down here because we're pointing to Fu and fu is actually a template so an HTML template in here and of course everything inside of that one is actually using a mustache syntax a mustache template syntax in here to render stuff so for example we tell to access the data object and inside of it we're accessing the users array and we're like looping through it and actually rendering a div for every single user on the users array so simply in here we're rendering a div for every single user with like an A in here hyperlink to click on it and an image of the user and just just accessing the attributes of the properties inside of the user so each object has a property first name email username so all of those are actually like using this template literal sort of like brackets to access those particular variables and here we just telling it to end and close this scope and as simple as that We're looping through all of the users we're rendering a div for every single user we're accessing all the properties of that particular object and we render it that's basically the same thing as you do react like react. map or values. map and you go through and actually map everything and you render different every single one of them and actually just access everything and that's what's actually allows us to when we click on the button here we get this confirmation and it's going to go ahead and render every single user so for instance if I go back and actually remove this image and actually go back in here click on the button right again click confirm I'm not going to get an image because I completely remove the image from here and of course if we put it back go back in here uh do the button and click on it there you go we're going to find the image and we added it simple and actually was able to do a multi-piece sort of like a website in here where you can actually click on this image and added this uh hyperlink with an hrf that goes to the single page. HTML and it pushes to the URL in here and actually does the outer HTML so it kind of like replaces everything inside of that one and have this single page user HTML which is a simple another HTML page in here that has a body and everything B actually loads the data off a single user like it goes through users and one and it loads the first one in here when the body in here so it loads it on the body so like whenever the web page loads immediately once it goes like through in this one actually loads the data of a particular user if I go back into in here and try to click on a single user it does like some refreshing in here it goes to single page user and actually displays all the users data in here for you which looks pretty pretty nice and it's actually a small proof now of course there's a lot more to HDMX than just a simple page transition and and loading data and everything from like animations in here really nice animations with CSS Transitions and stuff like that for example this is a simple example to progress Bo in here for example if you need like to do a progress bar there's a small demo in here for that one like shows you how to do a progress bar maybe or a bunch of other UI examples in here and how to edit finish scrolling um you know file upload dialogues in here for the browser and boot boot strap uh sortable keyboard shortcuts so much more and all of that literally all of that can be done without even writing a single line of code of JavaScript which of course pretty pretty nice and sometimes it's actually pretty pretty handy so the way I actually see HDMX is actually very lightweight and actually very very lightweight you don't even need a single line of JavaScript to type all you actually need to deal with a simple HTML with some added like attributes you can easily learn about and most insurance here is actually very easy to learn I mean the learning C and actually how you can get started and building applications just like is within minute literally so that's actually what I like about it but in my opinion I think it's actually more of a good for small little applications in here or maybe just to quickly integrate with a server you already have to like make a small web pages or whatever but what I think is actually for bigger large scale projects and frontend projects in here with Advanced UI components and a big team sort of collaborating together and working together I don't actually see it coming near that like modern Frameworks libraries like I don't know maybe react view solid and many others it's actually very very complicated to compete I don't think it's actually meant to compete I don't think HDMX is meant to be compared like according to those big Frameworks and libraries it's more of like a lighter weight an advanced version of HTML that makes you do super powerful things so thing goes for watching this has been HDMX and see you guys hopefully in the next ones

Channel: CoderOne

Views: 77,951

Keywords: htmx, htmx react, htmx ajax, ajax and react, react ajax, htmx for beginners, getting started Htmx, Htmx frontend, Htmx Framewor, Htmx javascript

Id: nNtELewCaD4

Length: 13min 27sec (807 seconds)

Published: Mon Nov 13 2023