The HATE Stack - Simple and Efficient
Вставка
- Опубліковано 27 чер 2024
- Building an app with Go, Echo, HTMX, Alpine and Turso.
💬 Topics:
- What is HTMX;
- HTMX Tutorial;
- Go & Echo Tutorial;
- Working with Alpine;
- Go advantages;
- Build a full stack app in 3 easy teps;
- Scale your app with Turso;
✉️ Join the Newsletter - newsletter.awesome.club/
🥇 Become a Member - / @awesome-coding
📖 Blog Article - www.awesome.club/blog/2024/ha...
💻 GitHub Repo - github.com/awesome-club/hate-...
#javascript #htmx #go
this presentation, pure gold
Thank you, kind stranger!
I call the more general version of this the HAT stack, htmx, alpine and a template engine, I am using it with twig to build custom wp themes with great DX and UX
Sounds great!
Can you please point me to your repo? I want to see the work.
@@awesome-coding Also I'm testing out the new routing features in native go 1.22 so no extra framework needed keeping it even more native.
What’s twig?
@@LukePighetti php templating lang
Thanks for the vid! Learned about a couple new libraries.
will try to use this stack soon
Let me know how this works.
Thanks for sharing this, sounds like a more straightforward (and sensible) way to build modern apps. The only thin I'd disagree with you is that apps are built database-first, we have moved away from that approach decades ago, for many reasons, we don''t need to use the database as an integration layer anymore, applications now have their own persistence model and that is not shared with other apps, hence we get the luxury of designing the database last (not first), instead try domain-first and focus on the customer/user experience and journeys.
Then state is on the client?
clean :)
looking good for solo hobby development 😊
You are worried about maintenance in a larger project?
@@awesome-coding no, I'm just programming only as a hobby just now. Until I'm in highschool I don't plan to work somewhere
But I suggest you check Laravel + Splade. I'm focusing now on Laravel. It's so good 😎😎
@@awesome-codingEnds up in a mess anyway 😂
@@livghit 100% all projects start great on paper, and then, 3 years later, they are a complete dumpster fire...
Nice video! Would love to actually see the live demo of a working app as part of a video like this.
Noted! Thank you for your feedback!
first time hate feels so good
100%
Such a good and beautiful presentation
Btw what color theme is that?
Thank you for the feedback!
It's the default team in IntelliJ IDEA.
We've come full circle to a modern jQuery + server pages of old. Waiting for a modern Ruby on Rails so we can repeat the cycle all over again.
Nice!
I am thinking about combinkng Go, HTMX, Templ and web components.....
I tried it with shoelace using benopotamus/htmx-ext-shoelace, it was good
JSP JSP JSP!! and it's amazing in 2024 again!
Is this an actual editor or are you displaying what’s happening through a custom viz tool? Ref: 3:27
Hey!
The right hand side are screen captures from IntelliJ IDEA.
The left hand side (the file explorer) is custom made by me in Photoshop.
@@awesome-coding That's dedication right there, sir! Kudos
@@carlosmspk Thank you! :))
I am interested
I will look into this stack
Glad to hear! Let me know how it goes :)
wouldn't mixing Alpine and HTMX complicate things like in the video haviing x-on:click and hx-post on the same button ?
One of the reason why i prefer _Hyperscript over Alpine. Clearer separation of duty.
What is the benefit of using alpine with htmx? (Just from a brief look at alpine, it feels like htmx already does a lot of what alpine is doing, though alpine looks a bit nicer to work with in some scenarios)
Hey!
Alpine runs JS code on the client, so you have some control in creating nicer user experiences.
HTMX is a more rigid in this sense - you can update the DOM and make changes, but those changes are usually linked to some HTML response received from the server.
@@awesome-coding right that makes sense, I guess htmx can call javascript functions but they have to be predefined right? where as this allows you to more dynamically run js
Would love to see a more in depth video🙏🏾
Noted! Will do my best to provide a more in depth walkthrough.
@@awesome-codingsame here, would be great to see more videos like this. Thank you for this video too! I am considering a stack like this but would love to be able to quickly add npm packages when / if absolutely needed. For example, a date picker. Can I recreate it in HTMX without any js? I can. But there is already hundreds of them on the npm and sometimes, especially if you are in a rush you just want to reuse an already existing solution. In this case I wouldn't use it for state management but just client-side "magic" to make it prettier, interactive and looking more modern. Would Astro with island architecture be better than alpine for this use case? also how would I approach with final bundling, packaging (minifying, tree-shaking)? Vite?
@@veddys503 This is a pretty complex discussion.
In this stack you should probably consider using Web Components, and go with the HTML standard.
If you know you are going to rely on NPM quite a lot, and you have a Vite setup in place, Astro + Solid is the way to go. You'll lose the benefits of having Go on the backend (which, at the end of the day, performs way batter then server side JS).
The truth is that Astro + Solid is way more appropriate for people who are already heavily involved in frontend. The HATE stack is more useful for backend developers who want to be able to build full stack apps, but they want to avoid the frontend JS mess (which is pretty bad, especially if you come from a mature / established environment like Go or Java).
@@awesome-codingyeah it is a little bit complex requirement. I had a similar conversation with some other devs on reddit at the r/htmx and some of them shared their vite config for their projects. Even though they use different backend languages (like Node and PHP) it pretty much addresses the same requirement. I might play a bit with vite setup and see if it gets me anywhere. My ideal setup would be go+htmx for most of the project and then if situation is "hey I need to show a diagram here" - Step 1: npm i [some package], Step 2: include, Step 3: I have a diagram.
@@veddys503 to make it make sense, you really need to forget about things like NPM and anything that the front-end world brought into existence haha. For most of the Js-heavy components, you could look into alpine plugins. They got things like date pickers, calendars etc
Alpine distro as well
Thanks for the video, this is really interesting, would there be a repository of the code anywhere to study it in detail and better understand the thinking?
Link to repo - github.com/awesome-club/hate-stack
Great! Thanks for sharing. As a Go developer learning HTMX, this is helpful! Do you have a full course on building the blog in the video?
Glad it was helpful!
I don't have any courses, I didn't think anyone would be interested 😅
@@awesome-coding Oh yeah, I'm interested :)
@@envitab Good to know! I'll work on something :D
Very surprised you didn’t add Fresh to that group of framework icons at 0:32. Aren’t you a member of the Deno team? 😄
Haha - I'm not a member actually - just an external colaborator helping with their UA-cam content.
@@awesome-coding Well you're doing a great job on both channels, always look forward to your content
Can you share this code repository please!
it's in the video's description
@@dominikzurek3874 gotcha !! Thanks
The problem even with this is that it still adds to the loop of hell what is web dev.
Everyday something new pops up solving problems of XY doing A better but lacks in B
And regardless if some solution might be more complicated or more simplified.
The constant switch between stacks is what is the core problem.
The speed of things being re-invented is substantially higher than what it realistically would require to even switch over to a new stack, meaning most of the time new stacks or modern replacements are more a question of newer projects rather than existing projects.
And over the years web dev space overcomplicated a lot of things, while in terms of efficiency from a code-perspective PHP alone could cover everything, given one builds that framework for the required need. But obviously for ease of access and quickly spooling up projects modern solutions are better, but the implied chaos of the modern web is counterintuitive to what progress is meant to solve.
And this is even disregarding personal bias and devs preference, cause that in itself already starts wars apparently, lmao.
Thanks for sharing this! I 100% agree with everything you said.
While I kind of agree it's good to see alternatives to the popular frameworks. Theoretically the Go part of this, which does all the heavy lifting, wont be affected by future Go version updates or be obsoleted in 2 weeks (preserving backwards compatibility is a core belief of Go team).
Anyone else have trouble with the turso CLI tool? I have been fiddling with it for a bit now and I cant even get properly logged in on windows
Any thoughts about jQuery 4.0?
Good for those that already uses it but not worth to adopt noadays imo
Go away 😂
Hands down the best JS library ever created - I'll post a video on this exact topic on Monday ✌️
Its the Deno guy!
✌️
Thanks for the video! But I have some questions. Are pure SSR apps still viable? This stack is still considered MPA, which means client has to wait for each page to render server-side, resulting in a less seamless user experience. But thanks to efficiency of this minimal stack, the server-side operations seems to be extremely fast, and the file sizes are small since it ships zero JS. So, can we consider this stack to be able to compensate for the core weaknesses of SSR? Or should we follow a different approach for the real world cases?
You can use this stack in a single page style. Just need to deliver the container app, load something after loading and rely on the browser history helpers that HTMX offers. The main difficulty you will have is you need to work in your backend to render the routes you will be using client side when accessed directly..which btw is exactly what the js frameworks that support SSR do
Give it a try first. Don't get stuck with preconceived notions or biases. You'll be surprise MPA can be more responsive than SPA. Unless you're building something like Google Sheet/Map.
no, it's not an MPA it's the same as SPA, just instead of getting JSON response and the client devices turn it to HTML, in the HTMX the server does that. but the user experience is the same.@@XXnickles
Great I just change Echo for ElysiaJS
Interesting idea! I'm still on the fence with Bun though... I'm not sure they'll be able to get a lot of market share from Node.
HATE Stack vs sveltekit? Which is your pick?
SvelteKit or Qwik City
This is debatable :) Qwik City is a good choice.
Svelte Kit is nice and powerful, but it's very easy for you do make a small mistake and end up with backend code running on the frontend - this is very scary from a security perspective :(
btw.... which CSS libraries are good with this??
Hey!
CSS is really a matter of preference. In my experience, there are 3 big choices:
- vanilla CSS;
- SASS;
- Tailwind / UnoCSS.
I'm not a big fan of the utility class approach, but, if you are, you can drop UnoCSS directly in your document header and you should be good to go.
I'm a fan of SCSS (mainly because of nester rules & mixins), so most of my projects are using that.
These days, there are a lot of people pushing vanilla CSS, so that's always the safest option.
@@awesome-coding thanks
with chatGPT, I think vanilla everything is going to make a comeback@@awesome-coding
Let them discover Ruby on Rails scaffolding 😂
Currently working on the other way. Rust, Axum, Askama, Sqlite, HTMX. RAASH stack LOL.
How do you find the DX?
@@awesome-coding I'm newbie on both rust and golang. As solo dev I Love the strictness of all rust framework, It will tell you what's wrong. I think Golang not good detecting potential error.
DX speed wise I spend 10 times more than developing JS/TS lol.
I am trying to do the tutorial but I get an error in main.go in
port := os.Getenv(key: "PORT")
What PORT is suppose to be?
I'm not sure about the rest of the code, but the output of the os.Getenv is a string, you may want to convert the data retrieved to a number type.
Hey!
Take a look at 3:15
The PORT is set up as an environment variable before the "go run" command.
You can find the project here - github.com/awesome-club/hate-stack
java programer
yes java is dificult
but if u use the lates version of spring boot u will gain simplicity
spring security is complex and big but this is a general problem and its dificult if you are implementing the first time
I prefer the CACHE stack:
Cockroachdb, Alpine.js, Classless.css, Htmx, and Echo
I use the hateos stack Htmx Alpine Templ Echo gO AND Sqlite.
Wanted to go this route for a new project, but im missing 2 features in the dx, hmr and tailwindcss 😢
Setting this up with tailwind feels like hell
UnoCSS might be an alternative which can be dropped in directly in the document header.
You could also look into twind
@@awesome-coding looks like a good alternative indeed
@@inanefool8781 I did a little bit of digging, and tailwind just isnt made for these kind of environments :/ you could get it to work with twind, but all the add-ons/plugins you would usually use, arent available then.
you should check out the axum rust framework. it has an interesting feature called extractors. axum is very simple and easy to use as well. at work we migrated from go to rust and while i enjoy go it has limitations. it doesn't feel as feature complete as rust. that can be a positive but for us to was a negative.
Thanks for the feedback and the suggestion.
Yep, Go's appeal is its simplicity, but that comes of the cost of expressiveness.
Hahah this is great
Thank you!
All we need is Laravel, really.
So you choosed Torso just for the sake of naming it Hate?
I got another stack HTMX + Alpine + Nginx/NJS + CouchDB... Besides HTTP, HTML, and basic JavaScript you don't need ever to learn anything. Hardest remains CSS...
what if getpath stack (Go Echo Templ Postgre Alpine Tailwind Htmx)
You guys are killing it with the acronyms :))
I’m currently making my first production app in like 7ish years that isn’t using a front end framework with a separate backend api. I feel like such a noob again lol.
I can relate to that :))
I'm thinking of trying HATFi, replacing Echo with Fiber.
Is there any repo with the code used in the video?
👋 sorry for the late response.
Here it is - github.com/awesome-club/hate-stack
Why do you use the functions attached with a struct instead left the functions and just call these functions that you need from another module?
I believe this to be a good practice, since the functions addressing the same business areas are grouped together. This could help down the road if I need all these functions to share some common state or references to other services, since that struct can hold that together.
Hi,
awesome presentation. I wish I could make it work btw.
Can I get github repo link please.
Hey!
Here it is - github.com/awesome-club/hate-stack
Should've called it heat since it's blazingly fast
True :)) Hate works better for the algorithm though.
@@awesome-coding I can't argue against that 🤣🤣
I'm a noob. Why alpine instead of hyperscript?
Just a matter of preference at the end of the day.
On top of that, HATE sound way cooler than HHTE 😅✌️
I love me some htmx, but hyperscript is an abomination. Not even a good idea.
hyperscript syntax is too different
@@punkweb can you explain more? Do you think that alpine is also a bad idea?
@@007arek alpine seems fine to me, I'd try it out. There's just no good reason at all to use hyperscript. Unless you really hate JS so much that you have to use something worse to prove a point. And it's syntax is confusing and awful imo
I would use hyperscript instead of alpine
Do one on DHAT Stack. Django in lieu of Echo.
Sadly I have very little experience in the Python world.
When I'm tired of modern stuff i just go with pure html js
Clean and easy.
Isn't this is what svelte is doing when your code gets compiled to pure html js?
@@roblesrt Yep - that's the main idea behind SSG, which is supported by a wide range of frameworks these days.
You need to fix those SQL injection vulnerabilities. Never use string format or string concatenation to build SQL queries.
SQL_Injection doesn't like your comment...
He literally said it in the video
That wierd moment when you typed the comment without watching the video.
@@SedBuildsThings Just proving the point that people will not listen to you if they have pre determined conclusion already.
You can use it but put it into prepared statement before execute it on database
so with htmx go has a big comeback?
I think Go is on a steady rise from its inception. It started as a lower level solution for building systems, but it is now getting into other domains as well.
Better than the other typed languages like C++, Java, C#, Rust?
i'm one more stack to give up on this field
would rather use svelte or svelte-mpa rather than htmx
fair enough :)
What about Laravel + HTMX and sqlite?
Laravel 11 will also support sql server so you could use turso too
@@echoptic775 ngl Laravel 11 seems interesting also they will release Laravel Reverb which allows you to host your own websocket server
Same ideas, different tech Stack. So a valid Option!
Why would you use HTMX with Laravel when you have Livewire?
the problem is that people doesn't want to accept the choices of another one
Very informative. One piece of feedback, almost every sentence say you ends in a high pitch and gets annoying after a couple of minutes.
valid
+1 Sounds robotic
Thanks for the feedback! I am trying to change that as much as possible, but apparently this is the way I normally talk... 🥲🤦♂️
you could write your script then read it all in one go then clip it into sentences for the video. it’ll minimize the upspeak and you don’t have to change
@@I_SEE_RED This is how I'm doing it these days - write the script, have a 20 minutes recording session and then edit that sound.
The main issue I believe is that I'm not a native english speaker. So despite the fact I'm reading it in one go, I'm mentally splitting the text in sentences.
I'm still working on it, and hopefully it'll get better over time.
Lol 🤣 I have a strong feeling that every technology except htmx has been chosen just to make HATE happen
Also I'd strongly recommend watch mode in the templ cli and a tool like air or gow to hot restart the go server
😂 Thank you for the suggestions!
@@awesome-coding that emote means I am right ?! lmao 🤣
@@TechBuddy_ Well... you have to come with good titles for your videos, right? 😅
@@awesome-coding 💯 percent lol 😂
ah, yes, the i watch too much youtube and twitch stack
😂 I'm not in the Twitch target audience.
i love to HATE soo much XD
Stack acronym or not, If you dont use HATE to dev you are not dev-ing properly! (or at least not efficiently)
Facts!
With go 122 you can rename your stack to HAT kkkkkkkkkkk
👏🏻👏🏻 exactly!
how many stuff I need to learn? every now and then there's something new. modern new concepts are not adopted by most companies, so it's more or less is like masturbation, dont't you think?
😂😂
Honestly I believe that the most important thing is mastering the basics.
If you have a good understanding of the core concepts, you'll be able to easily transition between what's trendy. After all, there are very few really new concepts. Most of them are recycled or slightly modified and presented like the next best thing purely for marketing reasons.
If you change the narration your channel will blow up. The random up tones and down tones are annoyingly distracting from an otherwise great presentation.
Thank you for the feedback! I know the voiceovers are not great - working on it :(
@@awesome-coding sorry for causing offense, perhaps that was a bit blunt. I would like to help you, your channel is amazing (one of the best full stack channels) maybe we should get on a call, how do I contact you? I'll delete OP shortly.
@@edism Hey! Don't worry I was not offended. And no need to remove your comment.
I know I speak in uptalk mostly because English is not my native language, but I'm trying to fix it.
You can always reach out via Twitter DM (twitter.com/AwesomeCodeClub).
Thanks again for the feedback!
@@awesome-coding Cool, I'm looking forward to talking to you. I'll send you a message from my company Twitter.
you need to close body after a post http call
😂
✌️
Why HTMX, why not Hotwired Turbo? Turbo is more natural than HTMX. For example, if you need perform POST request you define form, not hx-post that is not standardized and will not work with broken JS. Yes, more code, but you'll follow standards, not strage opinionated library. And Turbo operates on higher level than HTMX, which is better.
Thanks for the suggestion - I have little experience with Turbo, but I'll give it a try.
Love how the Windows support for this is utter garbage.
First?
☝️
After the initial excitement of using Echo with HTMX and Alpine for their simplicity, everything becomes much more complicated as the complexity increases, for example, with greater UI interactivity. What is trivial for a framework like Vue turns into some grotesque complexity here. For instance, something as simple as displaying a spinner and disabling editing and clicking on a form while sending a request to the server. HTMX has hx-indicator, but it is too primitive; you can't assign it a JavaScript function, only specify a piece of HTML code to display.
I get what you are saying.
You can create / use extensions when core HTMX is not enough. For your specific "form disabling" scenario you could use something like this - htmx.org/extensions/disable-element/
Anyhow, I agree that HTMX is too rigid to support a lot of UI interactivity. This is why I believe pairing it with something like Alpine is a must.
you didn't simplified anything. why waste htmx with templ (jsx style), also for what alpine? why go and not php for just returning html? why not sqlite and not turso at all? the simplest stack ever is HPS (HTMX PHP SQLITE), i wouldn't even use composer. and it will work everywhere with just drag and drop.
there are something more powerfull and enjoyable, its name is Phoenix liveview.
I really need to look into Phoenix more closely :))
Thanks for reminding me!
you don't need to make multiple packages man, just put all code into one single folder, or even at the root
This is debatable.
For small projects you might be right. For larger projects, splitting your code in packages helps with maintaining your codebase. (At least this is my experience)
I enjoyed the video, and it’s well made, but it feels too fireship. You should try coming up with a more distinctive style
t := b:= what is that??????? noOOOOO T-T
That is called convenience :))
In all seriousness - it's shorthand syntax, and its use is optional.
@@awesome-coding I was kidding, thanks for sharing a super valuable content! I'm learning go now. But coming from frontend I feel the DX is a lil bit rough
@@saura_ Glad to hear! Honestly I had the same problem when I first started to look at go. I blame JS's simplicity for this problem.
One of my main takeaways after 15 years of coding is the importance of always studying new languages, and looking at how different people are tackling the same problems. I spent quite a bit of time doing mostly TypeScript, and I was getting to a place where it was too comfortable to try anything else.
@@awesome-coding I'm exactly at that point. Super comfy with TS
yeah let me return html from the server as if it’s 2009
You mean everybody is wrong?
Actually, more like 1993. People still forget you are going to be returning some sort of HTML from the server, and that has been te case since the beginning.
Sorry but turning shit into json then hydrating html on the client is a waste of resources. Just let the backend do that
SEOless
There is no single website in this world that doesn't work by having html returned from the server... that's the whole point of having a website hosted any where
Do you want the server to give you an URL to a google drive folder with the html in it? I really don't understand this comment 😂
Why don’t we just use rails? Everything is baked into it.
Definitely an idea worth exploring.
3:14 if your only make target is .PHONY... you don't need make.
Presenter said in the video he made some choices like creating multiple folders in the project since they are needed pretty quickly. I'm a fan of his repo's Makefile actually it keeps anyone new to teml from trying to run against old generated code.
man, I love your video but that melody you put on whilst speaking is so annoying that keeps me want to stop the video, please stop that
The melody playing for the first 15 seconds?
🤦🏻