HTMX + GO 15 Minute Quickstart (For Javascript Devs)

hey there my gorgeous friends on the internet today we're going to have a bit of fun it's dark in the room it's we're not doing JavaScript you know you think that JavaScript would bring the darkness in but we're going to have a bit of fun with HDMX and go I don't know I've been enjoying it I've been dabbling in it for the past couple of days so we're going to set up a wi server here and just do like a quick to-do list and I'll show you just like the beauty of the Simplicity of it and we're not going to have a node modules let that sink in no node modules let's get going okay so let's get going the first thing we need to do is install go and we can just head over to go.d and don't worry if you just know JavaScript you don't know anything about go I'll try to break down all the code that we're going to write today so let's download here I'm on Windows I know I feel like I'm the only Dev on YouTube that just what it is what it is I like my games I like my fortnite so after you have this installed you should be able to head into your terminal and then if you type in go you should be able to see the list of commands here and you can do Go version like that to see that we're on 1.2.2 okay if you don't see this again if you're Windows you might need to set the environment variable I think it set it automatically just like when you install node.js but in case you it didn't work for some reason uh just head over into your environment variables here and and the path where's the path here path you can add a new one as you can see this one's here let's search it here see program files Go B that's where the executable is so we'll just add it there and we're good to go so I just made a new directory here and the only two files we're going to need is this that what index H we're familiar with that one and then one more called main dog that's it that's all we need no modules no nothing so every go Application is essentially part of a package and we can Define that here at the top with the package keyword like that so in this case it's going to be main all right so it's going to be our main function that's going to execute our application so you can Define that with the keyword Funk like that it's very funky and then you can open it up like that kind of looks like JavaScript the rest of this I like to actually print something out on the screen we can import this fmt package here like that and then we can use the command print line like that say something like Hello World okay and that's pretty much all we need so we can open up the terminal and you can run mpm run o careful that's not the command we want so we can say go run and we'll just say Main dog go like that and as you can see we have hello world and once that completes the function completes as well and our application closes so just like how node.js has all these different like packages pre-baked in like making a HTTP server uh go has the same so we can just set up a HTTP server or do templating uh without installing additional packages so let's go down here and if we do a HTTP like that see as you can see we can automatically import that and I really like how it does it where it just does like like a parenthesis and adds it like that that's pretty cool so here we can add a handle Funk like that there we go and then here we can Define like well where do we going to where do we want to go well let's do slash right so when we hit the slash then we can run here a Handler so we can do a function here so let's call this so let's call this the to-dos Handler like that so I just go up here to the top we'll remove this hello world for now and make a bit of space here so we'll Define this to Handler like that and the way we do it here is going to be this colon colon double dot what's the double dot called again equal to and then we can use the funk keyword like that so we have a writer here so this is a HTTP do response writer like that and we also have here the HTTP request so that's how we can Define it like that so here we can also use uh Ghost templating Engine to basically parse this index HTML and then we can also pass data through it if we want oh before we do that let's also install this package here so if you search up go uh okay there we go it errored out but here is the package that we want to get okay so let's install this as well so in here we're going to Define a variable let's call this template like that and we'll set this equal to template like that let's see if that Imports it see we can import this package as well and then in here we can see template. pars files like that and we can pass in the index.html so now down here we can get that template and say execute on it and here we can pass in the W which is going to be our response and then here we can pass now nil or we can also pass down some data so let's just make a quick data here at the top so we'll make a data variable and we'll set that equal to we're going to see map here is going to be a string and we can also create a type up here at the top so I'll say type to do and then you need to add a struct like that and then here we can define an ID for example so I can say ID that's going to be an integer and then I can also say a message here that's going to be a string like that okay so let's go down here and I'll say this is a type of to-do and we can open this up let's call this to-dos like that and I'll just add one too in here so the way we can do that is say to-do and I can pass in the ID that's going to be one and the message of buy milk or something like that so now that we have this data defined what we can do is send it through to our index HTML so we can just pass that down like that so to actually put this up and serve it we need to run HTTP listen and serve and we can do it on Port 8,000 here and we'll pass nil here for the second parameter I think if you want to run a custom um Handler here you can pass something down uh but you can also do here if you go to the beginning you can do a log off fatal so if something goes wrong it'll just terminate the program and console log it out uh to the terminal here so let's see what's wrong with this uh this might not import see you might need to wait a second and click or my machine is just being very slow today so let's it save and if we run the program again there we go you might get a popup like this I think it's my firewall uh let's open up the chromes so we'll go over to Local Host 8,000 and let's see what we get nothing why is that well let's head over to our HD L we have nothing here so let's set something up go HDMX and let's say woo let's hit save you need to terminate this and rerun this there we go let's head back here and there we go we got the woo yay we are up and running so since we're passing the data down here right we passed the data uh we have access to that in here so what I'll do is just set up a quick like UL here and what I want to do is actually like Loop over those uh to-dos so you can do double curly brackets like that and you can see range. to-dos like that so that's our to-dos here so we're we're mapping over it and then we can close it here by adding an end like that okay and now in the brackets here we can just do an Li and we can output the title for example I don't think we named the title we named it message Mage so let's do message like that and let's H safe so let's rerun this you can do uh I think node modon works as well but they have a go equivalent which doesn't work on Windows only if you do it through the uh Linux subsystem but I didn't set it up yet so sorry about that well let's try this again there we go we got buy milk let's go if you enjoy the Simplicity of go so far you'll also enjoy the Simplicity of today's sponsor brilliant brilliant is where you learn by doing with thousands of interactive lessons in math data analysis programming and AI with brilliant you're not just memorizing facts you're developing critical thinking and problem solving skills through interactive lessons this method not only helps you understand complex topics but also improve your overall cognitive abilities consistency has always been a key to growth and brilant makes this super easy with b-size lessons that you can just complete in a few minutes each day recently they launched a suit of new new data courses perfect for anyone looking to dive deep into Data analysis you can explore topics from Bas theorum to multiple linear regression using real world data sets from companies like Starbucks and Spotify so check out the link in the description below or visit brilliant.org develop byed you'll get 30 days full for free and also 20% off your annual subscription thank you so much next up let's also set up a form so we can actually get some data and pass it down into our Handler here and create new posts so let's just go down here and we'll create a form there we go uh for the action here we're going to remove this because we're going to add HDMX so let's open this up let's do what should we do in here let's do a label so this is going to be for the message so let's call this message like that and right below here we're just going to add an input for now and we're going to add a type text that's fine we'll do an ID of message on it and also the name of message like that we'll also do a button to submit this so a button with a type of submit and let's name this create like that okay so we're going to add HDMX to this we're not going to go like super crazy in depth on anything here I just want to kind of show you uh kind of a basic of it so let's head over to HDMX and all we really need to do is add the script tag here via the C ddn so let's copy that over so let's copy that over and paste it somewhere up here like that and that's it we have HDMX hooked up so now we can display the new post anywhere we want with a couple of directives here uh so first of all to actually submit this post to a specific Handler we can call the HX directive post like that and we can set this equal to slash add too like that and and let's save and we'll leave it at there for now let's create this Handler that we just made so let's go back here we can say HTTP do handle Funk like that again and this is going to go over to what do we name it add too oops make sure you have add to do like that comma make sure it's not single quotes that won't work and we'll create this ad to do Handler up here so let's just create a variable here we can call this message and we can read that form value from the request by saying r. poost uh form value like that and then the name that we gave it in this case it's message so we'll pass that down there and then we'll create our template here so I'll just make a template variable we'll say template do must and we'll parse that index HTML again like that okay now our to-do is going to be a type of to-do there there and I'll just pass in the ID that we had up here right we need to Define that I'll just do a length like that from the data and I'll just say the todos I'll just add one to this so we'll say plus one I'll add a comma here because I also want to pass down the message like that okay so message message right from here there we go done so now all we need to do is take this to-do and send it back so we'll say template. execute temp oh sorry execute template oh come on there we go and then I'll pass in the W there and then here for the second argument here I'm going to pass down to do list element now what is this you're going to see in just a second and the last one is going to be our actual data right so we're going to send in the Todo so that's it here we forgot a slash let's add the slash in there and let's hit save so the second AR uh I messed it up element there we go the second argument that we passed down here we can actually add it in a block to like where to actually render out that specific data so check this out if I just go up here in the range I can open up double curly brackets and say block and I can say too list element like that so now check this out how cool is this I can go to the form and Define a HX of Target here and I can specify where I want to insert you know the data that I'm getting back from that post request I can say add Todo list like that so I can go here to the UL and add an ID of to-do list and I can also specify where I want this to be inserted so before or after the last to do so I can say HX Swap and set that equal to before before end like that and that'll insert it as the last value guess what we don't really need to do anything else that should technically work now so let's close this up and run this back up again we'll hit allow and let's give this a shot so let's open this up hit refresh oh no oh no oh and actually we we missed another end here so let's also add one more and let's run this back up otherwise we get this big nasty error so let's close that up run up main. go hit allow let's head back here to our server hit enter and there we go so let's give this a shot wowe and let's say enter and we are not getting the data back okay I wonder why and actually the reason why we're not getting back anything is because we never appended this new to-do to the data here so let's just do data like that and we'll get the todos there we go and we'll append data like that with the to-do at the end okay now if we go back here and check if we type something in and hit enter look at that we just got a to-do list up and running and barely any lines of code really that's all of it right there and from here the really cool part is you can also like hook up Tailwind to this I'll just do a quick CDN here so I just go here and import this like that let's head back to to our program and I have a couple of stylings already posted here so just post the script tag in here I'll copy this over this is pretty much from shaten uh so if I go over here to the input I can add that class um I can also do it for the button as well so let's just add some classes and then for the lii here I have the actual like card class that they use so that's going to be this one right here just as a super simple example like that okay and if we head back here and refresh now look at that JavaScript engineers in shambles lovely so there we go that's just a quick example on how to get HDMX and go up and running so yeah there we go that's just like a quick preview on how go and HDMX work together uh yeah if you like this type of stuff I don't mind learning more of this and also kind of like explore this together with you on this channel it's probably the worst time to also mention my ultimate nextjs 14 course but I want to mention it because it's fantastic it's 25 hours of content we learn how to build a full stack e-commerce website and I think it's cool because you'll learn a lot of things about web development from setting up two Factor authentification just like the whole off system uh creating products you know setting up drizzle and all of that good jazz so so if you want to have a look at that check out ultimat js. comom and yeah thank you so much for watching and I'll see you in the next one Papa Boy

Channel: developedbyed

Views: 16,319

Keywords: htmx, go, go programming, programming, javascript, developedbyed, go tutorial, htmx tutorial, web development

Id: aqGBqjvn0fw

Length: 16min 59sec (1019 seconds)

Published: Thu May 30 2024