HTMX: The Game-Changing Alternative to React

let's build out this cool AI driven story generator using just five htmx directives and Zero Custom JavaScript on the client so what is htmax well htmx is a 34k JavaScript library you add it to your page and then you can go and add custom attributes to your HTML online so you can say for example post this form to this endpoint take the HTML that comes back and put it over in this div and it makes it very easy you have to write exactly zero JavaScript in fact I'm going to show you the exact same application written in xjs so you can do some comparisons you'll see that it's 70 lines of react are replaced by just those five htmx directives and Astro but of course I'm still a big nexjs and react fan I'm in the midst of writing a course on it right now you can go and check out my progress on that as well as getting xjs tips and tricks over pronax.js.dev but in the meantime let's try out htmx and use it to build an AI driven UI let's get right into it [Music] now in order to use htmax you need an HTTP server that's returning htmls in this case we're going to use Astro we could use go or python or whatever you want PHP let's use Astro we'll call it hdmax AI we'll start with an empty project all right looks like we're good to go let's bring up vs code let's bring it up and see what we've got all right clear enough now we're going to bring in Tailwind to make it easy to make this thing look good now it's pretty easy let's go over to our home page let's change out the title make it Astro hmx Ai and then we'll place the body with the form that form tag is going to include an input as well as a button to do the submit then down below that we're going to have a result div we're going to go take the output of the server and put it into that result div all right looking pretty good now we want to try out htmx so the next thing we want to do is bring in the htmx library into our project I'm just going to go copy it into our public folder so this is just a copy of the htmx library and bring that onto our page all we need to do is bring in a script tag the is in line is an astro thing telling Astro to not actually try and bundle that script all right so here's how this is going to work this form tag when you hit submit is going to do an Ajax post to the slash prompt endpoint and that's going to return HTML and we're going to take that HTML and we're going to put it into the resultive down below so we're going to use one htmx tag the HX post directive to tell htmx that instead of doing any usual form post we want to use an ajax form post and we want to send it to slash prompt and then we'll give it HX Target and that will tell it where to go and take the output of Slash prompt and put it into our page so of course we need slash prompt so let's go over and create that in a Pages directory so in the dot Astro we're going to go get that prompt that comes out of the form you can see that the input has the name of prompt that comes over here gets mapped to prompt and then we're just going to go and put it in italics and return it what's it save and give it a try all right so we're getting this form data cannot be parsed error that's because Astro is right now running in static mode what we want to do is instead turn it into an SSR server so that actually handles each request dynamically that's actually kind of what htmx is used to dealing with because it needs to do things like send form data and get values back dynamically so let's go and turn our Astro server into an actual server to do that we go into our Astro config and say that we want the output to be a server we then rerun and now that works just fine all right so this is where it really starts to get fun so what we're going to do is prompt is actually going to repeat onto itself so what's going to happen is the initial page is going to post to slash prompt and then slash prompt is going to return some HTML that in turn has some htmx directives on it those htmx directives are going to tell the page to re-request prompt after 50 milliseconds so let's start off with that so we're going to start off with HX git that's going to tell htmax to do a get to slash prompt where we did a post we're going to use the two to differentiate post is going to start our request and then get is going to go and cycle around on a request HX Target is like we had before we're just going to Target ourselves the result and then we're going to use a trigger to automatically do that after 50 milliseconds so let's get a try all right so what happens is we get one response back and then because we're not posting we don't have form data so we need to go and check if we have a post so first we'll check over our post and then for prompt we'll just start with an empty string and if we have a prompt then we'll use it let's try it again all right cool looks like we are refreshing every 50 milliseconds all right so now this is going to go on literally forever it will not stop what we want to do is we want to have a way to manage requests we want to start a request we need a post and we have to have a way to get the status of that request continuously as we call back onto ourselves so we're going to create a request Library let's go give it a try so in Source I'll create a file called request.ts and we'll start off with a map of requests given a request ID a string we're going to have a completion which would be the string or building and then whether or not we're done and so whether or not we're done is going to tell us whether we actually want to stop the process so so that's going to have in the memory of the server then we have a function called get request that given a request ID will just give us back that request all right now we create the start request function that's what's called when you do slash prompt and you give it the prompt we call start request with a prompt like dog and then we create a request ID then we create an entry into that request lookup that has the request ID and has the completion and as well as the pending pending is currently true because we are pending on the result and then we return the request ID now I gotta actually go and do something with it so let's create a little timer that just adds The Prompt onto itself a bunch of times and finally finishes when it's created a string that's big enough so to do that we create an interval where we go and add on every 100 milliseconds the prompt to a completion string that has a bunch of prompts already added onto it and then after we hit 100 characters we say that we're done pending is false and we clear that interval so we'll start by bringing in get request and start requests now we're not going to use the prompt down here anymore so let's change that to request ID and now in the post we want to do that start of the request so now we don't have a post we need to get the request ID somehow so let's go and add that on to the get and then we can say up here if we didn't get a post then we'll get the request ID from the search params because we just added it to the HX get and then finally we have a request ID so let's go and get the current value of that request and now down here let's just use the completion string that we got back and finally we don't want to always go and do that load of 50 milliseconds we only want to do that when we are still pending so go and put a little conditional logic into the trigger so if we're still pending then we want to do the load delay otherwise just no trigger let's hit Save and Go all right looking good dog dog and we're done awesome okay so this is basically how we're going to stream the open AI request so now we need to go and replace our little interval with a request to open Ai and we'll be done all right so now I'm going to go and bring in an open AI file that connects to open AI of course all this code as well to you for free on GitHub the open AI file includes this complete with chat GPT so it takes a prompt in this case a funny story about a dog and then it has a couple of different things it has a token callback that says hey when we get stuff back from Chad gbt go and call me back with a piece of text that has a completed string in it and then when it finally ends we get an end callback and we get some options if you want to add some options what we're really doing is making an https request to openai.com so you need an open AI key that needs to be in your environment body that we're going to send to that open AI endpoint it's going to use the GPT 3.5 turbo model gonna get a bunch of tokens it's gonna have a prompt in it and it's going to say most importantly stream is true and so it's going to send back to us a bunch of data packets so that's going to come in on this result callback so we're gonna have data it's going to have a bunch of chunks in it they're going to start with data we're going to then go and get out the choice from that data and then finally when it's all over we get an end and that means the stream is ended and we get the end callback all right let's go integrate this into our request module to do that we can bring in our complete with chat you EBT from our open a module and then down here where we had our interval we simply replace that with a call to complete with chat gbt we give it our prompt we give it our text callback so that we set the completion every time we get a new text block back and then when we're pending and then when we end we set the pending to false hit save let's give it a try there you go all right now there is one more thing about the asteroid implementation that I want to get into and that's that when you call slash prompt you're getting more than you need on the response so if we look at Network and I refresh and then hit submit we see we get a lot of prompts here and then the response has a lot of Tailwind as well as the script tags for the page and we just don't really need any of that so what we can do is use middleware to strip that out so just for prompt we're going to go and strip out Styles and script tags so let's get rid of that all right so in the source directory I'm going to go create a new file called middleware.ts and into there Opening Our middleware implementation it's got some documentation up at the top and then what we do is you take every request that we get we run it and then we see are we on like the slash prompt route and if we are then we take what we got back from the output and we just cleave off any style or script tags using regex and that's about it so that cleans the response going out all right let's try it again let's go over to our Network and now we see that we get really clean responses coming out of that htmx endpoint now they're probably going to add at some point fragment support to Astro to make this a lot easier in things like PHP of course that wouldn't be a problem of course you do want to sanitize the output if your templating system like PHP for example doesn't sanitize automatically turns out Astro does sanitize automatically so there's not any kind of security issue when it comes to having xss go from the user prompt out to open Ai and then come back all right I mentioned that I created an xjs variant of this of course that is available to you on GitHub for free so you can take a look and try it out for yourself the important parts are over on the page route we have exactly the same HTML essentially but we don't have the htmx attributes and then on submit we call the API GPT endpoint which we created over here in our API route that starts the request and then there is an API a gbt request ID route that goes and gets the current output of of chat gbt for that request so back into our page we use an interval that we write in JavaScript to go and take that request ID and then go and get the output from it see if it's completed and finally put the result into the result completion tag which is then put into the result tag so the rack version is a lot more imperative we're telling the client what to do as opposed to declarative on the htmx side we're basically telling htmx hey this is what I want these tags to do and it handles all the infrastructure of doing the posts and the triggers and all the rest all right so certainly you can see why people are so excited about htmax you can do some really cool things with very little or no JavaScript on the page besides htmx you can just use those awesome declarative attributes on each HTML element but there are some concerns so one of which is security if you are on a server like a PHP server that does not do Santa's you're going to want to make sure that the data that you send back to htmx is sanitized before you send it out you don't have to handle that in react because react unless you do dangerously set interhml isn't going to do use the HTML raw that it gets back so yes htmax is essentially vulnerable to cross-site scripting attacks if you don't do the sanitization yourself because it's not going to do it for you another question I've heard a lot about htmax is as a react developer should I learn it and I think you should I think it's good to know different models of creating web applications the imperative model which we see with View and spelled and solid and quick and react is one way of doing web applications this is a dramatically different way of doing web applications and in some cases I think it's perfectly fine certainly for applications low end and actually even cool stuff like this what I think is kinda where you might expect a react app to play I think hdmax does quite well with these sort of applications so I think it's definitely worth your time to learn of course if you're an h2x fan I would love to hear from you in the comments down below if you have questions about htmax just put those down there as well in the meantime of course if you want to catch up on all the cool Pro next JS stuff that I'm doing be sure to go to Pro nextjs.dev and sign up on this video you can hit that like button if you really like it and you can hit that subscribe button if you really really like it in the meantime hit that Bell and be notified the next time one of these blue color coders comes out

Channel: Jack Herrington

Views: 75,718

Keywords: alpine js, api, astro js, chatgpt, css, htmx, htmx tutorial, jack harrington, jack herrington, javascript, next js, nextjs, nextjs 13, nextjs 13.4, npm, npm react, open ai api, openai, react, react advice, react app, react bootstrap, react component, react css, react form, react github, react hook, react js, react native, react router, react state, react typescript, reactjs, router, typescript, vite, vite react

Id: DuGyH5RvfbY

Length: 14min 10sec (850 seconds)

Published: Mon Aug 07 2023