Getting started with htmx

this video is brought to you by phb storm as a backend developer I'm not always up to date on what's going on in the front-end world but I occasionally have to dabble in front-end development when that happens I like to make sure that the libraries I'm using make my life as easy as possible one of the front-end libraries that have been making a Big Splash in the community lately is the HTM X Library which makes it a snap to with JavaScript without leaving the comfort of our backend code in this video we'll discuss what HDMX is how to install it into your project and what it can be used for hello developers and welcome to the PHP architect Channel if this is your first time here my name is Scott kek Warren and on this channel we discuss a wide variety of topics related to the PHP ecosystem make sure you subscribe so you can get our latest videos when they're published to start HTM X is a JavaScript library that gives us helper attributes that we can add to our HTM ml that gives us easy access to Ajax CSS Transitions websockets and serers side events without having to write a single line of JavaScript this allows us to build modern user interfaces without getting bogged on in a lot of JavaScript code HDMX is incredibly small weighing in at about 14 kilobytes after it's been minimized and it doesn't require any dependencies so it won't bog down our site with a bunch of extra HTTP requests the HTM X website claims it reduces codebase sizes by 67% when compared with react codebases I can't account for that but I could see that happening installing HTM X is as simple as including it in your HTML and you can start using it with zero configuration if your project uses npm and webpack it can be installed using npm and then imported in the standard way using webpack the core functionality of the HTM X Library is the set of attributes it enables that allows us to issue asyn us JavaScript and XML or Ajax requests using HTML attributes instead of JavaScript code this includes being able to make get post put patch and delete request to any URL by just prefixing those actions with htx for example if we wanted to make a get request to the user's status page we could create a div that has an HX dgit attribute and when the user clicks on the div HTM X will cause the browser to make a get request to the URL user status and then load the response into the same div more about HDMX after this word from our sponsors PHP storm is a Cutting Edge ID tailored specifically for PHP and web developers if you haven't used it before or it's been a while since you last tried it now is the perfect time to check it out PHP storm has recently received significant performance enhancements and has an ever expanding feature set now I'm a recent convert to PHP storm and I love it one of my favorite features is the ability to rename a class and have PHP storm find all the references and just automatically fix them for us curious to see if it's the right fit for you head to jetb brains.com phpstorm to learn more and try it out with a free 30-day trial code smarter not harder if we don't want to replace the contents of the same div we can use the HX Target attribute to Define where the content should be placed after it's been retrieved we can also use the HX swap attribute to Define how the retrieved data will be placed in relation to the Target element the default is inner HTML which will replace the inside of the target element or outer HTML which will replace the entire Target element with the retriev data these will cover most of the common use cases but there are other options like after begin before begin after end and before end to add the retriev content to the Dom instead of replacing something there's also a delete Target that can be used to delete an element after the request is successful now hmx triggers Ajax requests using the natural event of an element which includes the change event for inputs text areas and selects submit events for form elements and click events for just about everything else however we can use the HX trigger attribute to specify which event will cause the Ajax request for example if we wanted to load our user status when the mouse entered our First Development we would specify the HX trigger attribute with a value of mouse enter we can also specify modifiers to the trigger that will cause the request to only fire once only when the value changes delay the request for a set period of time or my favorite throttle the requests so we don't make multiple requests to the server the throttle modifier will prevent extra events from occurring before the time limit has been reached any new events will be discarded the HX trigger attribute also supports a reoccurring timer so we can pull data instead of waiting for the user to act one of the more interesting use cases for HDMX is the ability to load our entire website using a process called boosting this will use an Ajax get request to request a link and then replace the body of the site with a response the boosting itself takes a snapshot of the Dom before it swaps out the new content and then when the back button is used it reloads the content from memory if the content isn't found in in the cache it will request it again to validate our inputs HTM X uses the HTML 5 validation API and will not allow a form to be submitted if a validatable input has data in it that is not valid lastly HTM X has support for websockets and serers side events to provide even better Dynamic support for our web applications as a brief recap HTM X is a library to give us easier access to JavaScript features inside of HTML it's easy to install and easy to use I hope you enjoyed our video If so make sure you subscribe comment share and like as it does help others find us have you started using HTM X in your web application let us know in the comments below or shoot me a message on Twitter or phpcs scottw Warren I would love to hear how you're using this as always this is Scott kek Warren for the PHP architect Channel signing off and reminding you to keep watching keep coding and keep reading

Channel: php[architect]

Views: 1,523

Keywords: PHP

Id: 6lYwYEh9KtI

Length: 6min 33sec (393 seconds)

Published: Mon Oct 23 2023