ฝัง
- เผยแพร่เมื่อ 26 ก.ย. 2024
- 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
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
I think this is the funniest comment I have ever read on one of my videos.
@@awesome-coding hahaha glad you didn't take it to heart!
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.
@@CristinaSilvaEng Thank you!
It's making me crazy but the content is too good so I suck it up and learn
Would love to see more GO + HTMX content :)
Will do! Thanks for the suggestion!
Me too
@@awesome-coding Me too. Showing various patterns, maybe adding Templ would be great
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 ,
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.
Glad you enjoy it! Thank you for the sub!
@@awesome-codingyep I agree with him completely about the index finger emoji ☝️
thank you for making the video short and to the point. subscribed.
Glad it was helpful!
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
Yep! Do you know who else has a great standard library? JAVA! 😅
@@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 😂
Soon, there will a go package for is-even and is-odd 😂
@@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 💀
@@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
It’s minimalist now, but by the time you finish the project you basically recreated Ruby on Rails.
At that point just use a library
Exactly
And then you know exactly how it works in your own way
@@markmental6665 but no one else will
I'm interested in the Go + HTMX stack and I was so happy when I saw your video 😁. Keep up the good work.
Glad to hear! Thank you!
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
simple !~= efficient
Add in chi for the simplest route hanlding and templ for the best templates and you've got the perfect stack ;)
I would, but then the Go devs will complain :))
@@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.
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
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.
Glad you enjoyed!
You are right about the database. I'm going to address this in one of my next videos for certain.
i like your accent as a native english speaker. don't be discouraged by the comments.
Thank you so much!
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)
embed sqlite in your go binary my dude
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.
The ways you guys suggest are so far from any non hello world projects fellas
@@kirillgimranov4943 Sqlite is not bad
If you want more sqlz and postgres are my go-to choice
@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.
Nice and simple. A little more complex than an MPA though 😛. But yes, it takes away much of the complexity for basic apps.
Sir,
Thank you 🙏
Keep this going sir keep this going. I love these kinds of videos.
Thank you for the kind words!
3 minutes tutorial is awesome
Thank you!
HTMX mentioned
and the views go through the roof
super clean starting tutorial!
thanks!
Glad it helped! Thank you!
This is a very based tutorial, Thanks for covering minimalism in web dev!
Why did you choose Go for the backend? compatibility?
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.
Please do more example like CRUD with datatable. I think this is more interesting and sounds like common use all new programmers like me 😂
Will do! Thank you for the suggestion!
@@awesome-codingThank you. I will waiting
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?
The integrity attribute solves the problem we recently had in the space with the Polyfill attach (more details here: th-cam.com/video/F4h_N1Cz5dE/w-d-xo.html)
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.
Awesome as always!
Thank you!
Wish I could like this twice
Thank you!
need more of this!
is it simpler than php and jquery?
Hmm good question - I'd say it's more reliable
I’d love to see the sheet music for this instructional 🎼
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?
Thank you!
You can actually host it directly on an EC2 instance, which is very reasonably priced.
@@awesome-coding both client and server on ec2, or just the server on ec2 and the client on cloudfront?
@@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!
@@awesome-codingi understand you, thanks for the help :)
Java Developers hate it when you don't use AbstractFactoryFactoryAbstractFactoryOneOfTenThousand
JS developers hate it when you don't use LatestLatestNewestBuzzwordLibraryOneOfTenMillionReleasedToday
I can not see where the input validation happens in HTMLX.
Subcribe because detail explanation, nice presentation
Thank you!
It’s nice but seeing this I always think to myself „we are all the way back to PHP again“ ^^
I didn't hear the news?! PHP is cool again!
Should cache your go templates so it's not parsing each time you receive a request.
This is a very good point - thank you!
@@awesome-codingsure thing. You're videos are looking great keep it up 🤙
THANK YOU
Replace Go with Flask or FastAPI and it's even simpler.
I am really trying to like Python, but I just can't do it 😅🥲
@@awesome-coding I feel your pain. Its zero-BS approach is annoying sometimes.
Is history repeating itself ? Wasn't this the way to work with server side rendered pages 20 years ago?
Yep... the old way is the only way 😅
AWESOME STACK
any place to see it live? curious how fast it is to load.
here is the repo - github.com/awesome-club/go-htmx
Scalable... Hmmm what if I need to use that API for a mobile application?
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.
2:07 caption, I see what you did there lol
😂✌️
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.
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.
Here is the code - github.com/awesome-club/go-htmx
Idk anything about Go or PHP but I watched another video about PHP and HTMX and I find your stack way more complicated.
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.
hey you left ur api key in the git repo
Thanks for mentioning it.
That key is revoked, so it's not really usable anymore.
Good catch though!
What font is being used on video?
Most of it is "Futura".
@@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?
@@maurolimaok Hmm - maybe you are referring to the code inside the actual text editor? That is JetBrains Mono.
@@awesome-coding Thanks. Exactly that.
What text editor do you use?
I'm using IntelliJ IDEA with its new UI - www.jetbrains.com/help/idea/new-ui.html
@@awesome-coding What icon theme and theme and font do you use?
Building a similar project
With Similar stack
How is it going?
do graphul (not graphql), sqlx, htmx
I'll look into it. Thank you for suggesting it!
req: hono and htmx
Noted - will do!
Thanks for the suggestion!
this is too complex for something that needs to be simple. Those function calls are long and crazy! Good luck trying to remember them
Fair enough.
link to source code? thank you
Here it is - github.com/awesome-club/go-htmx
Pease do a video on GO + HTMX + A Database. Just want to see how it all works together
It's on my list - will do!
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
I actually have some Next & Prisma videos on this channel.
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.
@@buc991 What's your take on React these days, with all their server actions efforts?
@@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.
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.
But the advantage would be that you are relying on Go instead of Python, which is arguably a more performant runtime.
I'm doing something similar right now, except i use websockets instead of HTMX, which is better and why?
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.
@@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?
Where's the code bruh ?
Here it is - github.com/awesome-club/go-htmx
The nerves to call this simple in any capacity over just using something create vite app is amazing 😂
✌️
ah yes. so easy. all you have to do. is read moon runes :D
😅
No hard feelings. To each their own. I'll just be writing a 100 if statements 😂😂
@@ancwhor 100 if statements? All I hear is job security!
@@awesome-coding 😂😂😂😂
@@ancwhor If those are else/if statements, consider switch/case. It's much faster, and in my opinion more readable.
HTML + jQuery + S3 😏
ha! You might have broken the web dev space...
No Javascript? only static pages?
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).
Why do I feel stupid?
Don't worry - we all feel the same way :))
I actually made a video on this exact topic - th-cam.com/video/ntzuRtFZ8KM/w-d-xo.html
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.
your intonation is actually making it harder for me to follow as I find it very distracting (i am a native english speaker fwiw)
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 🤦♂️
@@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.
Calling Go simple is true, but it feels wrong 😅
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.
@@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.
first thing Go taught me is that simple is not easy :D
@@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.
@@marcusrehn6915 what's your preferred language?
Guy with a swiss accent?
Romanian accent 😅
@@awesome-coding so cool. Thank you
Its useless when you have to reuse these APIs in mobile apps
Right - that's a different use case
your senario is way too simple. what if you need shared state between components? or maybe a global state?
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.
Prime is going to LOVE this
Simple, maybe. Scalable, no.
Congrats, your solution that does very little, doesn't have much complexity.
You sound like my wife 😅
I respect the simplicity, but this workflow won't scale as well as a proper front-end framework will.
No thanks
what is "simple" about it? it is just regular with a lot of things to cover. just demo
I believe the architecture is rather simple - plain server side rendering with no JS written on the frontend.
too bloated... I am going back to React and java
Nice! I would replace React with Angular just to be sure I'm sticking with the lightweight stuff!
@@awesome-coding that's even better :)
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...
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.
Better than having 5 wasted years in react.
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
Too much up talking. Just talk naturally.
I wonder how feasible it is to make a PWA with HTMX + Go
Definitely an idea worth exploring :)
What about building maintenance tracker, ERP softwares with dashboards, tables and search features? Which stack is a better choice?
this is a simple stack , those are not simple things with no choice "better" than another at that level of detail.
this app would be improved if the stocks were retrieved on the client side tbh
Right, it might not be the best use case for SSR and HTMX.
Thats a stack i like
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.