A Very Simple Tech Stack

it feels like you need a PhD to build web apps these days tons of Frameworks State managers components bundlers compilers or hydration strategies are just a few of the many things that you need to keep track of oh God kill me now so let's switch it up a bit get back to the basics and figure out if we can build a modern web app by working smarter not harder in this video we'll mix together the two things I'm best at avoid working too much and wasting time and money in the stock market we'll build a small app that allows us to search for various stocks and their prices using htmx on the front end go fiber on the back end and Uno CSS to make everything pretty Simplicity is the word that best describes this stack the go language is famous for its power and these abuse and fiber built on top of that by providing a performant web framework with an Express inspirative experience HDMX takes an interesting approach to building uis by giving developers access to Ajax CSS transitions websockets and servers and events directly in HTML in other words with htmx you can build modern web interfaces without writing a single line of JavaScript finally we'll need to style our app and we can do this with Uno CSS an instant on-demand Atomic CSS engine which allows you to use predefined utility classes instead of writing your own CSS so as you can see the theme of this video is building apps by writing as little code as possible before moving forward let's quickly review the architecture of this text stack everything will be held together by the go fiber web framework whenever a user will make a request to access our app the go server will intercept that request and will perform various business logic actions then it will compute the HTML on the server and send it to the client which will render the page instantly one small thing to keep in mind here is that the rendered HTML will actually contain htmx markup so whenever the HTML reaches the client your app is almost most instantly interactive with no hydration step required I'm saying almost instantly interactive because the browser still needs to download the 14 kilobyte htmx engine and execute the JavaScript code in order to make sense of all the special htmx markup so we have a server side rendered app with an almost immediate time to interactive experience pretty nice what happens though when the user starts interacting with the page modern ux expects that the navigation feels natural and snappy and all server communication is performed asynchronously without blocking the actual workflow well this is where the htmx magic comes into play by using special attributes we can enhance them elements and seamlessly perform a sync server requests or dumb updates so while users are clicking on links and buttons Ajax calls will be sent to the server and the resulting HTML will be inserted in the Dom note the slight difference between this architecture and the established Spas Spas will usually receive Json back from the server and will use that Json to update the app state which in turn will re-render the Dom nodes with htmx the server handles all the rendering and the resulting HTML is then simply placed directly in the Dom okay time to write some code now we'll start by initializing a low project and installing the fiber dependency then in a new file we'll Define the Fiber app and register a view engine pointing to the Views directory whenever users access the root path of our app we'll send them the computed index.html template as a response templates are stored under the views folder and they are very straightforward in the header we are downloading the htmx engine and the Uno CSS runtime and in the body I'm defining a search field this is probably a good time to take a quick detour and look at styling a bit more closely because the Uno CSS script is added in the page the browser will know how to interpret these utility classes and style our HTML elements accordingly there is a wide variety of standards and custom classes in Uno and you can check out the link into the top right corner to get an in-depth overview of this topic what you need to know for this video is that this is all you need to do to style your app with uno no build steps no CSS rules just drop in the runtime and simply add the necessary classes in your markup okay now let's add some interactivity to our page whenever the user changes our input we can perform an Ajax get request to the server and search for the specified sticker symbol of course I don't want to bombard the server with a ton of requests so I can use a trigger modifier to delay the server calls when the response is received from the server we'll use that HTML to replace the contents of the search result container on the server let's create a Handler for the get search request filed from htmx we will use the ticker parameter to perform a search then when the result is received we'll render a new template called results.html inside the template I'm iterating over the list of search results and allow customers to see more details about the found stock by clicking on the details button We'll add more interactivity to this template via htmx in a second but first let's quickly wrap up our backend implementation we are getting details about various stickers from the poly gun.io service with a rather straightforward implementation using goes built-in HTTP module we can send get requests to the third party API and then convert the Json response into a ghost struct then following the same approach I am defining a get daily values function which will return the current price for a specific stock again we are doing the same steps fetching data via the HTTP module then on marshalling the response body into a struct back to the request handlers just like we did with search I'm defining a new Handler which will extract the ticker from a path variable we'll retrieve the daily values for that sticker and finally we'll render a simple values.html template with the daily prices associated with the stock this gives us the chance to go back to the results.html page where we render the search results a bit earlier and register an Ajax get request on the button by default the request will be fired when the button is clicked and the resulting HTML will fill in the stock details Dom element so this is all the code we need the right to allow users to search for stocks and see their daily values if the goal part of this project was not that familiar to you don't worry I know this is a way broader topic deserving of more in-depth videos and I have quite a few hands-on-go videos planned for the future for the rest of this video however let's quickly review some other interesting things htmx has to offer you have seen its core features in action but believe me there is more to htmx on one hand it should go without saying there is support for all HTTP verbs when sending Ajax requests this in itself is extremely powerful since htmx links and buttons are now on steroids and they are not bound to the plain old synchronous get requests anymore these requests are launched by triggers which are basically dumb events like change submit or Mouse centered or more special events like load revealed or intersect you can control these triggers via modifiers such as once delay or throttle the support for Server request doesn't end here and you can also get data from the backend using server polling via the every syntax or even communicate with the backend via websockets or server events I don't know about you but I'm finding the Simplicity and power behind such approaches pretty mind-blowing besides all the server communication htmx comes packed with a bunch of convenience features take for instance its seamless confirmation model integration or the HTML5 validation API which is enforced whenever working with forms one other interesting Avenue in this entire new approach of building front-end apps is writing scripts directly in HTML via hyperscript so let me know in the comments if this is something you would be interested in seeing don't forget to click the like And subscribe buttons and until next time thank you for watching that's annoying

Channel: Awesome

Views: 69,321

Keywords:

Id: huMTT5Pb8b8

Length: 7min 58sec (478 seconds)

Published: Mon Aug 07 2023