Modern Web With Go and HTMX

Building a small app with HTMX and Go.
💬 Topics:
- What is HTMX;
- HTMX Tutorial;
- Go Tutorial;
- Working with Go Standard Library;
- How to structure an HTMX app;
- Alternative to JS frameworks;
- Easy to use tech stack;
- Build a simple web app.
Github Code - github.com/awe...
Patreon - / awesomeclub
#javascript #htmx #go

[@carlosmspk]

This is netiher here nor there but I find incredible how you mathmatically tone your voice in 2 to 4 repetitions of the same pattern which end in an higher pitchm followed by a different pattern which ends in a lower pitch, followed by a short pause, and then repeat it all over again. It's not annoying or anything, it's just a curious detail

[@awesome-coding]

I think this is the funniest comment I have ever read on one of my videos.

[@carlosmspk]

@@awesome-coding hahaha glad you didn't take it to heart!

[@CristinaSilvaEng]

I came here thinking the same thing! The musicality in the voice is captivating. Also, great content! One more sub to the channel: I'll try that stack in a side project of mine.

[@awesome-coding]

@@CristinaSilvaEng Thank you!

[@zyriab5797]

It's making me crazy but the content is too good so I suck it up and learn

[@mickhuby8786]

Would love to see more GO + HTMX content :)

[@awesome-coding]

Will do! Thanks for the suggestion!

[@thewallacepf]

Me too

[@pkop4]

@@awesome-coding Me too. Showing various patterns, maybe adding Templ would be great

[@Microphunktv-jb3kj]

in many videos they use htmx with go but with added alpine.js it shows that htmx isnt actually as good as people think and overhyped ,

[@armynyus9123]

I love your little index finger emoticon, pointing to the places in the code which you talk about. Makes it so much more enjoyable to watch w/o the constant fear of loosing it, while reading. Thanks for the effort, it's really worth it! Subbed.

[@awesome-coding]

Glad you enjoy it! Thank you for the sub!

[@theseangle]

​@@awesome-codingyep I agree with him completely about the index finger emoji ☝️

[@ai_coding]

thank you for making the video short and to the point. subscribed.

[@awesome-coding]

Glad it was helpful!

[@TechBuddy_]

Go std and deno std ( which is very much inspired by go std ) are sooo good, no huge dependencies and node_modules just the language features and a complete standard library which is all you need for most use cases

[@awesome-coding]

Yep! Do you know who else has a great standard library? JAVA! 😅

[@tonchozhelev]

​@@awesome-codingHard disagree, Java has a huge std, but it isn't all that good imo - at the very least, because you have to write Java to use it 😂

[@flamendless]

Soon, there will a go package for is-even and is-odd 😂

[@trustytrojan]

​​​@@tonchozhelevjava's data structures are perfect imo, but man java swing and javafx are the most confusing gui frameworks known to man, i have a whole github repo *just* for extending java swing classes into cleaner interfaces 💀

[@TechBuddy_]

@@awesome-coding yes but the difference is I can build a server in go with the STD lib in like 5 lines but definitely more than 5 lines in java. File io, network requests, json, are all very easy in go. One good thing in java is the streams API

[@Razpirato]

It’s minimalist now, but by the time you finish the project you basically recreated Ruby on Rails.

[@neociber24]

At that point just use a library

[@OM-bs7of]

Exactly

[@markmental6665]

And then you know exactly how it works in your own way

[@OM-bs7of]

@@markmental6665 but no one else will

[@eddbot-hh5ed]

Nice - but we should probably cache the templates as the application starts up, and only execute them in the handlers. Makes things a bit more efficient than having to IO on every HTTP request

[@TheNewton]

simple !~= efficient

[@mariusailisoaie183]

I'm interested in the Go + HTMX stack and I was so happy when I saw your video 😁. Keep up the good work.

[@awesome-coding]

Glad to hear! Thank you!

[@pylotlight]

Add in chi for the simplest route hanlding and templ for the best templates and you've got the perfect stack ;)

[@awesome-coding]

I would, but then the Go devs will complain :))

[@pylotlight]

@@awesome-coding pssh as a Go hobby dev its the best stack + chi is basically just one step next to std lib using std libs underneath so can't go wrong there.

[@TechBuddy_]

Templ and the go html are both pretty awesome but I am not fully sold on templ though, feels like jsx 😂 but chi very good

[@kirillgimranov4943]

It's a great stack and I'm using it rn but in the stack presented by the video author another important part of any web stack is missed - db. U need to add some db to your stack at least, and maybe some tool to use it from the code (like db drivers, query builders or entire ORMs)

[@deathbooker7466]

embed sqlite in your go binary my dude

[@pylotlight]

Not every project needs a db, so for a video about keeping it simple it makes sense to only include the core technologies for web as was shown in the video.

[@kirillgimranov4943]

The ways you guys suggest are so far from any non hello world projects fellas

[@TechBuddy_]

@@kirillgimranov4943 Sqlite is not bad If you want more sqlz and postgres are my go-to choice

[@awesome-coding]

@kirillgimranov4943 a very good point! I briefly mentioned storing data in the DB, but didn't get into details. I'd probably use Turso to keep things really simple.

[@Joe-sm7mf]

Short and sweet video, I dig it. It is pretty rare for a tech stack to not include some kind of DB though, especially when touting it as scalable.

[@awesome-coding]

Glad you enjoyed! You are right about the database. I'm going to address this in one of my next videos for certain.

[@crab-cake]

i like your accent as a native english speaker. don't be discouraged by the comments.

[@awesome-coding]

Thank you so much!

[@sauravadhikari8645]

Sir, Thank you 🙏 Keep this going sir keep this going. I love these kinds of videos.

[@awesome-coding]

Thank you for the kind words!

[@dovh49]

Nice and simple. A little more complex than an MPA though 😛. But yes, it takes away much of the complexity for basic apps.

[@acelaox6836]

This is a very based tutorial, Thanks for covering minimalism in web dev! Why did you choose Go for the backend? compatibility?

[@awesome-coding]

Hey, thanks for the feedback! I picked Go because I wanted to keep things simple but still use really powerful tools. You could use Node as the backend, but, in my opinion, JavaScript doesn't really scale well due to memory consumption among others. At the end of the day, you still have your "goto" languages for proper backend development: - Java - too boilerplatey for the purpose of this video; - Kotlin maybe? but you still rely on the JVM, so it's a bit more difficult to grasp. - Python - could be a good option, but Go is almost as simple while providing way better performance; - Maybe Rust since it is so popular these days but it is far too difficult compared with some of the alternatives; - A lot of other solutions I'm sure I'm missing. Go has the right amount of simplicity and power in my opinion, and I'm saying this coming from a Java background, and while I still prefer Kotlin over everything else these days.

[@rajat0610]

super clean starting tutorial! thanks!

[@awesome-coding]

Glad it helped! Thank you!

[@nathanoy_]

Awesome as always!

[@awesome-coding]

Thank you!

[@manyes7577]

3 minutes tutorial is awesome

[@awesome-coding]

Thank you!

[@Noritoshi-r8m]

HTMX mentioned

[@awesome-coding]

and the views go through the roof

[@tcdnbm]

great video! what would you recommend for hosting the client and server side code here? would ecs be a good choice or is there something similar that's well priced?

[@awesome-coding]

Thank you! You can actually host it directly on an EC2 instance, which is very reasonably priced.

[@tcdnbm]

@@awesome-coding both client and server on ec2, or just the server on ec2 and the client on cloudfront?

[@awesome-coding]

@@tcdnbm In this setup the client will be the HTML rendered on the server. So you just need the Go service deployed in ec2, and that's it!

[@tcdnbm]

@@awesome-codingi understand you, thanks for the help :)

[@mountainslopes]

I’d love to see the sheet music for this instructional 🎼

[@accessibleguidance]

One of your premises was multi page app but you made a single page app based on your go programming and HTML markup. In the head HTML template can you explain integrity attribute and crossorigin with anonymous property?

[@awesome-coding]

The integrity attribute solves the problem we recently had in the space with the Polyfill attach (more details here: kzbin.info/www/bejne/fGXLkIFneN9omqc) Basically when you are downloading from a 3rd party URL the provider of that script could change it without you knowing. So one day you are downloading HTMX, the next day all your users download a JS malicious script that mines bitcoin. The integrity attribute associates a unique hash with that initial script, so if the content of the script is changed by the provider, the new script hash will not match with the integrity and the browser will not download the script anymore.

[@EightSixx]

need more of this!

[@illegalsmirf]

is it simpler than php and jquery?

[@awesome-coding]

Hmm good question - I'd say it's more reliable

[@MrKeliv]

Please do more example like CRUD with datatable. I think this is more interesting and sounds like common use all new programmers like me 😂

[@awesome-coding]

Will do! Thank you for the suggestion!

[@MrKeliv]

@@awesome-codingThank you. I will waiting

[@Wo0dY101]

Wish I could like this twice

[@awesome-coding]

Thank you!

[@staynjohnson4221]

What about building maintenance tracker, ERP softwares with dashboards, tables and search features? Which stack is a better choice?

[@TheNewton]

this is a simple stack , those are not simple things with no choice "better" than another at that level of detail.

[@ceving865]

I can not see where the input validation happens in HTMLX.

[@theyioel]

THANK YOU

[@boilingsoup]

Should cache your go templates so it's not parsing each time you receive a request.

[@awesome-coding]

This is a very good point - thank you!

[@boilingsoup]

​@@awesome-codingsure thing. You're videos are looking great keep it up 🤙

[@toanduongthanh8625]

Subcribe because detail explanation, nice presentation

[@awesome-coding]

Thank you!

[@DevAnon]

any place to see it live? curious how fast it is to load.

[@awesome-coding]

here is the repo - github.com/awesome-club/go-htmx

[@laughingvampire7555]

Java Developers hate it when you don't use AbstractFactoryFactoryAbstractFactoryOneOfTenThousand

[@stretchchris1]

JS developers hate it when you don't use LatestLatestNewestBuzzwordLibraryOneOfTenMillionReleasedToday

[@Aditya-nc7hq]

AWESOME STACK

[@georgeFulgeanu]

Is history repeating itself ? Wasn't this the way to work with server side rendered pages 20 years ago?

[@awesome-coding]

Yep... the old way is the only way 😅

[@DanelonNicolas]

Scalable... Hmmm what if I need to use that API for a mobile application?

[@awesome-coding]

That's s different usecase all together. In that case you would extract the backend logic into a REST API which can be consumed by various clients.

[@Fizzify]

What text editor do you use?

[@awesome-coding]

I'm using IntelliJ IDEA with its new UI - www.jetbrains.com/help/idea/new-ui.html

[@Fizzify]

@@awesome-coding What icon theme and theme and font do you use?

[@Svengtz]

It’s nice but seeing this I always think to myself „we are all the way back to PHP again“ ^^

[@awesome-coding]

I didn't hear the news?! PHP is cool again!

[@tobyzieglerrr]

Thats a stack i like

[@jabuci]

Replace Go with Flask or FastAPI and it's even simpler.

[@awesome-coding]

I am really trying to like Python, but I just can't do it 😅🥲

[@jabuci]

@@awesome-coding I feel your pain. Its zero-BS approach is annoying sometimes.

[@JuanPabloAJ]

thanks for the video. with HTMX and Go, how can you receive events from the server? for example, all the connected users receive a notification. please could you add the link to the code in the description? in that way is easier to find.

[@garretmh]

You can use polling as an event trigger just like user input or there's an official websocket extension. It's all in the HTMX docs.

[@awesome-coding]

Here is the code - github.com/awesome-club/go-htmx

[@CodyDBentley]

2:07 caption, I see what you did there lol

[@awesome-coding]

😂✌️

[@snowwsquire]

this app would be improved if the stocks were retrieved on the client side tbh

[@awesome-coding]

Right, it might not be the best use case for SSR and HTMX.

[@maurolimaok]

What font is being used on video?

[@awesome-coding]

Most of it is "Futura".

[@maurolimaok]

@@awesome-coding Thanks, for the answer and the videos, but I noticed that Futura font do not have the dot inside the zero character. Could it be a variation?

[@awesome-coding]

@@maurolimaok Hmm - maybe you are referring to the code inside the actual text editor? That is JetBrains Mono.

[@maurolimaok]

@@awesome-coding Thanks. Exactly that.

[@qwoolrat]

hey you left ur api key in the git repo

[@awesome-coding]

Thanks for mentioning it. That key is revoked, so it's not really usable anymore. Good catch though!

[@KevbotSSBM]

link to source code? thank you

[@awesome-coding]

Here it is - github.com/awesome-club/go-htmx

[@realdaly]

Idk anything about Go or PHP but I watched another video about PHP and HTMX and I find your stack way more complicated.

[@Joe-sm7mf]

It has been 7 years since I have touched PHP so my info could be out of date but from what I remember and what collogues who have worked with PHP in the last couple years say that this comment is probably wrong in the long run. However, if you think it is less complicated then you should use what you think is best for your project(s) and learn for yourself.

[@naranyala_dev]

req: hono and htmx

[@awesome-coding]

Noted - will do! Thanks for the suggestion!

[@bear458ziif-s]

do graphul (not graphql), sqlx, htmx

[@awesome-coding]

I'll look into it. Thank you for suggesting it!

[@ryanlog]

Where's the code bruh ?

[@awesome-coding]

Here it is - github.com/awesome-club/go-htmx

[@JammUtkarsh]

Building a similar project With Similar stack

[@awesome-coding]

How is it going?

[@00flydragon00]

I'm doing something similar right now, except i use websockets instead of HTMX, which is better and why?

[@awesome-coding]

Do you have a custom implementation on the frontend for the socket communication? I think each approach has its usecases. Sockets are great, but they add complexity on both the backend and the frontend. However, it brings real time features into your app. HTMX is just dead simple - no headaches, no nothing.

[@00flydragon00]

@@awesome-coding yes it's a hassle to configure the communication using json back and forth. Do you have a discord where we can discus this further?

[@funkdefied1]

I wonder how Go’s http.FileServer function compares to a prebuilt proxy/server like NGINX. To me, it makes sense to do most of my routing through NGINX. Why reinvent the wheel? But idk I know this is about simplicity.

[@dc366]

this is too complex for something that needs to be simple. Those function calls are long and crazy! Good luck trying to remember them

[@awesome-coding]

Fair enough.

[@seasong7655]

Ngl it doesn't look simpler than python and flask. It looks to be on the same level of simplicity and doing the exact same thing.

[@awesome-coding]

But the advantage would be that you are relying on Go instead of Python, which is arguably a more performant runtime.

[@meka4996]

No Javascript? only static pages?

[@awesome-coding]

Could work. I feel like users are accustomed to a smoother UX these days, so some async actions still have to be performed (rendering search results for instance is pretty much linked to the suggestion dropdown).

[@allge00]

Pease do a video on GO + HTMX + A Database. Just want to see how it all works together

[@awesome-coding]

It's on my list - will do!

[@krtirtho]

Why do I feel stupid?

[@awesome-coding]

Don't worry - we all feel the same way :)) I actually made a video on this exact topic - kzbin.info/www/bejne/pKXdpoWqe79rga8

[@LaughingOrange]

This kind of video makes it look way easier than it is. You're not stupid for figuring out a solution that works in half the time they took to make this code as clean as possible.

[@jcy089]

HTML + jQuery + S3 😏

[@awesome-coding]

ha! You might have broken the web dev space...

[@janakaone]

Guy with a swiss accent?

[@awesome-coding]

Romanian accent 😅

[@janakaone]

@@awesome-coding so cool. Thank you

[@makhmudjonjamoldinov3554]

Try NEXTJS 13 with prisma and other libraries. U dont have to build all the request/responses and routing. In 2023 this looks soooo primative on the server side

[@awesome-coding]

I actually have some Next & Prisma videos on this channel.

[@buc991]

it's not that go is primitive, it's nextjs overengineered for simple things, and overall just sucks, and i love react itself, but nextjs is so bad.

[@awesome-coding]

@@buc991 What's your take on React these days, with all their server actions efforts?

[@buc991]

@@awesome-coding well they are optional, so you can just not use them, and on client all will be same, but I don’t like direction they are moving to with this use server/use client, it’s very weird api, and also nextjs stuff in react docs is very strange.

[@ancwhor]

ah yes. so easy. all you have to do. is read moon runes :D

[@awesome-coding]

😅

[@ancwhor]

No hard feelings. To each their own. I'll just be writing a 100 if statements 😂😂

[@awesome-coding]

@@ancwhor 100 if statements? All I hear is job security!

[@ancwhor]

@@awesome-coding 😂😂😂😂

[@LaughingOrange]

@@ancwhor If those are else/if statements, consider switch/case. It's much faster, and in my opinion more readable.

[@marcusrehn6915]

Calling Go simple is true, but it feels wrong 😅

[@awesome-coding]

The perspective is everything 😅 Is it simpler than Rust - sure! Is it simpler than JS - not really... But for a backend strongly typed scalable performant solution it is pretty simple.

[@marcusrehn6915]

@@awesome-coding I think Go is simple from a language designers perspective and from the perspective of someone who wants to get up and running quickly. But it lacks so many features that I rely on in the 21th century. So I would argue that for day to day use, it doesnt seem so simple. Its incredibly verbose.

[@joseph0x45]

first thing Go taught me is that simple is not easy :D

[@marcusrehn6915]

@@joseph0x45 go does hit the mark on both when it comes to thread abstraction though. At least as well or better than any other language.

[@awesome-coding]

@@marcusrehn6915 what's your preferred language?

[@boomshakalaka656]

The nerves to call this simple in any capacity over just using something create vite app is amazing 😂

[@awesome-coding]

✌️

[@SpeakChinglish]

Simple, maybe. Scalable, no.

[@abdulmoiz2086]

your senario is way too simple. what if you need shared state between components? or maybe a global state?

[@awesome-coding]

Usually when state is shared, it can be done via the backend, when the page is rendered. On top of that HTMX can be paired with JS code if that's really necesssary. Remember that apps were able to share state on the UI just fine, even before the SPAs were introduced.

[@bambamsounds]

your intonation is actually making it harder for me to follow as I find it very distracting (i am a native english speaker fwiw)

[@awesome-coding]

Sorry to hear that - I'm sure I sound horrific to native speakers. I'm working on both the accent and the intonation, but it's pretty much the hardest thing to fix on these videos 🤦‍♂️

[@bambamsounds]

@@awesome-coding no, your accent is great and very clear, dont doubt yourself. its just the intonation you are using is mechanical, you seem to be raising your pitch every few words in a repetitive rhythm before going down at the end of each sentence, its predictable which is what makes it almost hypnotic (for me personally). Intonation can and should be used much more organically. Intonation is used to convey additional 'information' to the listener, If I know when a change in intonation is coming (because its following a predicatble rhythm), then I dont need the intonation! It might be worth just talking as though you were talking to a friend and not trying too hard to sound 'polished'. All the best.

[@xtraszone]

Its useless when you have to reuse these APIs in mobile apps

[@awesome-coding]

Right - that's a different use case

[@devope]

what is "simple" about it? it is just regular with a lot of things to cover. just demo

[@awesome-coding]

I believe the architecture is rather simple - plain server side rendering with no JS written on the frontend.

[@michaeldausmann6066]

Congrats, your solution that does very little, doesn't have much complexity.

[@awesome-coding]

You sound like my wife 😅

[@GoldenBeholden]

I respect the simplicity, but this workflow won't scale as well as a proper front-end framework will.

[@Zeus_Was_Here]

No thanks

[@vaisakhkm783]

too bloated... I am going back to React and java

[@awesome-coding]

Nice! I would replace React with Angular just to be sure I'm sticking with the lightweight stuff!

[@vaisakhkm783]

@@awesome-coding that's even better :)

[@TurkeyMaster]

Looks...too complicated ... Like we go back in time when creating the entire HTML on backend was a thing.. which means, it require a developer to understand Backend (GO) and Frontend(HTML).. In the end... its like a fullstack position for someone with 5+ years on both technologies...

[@awesome-coding]

HTML on the backend IS a thing though, right? All UI frameworks are doing SSR these days, and most of them are actually arguing that SSR (or at least a hybrid approach) is the preferred option.

[@pylotlight]

Better than having 5 wasted years in react.

[@TechBuddy_]

Well if I am using a modern js framework I still have to learn a templating language ( jsx, svelte, vue etc ), the server part of the framework ( server actions, load functions, loaders ( remix ), getServerSideProps etc ) the framework specific routing etc etc You still do the same thing but you write less js if you use go which is a good thing IMO

[@paulwillisorg]

Too much up talking. Just talk naturally.

[@plusone.network]

Prime is going to LOVE this

[@daddy7860]

I wonder how feasible it is to make a PWA with HTMX + Go

[@awesome-coding]

Definitely an idea worth exploring :)