It Doesn't Get Easier Than This

keep it simple stupid this is the only valid piece of advice I could give you after almost 15 years of software development Simplicity however is one of the most difficult things to achieve the good news for all of us is that there are a lot of libraries and Frameworks we can leverage to build powerful yet simple apps these days in the next 10 minutes or so we'll build a full stack web app using astrojs as a meta framework solid.js to handle behavior and pocket base as our backend solution you will see that a simple text containing just these tools will be more than enough to build pretty much any type of application and any type of feature ranging from simple Spas to rest backends authentication file management or real-time apis without further Ado let's jump right into it we'll start by setting up Astro The Meta framework which holds everything together the limited time doesn't allow us to go into all the setup and project structure details but but if you are interested in a more in-depth look at all the tools we are using you will find introductions for Astro solid and pocket base down in the description okay so as I said Astro will hold our whole app together this one is an all-in-one web framework designed for Speed you could say that it is still fairly new in the web space but due to its multi-page application architecture and its zero JavaScript policy enabled by the islands architecture Astra is one of the most performant tools out there it is designed to handle content heavy apps and uses a file system based router to map incoming HTTP requests to Astro or content files we are building a small chat app so under the Pages directory I defined an index file to map the request to the root path a chat file for the actual chat application and the start file to handle authentication we are using Astro components inside these files by default everything will be rendered on the server and only plain HTML will be served to the client however you can't really have a web app without some interactivity Astro can be combined with various UI libraries which will be added in the project and then serve to the client only on demand we will work with solid.js for this purpose but before doing this let's switch gears and talk briefly about our backend solution pocket base you can easily download the installer from the official website and then start a local server at the local Port quick disclaimer pocketbase is still under active development and has a long way to go until a stable version 1 release however the core functionality is in place and in my experience it offers a wide range of features even though it's rather small and portable pocket base is written in go and can even be extended with your own functionality if this is the first time you are hearing about it make sure to check all the pocket bases features in detail believe me you will not be disappointed since in my opinion this little tool will quickly become a real alternative to backend the service platforms such as Firebase or Super Bass one of the many features pocket base comes back with is a user staple we can rely on to handle authentication on top of that we'll create a chat collection where all user generated messages will be stored pocketbase uses sqlite as the underlying storage solution and all collections will immediately get a list of rest endpoints we can call to read or mutate the data on top of that pocketbase offers a JavaScript SDK we can download using npm then under service folder I'm going to create a pocket based instance which will hold our database connection our our app will require authentication so I'm creating a user Services typescript file with a bunch of useful methods login and registration are more than straightforward especially since the user's collection exposes useful methods for most of our operations FYI authentication wise pocketbase offers the usual token based auth Solutions but also supports a wide range of third-party oath providers anyhow once the user is authenticated on the back end I am storing some useful information in the local storage as well this might not be the most elegant or secure method but since we are keeping things as simple as possible this approach will do finally I am adding some utility functions to easily fetch local storage data and this sums up the user service for the chat entity we'll follow the same recipe first I'm defining typescript interfaces for the message and the chat entity this will increase my quality of life in the long run then we'll call the create read update and delete collection methods to consume and mutate data as you would expect from state-of-the-art Storage Solutions reads can be either be performed by ID or the results can be filtered by various criteria back to the Pages directory you should recall that we defined the chat and start page both loading some components only on the client this is where the real fun begins since we'll employ solid.js Simplicity to build this functionality in no time by the way if you are finding this content useful please consider helping me find the YouTube algorithm by liking this video and subscribing to the channel you can easily add solid.js in a nostril project via this command this will take care of all the setup for you and now you can simply start writing solid.js components hopefully you should be familiar with solid by now if not don't worry here is a 30 seconds overview of everything you need to know solid.js is a UI Library built on top of a reactive pattern called signals you can build solid components by simply declaring functions that return this funny looking HTML called jsx inside these functions you can Define signals also known as state and whenever those values change them updates and other effects are automatically triggered this is it class dismissed you now know solid all jokes aside in the startform.tsx file I declared a bunch of component State variables and based on them various rendering conditions are defined in the jsx we can capture user input via change listeners and Trigger event handlers via on-click methods both the login and the register method should be pretty self-explanatory since they are simply calling the service methods we defined earlier of course we are maintaining a loading and an error State since the UI is fairly interactive these days and everybody is used to seeing various visual cues while interacting with apps styling wise you have multiple options to choose from Tailwind CSS is a fairly popular option these days and most front-end projects support CSS modules at this point however since I'm fairly comfortable writing CSS rules and I'm a big fan of sets I usually create an Associated styling file for each of my solid components where I'm nesting all the styling under some custom class selectors OK finally let's work on the actual jet app where we'll also get the chance to explore pocketbase's real-time capabilities again we'll start by defining some internal State for the existing chats and the active messages on the HTML template side things are straightforward first in the sidebar I'm iterating over the list of chats and simply displaying the names of previous chat participants in the main part of the layout I'm displaying the active messages which are styled differently based on their Center received status finally in the footer I am capturing the user input via an input field build and calling the send method when the enter key is pressed or the submit button is clicked next I agree the send function might look overwhelming but feel free to pause the video and analyze it for a second you'll see that there isn't anything to Fancy in here either if there is no conversation started the user can add another user's Handler to connect with him and start a discussion otherwise we just purchase the new send message in Pocket base since all messaging apps have real-time support let's edit in our app as well whenever friends reply to our user the message should instantly show up on the screen without the need to refresh the page of course we can do this in just a couple of lines of code since pocket-based collections have real-time support we'll monitor the active chat ID and whenever a new record comes in we'll update the component State accordingly as a best practice whenever you are subscribing to any type of publisher you should always make sure to unsubscribe to avoid memory leaks and other potential issues please let me know in the comments what is your opinion about this stack I for one am very impressed and I'm excited to finally get a stable version of pocket base until next time thank you for watching

Channel: Awesome

Views: 43,973

Keywords:

Id: rEka64_stis

Length: 9min 7sec (547 seconds)

Published: Fri May 05 2023