Building Fullstack Apps with Go, Templ, and HTMX: Exploring the Otter Framework

present or um let me check have to find out if people actually got in I can I can see us on YouTube I can only see you though oh it's the one that talks that appears okay yes okay okay so it seems we are live can I start um let's okay we can wait some minutes yes I would say that we we wait some minutes so people have time to join yeah makes sense i' see that now we are like six watching now and uh from the so from Meetup I had like 50 something responses so maybe we wait like one or two minutes yeah be to be honest from the mid um post I didn't really un understand that a YouTube link um so maybe people don't didn't really understand that I'm not sure um I corrected that because I put also um in Meetup I put the the link to YouTube right so initially it was in the description but then I saw that also I have like a form when I create the event and I can put the link there and I edit it like I don't know half an hour ago or something like that um so while waiting for the people to join if you have any questions or I don't know uh during the talk uh the plan is that uh people ask the question in the chat and uh I will try to to make Martin aware of U the questions that we have I think we can wait like one more minute and then yeah as I see that the number of uh people is growing still growing so and we'll also have a inperson meet up next week yes in yes in stutgart you also invited if you want to come no sadly enough I'm I'm going to Chile for the Christmas next next week so if you ask yeah yeah it's not said for us I don't know I would like I I would love to visit Chile so it's beautiful okay uh so I think you you can start okay I see that it's the same number of people so let's not keep people waiting okay hello um so today I'm going to talk about Otter Otter is a little site project I've been working for the last couple of months and it allows you to build full stack applications with go using I would love to say non JavaScript but little JavaScript um so before I get into it I'm gonna I'm gonna tell you by about myself not not because if of any importance but because it's important so you understand why order is important uh I'm Martin a software engineer from Chile I live in Spain uh and when covid hit um I was still in high school and and we got lockdown and we had to do like online classes and I really hated them and I didn't really put much attention into them so what I started doing instead is doing like a lot of programming courses and that's when I got to know JavaScript um and I really love JavaScript because I was finally able to build anything that I wanted to uh and it felt great because everything I could everything every app I could think of I could just go and make it my myself and it would be working and that felt so good and I really love JavaScript for for a very long time of course JavaScript had a lot of problems and it still does um these are just a couple of them uh but like you need to transpile every JavaScript so you can run it on Old browsers you need to bundle stuff you need to use typescript for types you need to use uh reactors vle view or whatever for for using components so when you try to put all all these things together it becomes a real mess especially when you have dependencies not matching the versions and it's like it's really a a hell but for a long time I really thought this was just the way the world was and there was nothing to do about it so I just went with it and and kept working like that and it was so good uh but of course JavaScript also has a lot of syntax things that don't make any sense that are also awful and not only syntax but just the design of the language lot of times is awful and like if that wasn't enough there are two things that are not specific to JavaScript they are specific to the client server model so you need to do state handling and validations both in the server and in the client uh which is not specific to JavaScript but because we run most of our apps in the browser that runs JavaScript this is usually a JavaScript problem as well and this is something I really hate but as I said for a long time I I thought there was no way to get away from this so I just kept using JavaScript uh but about two years ago I found out about go I started working with go like uh in a work environment I I used it before but didn't really put much attention to it and realized how simple things could be with go oh sorry about that uh and and it was just amazing go was like the best of everything and I really loved it but it didn't change the fact that you still needed to run JavaScript in the client until a couple months ago uh HTM X got like super viral and a lot of people started using it and showing it over the internet and when I saw how these two things uh work together I was like oh this is really something and there's a way to get away from JavaScript um and I and I took it and I started trying to do stuff with go and HDMX and when I when I did that um I realized that you could get rid of Babel you could get rid of webpack you could get rid of typescript because you don't really need to bundle because you're already compiling to a binary you don't need to run anything in the browser so you don't care about browser versions or browser different browsers you don't need typescript because go type system is pretty good but there one one thing that you really don't have with go and it's how do you write components how do you write your HTML how do you write your templates Etc and about this around the same time that I came across HDMX I also came across this Library call temple temple is a library that allows you to write HTML directly in go the is not ideal because you still need to compile Temple to go binaries but from my point of view it's a small price uh that we can pay in order to use go uh for fck applications and that's that's really amazing for me the only thing missing uh because I I was trying a lot of things uh to build applications with just go and HTM X and Temple but there's a lot of tooling missing JavaScript if if it has one good thing is that we have in JavaScript a lot of tools for doing everything and we don't have that for go at least not for frontend development and and that's when order comes into play other uh you can call it a toolkit you can call it a framework a library it only depends on how you use it uh because you can use everything you can use just a few things or doesn't really matter um order is a set of I like to see it as a toolkit it's but you can see it as a framework is a set of tools and the tools it has right now although uh we might introduce more later it all depends on where it goes but the tools it has now is internationalization utilities these are for building apps that are in more than one language uh which is something I've been doing a lot uh lately and that's why I needed it I usually also need this is I build this project because I do a lot of apps on on the side and I needed tools for building those up so all all the features that this has is because I needed them and they've been useful for me so I also needed database migrations I also needed a way to handle Pages because front end usually have different pages it's not only uh API endpoints so I needed pages I needed commands that it's the way I like to call these usually API endpoints but in order you don't really have endpoints because everything just works within the app so you have apps you have Pages you have commands Pages uses the commands to execute stuff and and that's how it works then you have server bootstrapping utilities and you also have a develop vment server so you can like have a hold reload because you're let's say you're changing the HTML or the CSS and as soon as you change something you want to see it reflected on the browser and that's something that wasn't really available you had to do like a ton of configuration and like it it wasn't really easy and finally a quick project launcher we've all seen how you do npx uh next new project or something like that or in it next I I needed that because I didn't want to be setting up everything from scratch every single time so order also provides um a project launcher which basically you do from the command order in it and you have a set up project and you can just start working other other Dash go. Dev is the documentation I buil a couple weeks ago it's not up to dat it's not pretty uh but you can have a look I'll be updating that as I as I go um but yeah it everything is still in development in ideas so don't don't take this as a something that would stay exactly the same because it might likely change and I'm going to show you now some code because for that for today I I built a little uh example of of a other app so because we're in in the in the Christmas period I build an app for like a secret Sanda you know when you do like a group with your friends and each each one of you has uh each one of the other ones and each one of you have to get a gift for the one that was assigned to you so I build something like that um we are 12 days for our 4 46 minutes and 46 seconds away from Christmas I put here this counter because I want to I want to make clear that even though we want to not J write JavaScript the most uh we still need to sometimes for stuff like this for counters for example or for there there are many use cases for JavaScript but in order the philosophy is you just use it as little as you can and as specific as you can so I'm going to start with this I'm going to start showing you how we use this counter and it's pretty simple this is a pro other project so we have the component folder uh and here in the index sorry in the layout you'll see that I'm fetching a web components JavaScript that I had previously built in this web components uh JavaScript I had the the countdown component so if I come to the index page you'll see here where is it uh uh countdown countown here you'll see in the countdown here it's a it's a web component it's just a web comp component and and I didn't really have to write much JavaScript I just had the countown from a previous uh development so I just reused it and this is the idea we're already in the component folder so here in the components folder I usually keep all my components all my HTML all my templates I'm going to show you the app first so I'm going to log out wait I need to run the app so I'm going to write the the the development server so it's super easy I just go UT Dev and it's ready it's running on the port 8123 we're in the 8123 perfect okay here we are we are logged in as Max but I'm going to log out just so you can see this is a signin page so if we come here we go into sign in it's pretty simple it's if you've seen react or spelt or whatever you've seen this it's just you write HTML directly in the code the only difference now is that this is go and for me that's already a a big win and the second Big Win is that this runs on the server this is the signin page and as you might see here uh all the text are translated this means that from if I go to the app now and I switch from Spanish to English it's going to switch from Spanish to English and is is already built in and then the form the signing form works with HDMX which means it's going to do a post to the signin command I didn't build full authentication the full authentication feature because this is just from the demonstration demonstration but I'm going to show you that I'm going to sign in as Martin I'm not going to put a password because it's not a full authentication it's just just an example and if I sign in you'll see already that it says hi margin you don't belong to any other group yet join a group nothing of this is running on the client nothing I'm going to come here and I'm going to show you how the signing works so we have the components and then we also have handlers we have Pages pages are just HT uh HTTP handlers that render a page and then we have commands commands are handlers that receive a payload and they might render something or not they my R red redir you or something so in this case sign in does a really simple thing we get the name and the password from the form and then we just set a cookie with the with the username and that's it I'm not doing passwords I'm not doing any authentication because this is just an example but after I log you in log you in with the cookie I'm going to redirect you to the home and here we are then I'm going to join a group and again this is this is what I like about this it feels like a client side application because as soon as like it's just everything just works as you would expect in a client set up but nothing runs in the client or or not much runs in the client I'm going to join a group so I'm gonna join any group so the code can be anything so I'm gonna join this group and as soon as I join I'm in the group and and you'll see that because everything runs on the server I don't need to refetch State I don't need to revalidate data because everything runs on the server I validate on the server and if it went well I did the I did the operation if it went wrong I sent the error and that's it um I'm gonna go back and I'm gonna log out now and I'm gonna log in as someone else let's say Pablo Pablo doesn't belong to any group I I'll try to join the same group I hope it this was the code and yeah you you see now that we're both in the group and this works because because this is running only on the server we're doing directly operations to the database so here we here you'll see if I go to the signin page sorry to the index page you'll see here that here's the the model that it's doing a post to the join group command and the join group command what it does is it says wait let's is there a user yes or no is there a p is there a code if there nothing I should send I should send an error I'm not sending it because this was this is just an example but I should send an error because everything went well I'm gonna call the secret Sana join group this is a service I created and it's here secret Sana service and the secret Sana service is just running SQL to the database so I'm joining a group here I'm getting the user groups here I'm getting the group users here so these ones and I'm exiting a group these are all the methods that the service has and the handlers have access to the service so also in the pages when we go to the homepage we get our groups and then we pass it to the page and that's why when we go to the index we're able to see our groups I didn't build the whole example um ideally here eventually as soon as all the people join to the group you would say like okay we're all assign as someone and I would get someone assigned so I can give them someone I didn't build that but I think you can see uh what you can do and how you don't write any JavaScript everything is go you have the service here um what else can I show you uh so I'm going to show you the the main so the main is pretty simple we first setting up the translations this is just adding the English and the Spanish uh Json that are just all the texts basically then we open the connection to the database we ensure we run all migrations then we create this the service we pass it to the handlers and then we create a server we handle the pages we handle the commands we use the off middleware this is important so we can get the user from the cookie H and I build this you can you can read all of this in GitHub but it's it's pretty simple you just go here and if there's a cookie we just set it to the context so we can read it later and then we serve some Statics this is for the for Global CSS and stuff and for the image and then we listen to a port that's it HRS I'm just keeping some HRS like links migrations I'm just creating a the table and it's a pretty simple table you just have a username and a group ID and then the list is consists on all those records uh and that's it static just have images CSS and translations that's a a simple application uh built with order not any JavaScript and you can see how everything is super interactive and the the experience of development is amazing because um you just you're just writing go and everything runs on the server so you don't need to worry about a lot of things and the last thing I want to mention is just uh oh wait before I'm going to show you that you have translations out of the boxes as well so you can set up all your translation files and you you just have an app translated for all the languages that you want I'm going to send it to English and finally the last thing I want to show you is how little stuff uh this fetches look you will never see a JavaScript application that fetches these little things so you're only getting some CSS all these two are font so you can we can even not count them and this is for me this is amazing because after this you can set up the right cach headers and the clients won't even download some of your uh assets so even if we increase the load on the server a little bit because we're not running anything on this on the client you can still avoid some of that load and and still get it working pretty good so that's it for for this example I I hope uh I hope it was here and I explained everything well if not you can leave some questions on the chat um but I'm going to keep going with with the slides now um I really like this I really like this flow I really love this development because it allows me to just focus on the one thing that's important and it's to develop the product I'm building and nothing else not to worry about dependencies not to worry about the browser not to worry about anything else uh that's why I I I really think we need to get rid of JavaScript uh and for that I think there are a few ways well there are three I see three main ways the first one is to support order uh this is either by contributing on GitHub uh by sharing uh the project you can start it on GitHub or you can share this uh talk or you can tell your friends uh you can sponsor because well I don't need sponsor because I have my daytime job but because I have my daytime job I don't I cannot really put much time into the project So eventually in in an Ideal World if it had some sponsorship I could assign more time to it but if that's not the case that's totally fine for me because my goal is not to for order to be anything it's just to have a better de development uh flow so the other two ways for me are to create your own set of goang tooling so just like other but your own that for me would be amazing as well or to create your own set of Tooling in any other language but JavaScript that does uh virtually the same things I think that would be great I think we need to move to um development uh environment in which we don't put so much load into the client that would be ideal from my point of view um but yeah that's what I can tell and that's it uh you can see the the GitHub repository uh there's the URL uh and that's it thank you thank you for the for the presentation uh I see we also have a question so the question is if auor supports a form of API contract for example something like open API it doesn't currently um and from my point of view it from my point of view it wouldn't necessarily be the the project for that because at least from my point of view uh this framework is more for like building applications without needing to create uh an API and creating a client so you just create an app that works you and and because of that you don't need an API and because you don't need the API you wouldn't need something like open API but I guess if you're building an app and at the same time you also want external systems to connect to it you might want something like that and it could be a good idea but right right now it's not supported okay uh I don't see any other questions if I can I can ask a bunch of questions please um I would also say it's worth mentioning to the previous question that um you're directly consuming your own API and the AP Pi is directly designed to just support your application so like in traditional um application where you have a dedicated front end and back end you like uh separate or you have like a big rest end point that can then be fetched from like your multiple frontend um applications and for example if it's on phone they would maybe need a different endpoint because the rest endpoint might be um over fetching like delivering too much data or too little data but like those rest end points that you or that you see here they just contain directly what you need and at the place where you create create them you directly consume them I think of course you could like annotate them with like open API spe and for example just at like swago or something and then they could be consumed externally but I think that's a yeah not the main uh main reason behind it or like main go um one question would be like um what's like the main difference from otter like you showed uh lot of um hmx and go and like um what's the benefit for the people if they would use otter or just setting it it up on their own yeah yeah that's a perfect question so as I said you you already have a lot with just go HDMX and Temple but what it was lacking from my point of view is was just better tooling so for example OT has a a c a command line interface and with that you get a development server so if if I show you if I go to the homepage I'm gonna come here and I'm gonna go to the homepage uh where is it the index and let's see The Secret order so I'm going to just change it for secret Santa and I save it you'll see here that it's already changed so this is some this is something that it was missing uh you you could set it up uh but it just required a lot of configuration and with this command line you can just run order Dev and you have it working that is one of the things uh the other thing is that you have order order in it so order init what it does it just sets up a a really similar project to this so you can just start doing your application instead of setting up every every single thing the other thing is you have order migrate order migrate new and you can create migrations or order migrate app and you can run those migrations that is something else also OT has this uh if we come here uh OT also takes care of the of the server handling so for example as I said commands if I come here to the Handler the for example let's say the signin command the signin command has a a payload it has a name or a password this is a really simple payload but but payloads are usually more complex so the good thing about order is that by you by you providing this Handler uh here as a in the handle commands you don't really need to uh parse the body put it into the struct and all of that you get that out of the box and you you can just start using this struct right away so you can see here the only thing I'm doing is payload that name set the cookie and that's it and then uh the other thing that you get is internationalization um because I I I've been doing just a lot of app that requires different languages and you just need to set set up your Json like in every translations app and then you can just come here uh to the index for example and you just say Okay I want the language select this is what you have here and then and then you can just call we are countdown away from Christmas and if I go to the end that Json file this is the English version so we're countown countdown away from Christmas and then you can replace the countdown with the actual countdown which is this uh web component so you get that as well of course you can always use uh just go templ htx without order uh and and that's was what I was trying to say here you can just use go HDMX and Temple by on your own and not use order or you could or you could do that and use a little feature of order you can maybe use only the internationalization part or you can use only the development server that depends on how you use it or you can use everything and maybe consider it a a more important part of your project that depends on how you want to use it and how you feel comfortable using it so basically I I could like say OT is like an opinioned framework or toolkit where you bundled in like popular dependencies or like tooling that you would need anyway for like a web application that you would like to build yeah that sounds about right yeah and uh one question in chat uh what's what are you using for the hot reload whether you're using like air or something else else no I'm not using air I'm just using a file Watcher um that's just set up with FS notify I think or I can look it up actually uh can look it up order open so if we come here to the development server uh yes we're using FS notify and then we're just we're just watching the file system and then and then if if it's either a writer or a create file we're just rerunning the process and stopping what needs to be stopped restarting what needs to be restarted all of that okay so FS notify for the hot reload and database wise um do you know just mainly support skq light or um I wanted to I wanted to support SQ I haven't done that yet because mainly because um I I saw that the SQ light driver needed needs SEO and I didn't want to get into that for now I I'm just supporting postgress um but to be honest um uh I I would love to support all all all databases I'm just always using postgress and because of that I just build the postgress one but I would love to do all the different ones but as at the same time uh if you see here if if you come to my to this service I'm just running uh I'm just using the SQL um yeah the playing interes so standard so the the the database is just for the migrations so um it could come eventually it just I just haven't had the need and and that's why I haven't built it and no one also has had the need that has that I know at least so somebody would love to like support you and help out with the project they could like totally add another driver yeah they could add they want they can they can suggest everyone can suggest any feature they they would like uh for drivers or for uh whatever like this is an open project I I just have these features right now because are the features that I've been needing but I'm open to to like drive this project wherever it needs to go I think there's actually like a pureo uh SQ light driver but I don't know about the full capabilities I think the most popular one is like from Matan which needs a SEO but yeah maybe that's something for the future but I I guess if you're using SQ your app is already using SEO anyway so it shouldn't be a problem I just because I'm always using post I didn't do it but it's something I want to do it for sure especially because it's super easy to bootstop and up with sqlite yeah no but but I was saying I think there is an sqlite driver without cgo there's like a pure go skite driver but yeah I I don't know like how popular it is or whether it was lacking all capabilities when I looked into it for work I think it didn't have everything I needed at the time okay I'll I'll take a look then um yeah that's cool um I also saw another question from I don't know on the chat he's or she is AB uh I want to to be sure that this is clear so the question is so regarding the first API question if this does mean it's hard to decouple client and serice yeah so it is it's not that it's hard so as I said you can use as many or as little features as you want because at the end of the day this is just a go up it's a go program so you can just use any little tiny bits that you want or all of them or whatever but if you're using everything then you could still do endpoints because commands um well anything just Pages or commands they can both write any string to the in the response so even if most of the case in most of the cases you're going to write HTML because this is what you would do for these kind of apps you can still return a Json and use it as an API but I think there's better tooling for apis than this and there's and and this is has our focus on something else but if you want to do everything in the same place you could you could do it uh and if you want to do everything in the same place and you can think of a better API to do this I'm open as well to Res receive suggestions and Implement something like that okay thank you and I think it's one last question so the question is what do you have in mind for author's next steps what do I have in mind so uh yeah so you read my mind previously so I I would love to support more databases to have more drivers uh I would love to have SQ life because I think it would be just easier a lot of people's a lot of people just don't want to be setting up databases so sqi would be amazing uh and then I would just I just want to make the apis as simple as possible so so the development can be as um seamless as it can be and I would love in some way to remove the temple dependency because I don't like to be recompiling something because compiling the actual program but I don't really see a way out of that for now um and as I said I'm open to suggestions because uh for now for the apps I'm building this is more than enough but for other people might not be so if other people tell me what they're missing I can uh either I can do it or someone else can do it I'm also open to contributions I I love them so for now this is pretty much what I've been needing but if I ever come to need something else or someone tells me they need something else I'm happy to include that as well I think I can ask a a few more questions and thanks for the answer um one question would be um are the assets or stuff also already cached like by default from the browser I think this is more like a general question and relating to like HDMX and web development the assets do you mean like you you load like an image or would you need like an ech or something for that like my question how much does the browser actually like already cach by by default without like much setup so this actually depends on the this is using the file server from the https standard Library so I'm not sure which uh cache headers they use by default um but this on on the background is just using this so uh eventually if you need to you can set up some eax or some uh or some or or some date limit or something like that if if you wanted to but uh right now it's just using the HTTP file server from the standard library and and the defaults I'm not sure what the defaults are oh okay amazing thank you um I think I forgot my next question but so if there aren't any more questions I I don't know if we could put internet against us if you remember how you ended the the speech at yeah yeah let's get rid of D script in some way or another let's just go uh or something else but I I like go but if not something else but not JavaScript uh let's try to kill it please oh I have I have one more amazing question like if you look at go and HDMX you often see people using stuff like Tailwind CSS or Alpine or like other um CSS or JavaScript uh uh Frameworks to like support sometimes I think people use like JavaScript if they need like some capabilities that you don't like can fully offer with like go if your site is not that static um to like update elements or maybe like uh what's your opinion on like Tailwind CSS or like why did you skip Tailwind um I don't dislike it I don't love it um mainly because you just get uh huge classes and that's something I personally don't like but I I understand why people like it as well um you can use it those are just like JavaScript sorry CSS classes if you want to compile your Tailwind alongside this uh that's not supported but it could be and then for Alpine I haven't tried Alpine yet but I some people have mentioned that to me um so I definitely have to take a a look at that yeah thank you so much I think that was uh all all the questions I could ask okay no worries okay thank you I I'm one of those people who like tail wind so it was a good question uh the reason why I like it is that I don't really want to learn CSS in depth and I think I can do a lot of great stuff with Tailwind so yeah yeah it makes sense it makes sense um what it ends up happening with with like playing CSS is that you just have classes that do the same thing all over and over and over again with tell when you just write the class and you have it working I don't need to worry about that but yeah it is what it is yeah I don't have too much experience with front end but uh when I did the site for the sto guard goers I used tailwind and it was a lifesaver so right I I could have like a nice aspect for the site and not have to learn a lot so yeah but this is another topic yeah yeah okay thank you so much for for this opportunity um thank you yeah thank you so much for coming and also happy holidays for everybody yeah happy holidays everybody Merry Christmas and see you next year yeah no hopefully see you uh next week in the inperson meet up if you're like from this ship guard area I hope we have a quite cool venue or location and we are on our own so yeah definitely come and uh join us next week I think this will not be like so formal we're just there having like couple of drinks for like very cheap prices there's also great parking or um of course if you drink take the public transport yeah it's just a social event so no speakers no pressure no it's just to get to meet other golfers from the sto guard region okay then thank you very much again and happy holidays bye-bye bye-bye

2025-01-06 01:37

Other news