ฝัง
- เผยแพร่เมื่อ 6 ส.ค. 2023
- Building a small app with HTMX, Go Fiber and Uno CSS.
💬 Topics:
- What is HTMX;
- Working with Go Fiber;
- What is Atomic CSS;
- HTMX Architecture;
- Alternative to JS frameworks;
- Easy to use tech stack;
GitHub Repo - github.com/awesome-club/htmx-go
Patreon - / awesomeclub
#javascript #htmx #go
In 2024 we'll go back to HTML and CSS
I hope so! :D
When we stop using css and html?
@@whoknows3679 React with JSX, to some extend Angular and Vue, where you don't directly control your data from the tags but rather in functions like onMount, where you need to load your data using a fetch, then register it in a state objetc, that triggers a re-render of your HTML template, etc. CSS Bootstrap and it's alternative have been overwhelming, but in the last years we see a come back to utility classes like tailwind ( tho it's still a script rather than simple style sheet file )
return to monke
Needed..😅
I used this stack recently, It was so easy that it felt like something was wrong!
Very nice video overall, but would've liked if you showed the results at last and how difficult it is to deploy such a app.
I'll work on a video showcasing the end result.
It is very easy to deploy this app - at the end of the day it is just a Go program.
@@awesome-coding a simple click through of what it looks like or a GitHub link would be much appreciated! Subbed.
It should be incredibly easy to deploy as its just a binary. You can stick it onto any server running on any OS
The ease of deployment is probably the main reason to use this stack.
@@verified_tinker1818 I prefer Tailwind, PHP and HTMX
Thank you so much for this, you have reassured me on how I can use this stack on my own projects. I also really like unocss interactive page super newbie friendly.
Glad it was helpful! Thank you so much for the Super Thanks!
awesome explanation, thanks ❤ hope this continues with more complex tasks for explaining more of htmx + Go 😊
Glad you liked it!
Template engine using custom html props are not new, but adding the ability to make XHR request is pretty cool
Literally playing with the stack right now (well with Tailwind instead) and it's really quite nice!
Nice! I love the simplicity of Go and HTMX combined.
The thumbnail looks like a Fireship video. Good job
Great intro! I wish you'd have shown what the webpage actually looks like with this project though
Thank you!
I know - sorry - completely forgot to showcase the result.🤦♂️
Beautiful!
Thank you! Cheers!
love it
It's either just the tightly coupled way we used building things 20y ago. Or it's just another less scalable angle of Phoenix Liveviews. I haven't made up my mind yet.
I think this is a fair assessment :D
Yes ( for the first one ) and no htmx is just the frontend part which lets you choose whatever backend tech you choose. Yes other solutions have little improvements in dx but I think we can achieve that with very minimal js
pretty infuriating that we didn't see actual result website in the video, lol
ah.. sorry about that. I tried to keep the video as short and tight as possible, and I forgot to showcase the result 🤦♂️
Heyy the new animations are cool I love em ❤ Only thing I will suggest is make the videos as dense as possible but don't save that extra 30 seconds man show the f ing output 😅
I agree - I dropped the ball on this one 😅🤦♂️
HTMX should the the standard, that's so cool.
this stack is 😘, please do alot of go content
More Go content to come!
Now if only someone could terminate the disaster that is CSS and replace it with something that WORKS - we'd be all happy 😊
Call me crazy, but I actually like CSS 😅
How do you recommend to componentize the html in go? I think go/html is missing a lot of tooling (great IDE integration, create and use components, typing, etc...)
Look into templ
The idea of partials, which are essentially components, has been around in server rendered apps for decades.
Nice! How do you prevent end users from modifying the htmx code?
Hey!
I guess you have the same constraints as you would with a SPA. The HTML is served from the server (preferably already sanitised) The user might change that HTML, but your server will still perform validations and make sure the requests are valid when interacted with the page.
Waiting for UnoCSS UI kit video 😊
which editor and OS you use ?
UnoCSS vs picocss for fastest minimal CSS no JS dependencies?
more content on this stack please.
More to come!
Simplicity is great, how about powerfullness? For instance, components & rich interactivity. React is a library but usually it's self hosted after bundling, seems there's no bundling support in htmx & I have to include a script that points to a MDN source?
You have partials for server rendered apps, which are essentially components. Interactivity works great in HTMX. The difference to frontend frameworks like react is that it is server driven instead of relying on client state.
You can download the MDN file and include it as a static file in your project, no need to bundle it.
Getting started with only a webapp i think this Stack is one of the best. However if you have more than one applications or need an API for your App this aproach unfortunatly does not scale that Well as you will need a JSON or XML endpoint at some point and handling json and HTML instead of just json could prove to be quite time consuming.
the entire point of htmx is that it replaces json
what font are you using in your code screencaps?
Hey! That's the default IDE theme from IntelliJ IDEA
❤ htmx
I wonder how those server-event stuff works and If I can do that with php.
I am trying to use the Fetch command in go, but it is undefined for me. Anyone know what the issue might be?
Seems we will complete the circle. Html css js to MVC to SPA to SRA to html css js
Try, fail, learn 😅
But this time with better client side reactivity without a billion gigs of js
Is there any way to self-host the HTMX and UnoCSS packages? Would rather not rely on a CDN for this. Thanks in advance!
Sure thing - you can easily download them locally, and pack them with your application.
Wow the random Fiber drop is surprising
Trying to mix things up a bit :D
The guy on the thumbnail looks like he needs more fiber.
Classic!
The HUG stack 🥰
Haha nice! I missed a good thumbnail opportunity 😅
unocss, picocss or tailwindcss?
It's not much of a difference to be honest. It's mostly a matter of the DX you prefer. For big / established projects you should probably go with Tailwind since it is the most established.
We need CSS-in-Go. 😂
Go might be simple as a language but that actually leads to doing web development in it harder . Even if you use some framework (like Fiber) you are most likely going to miss a lots of features that exist in other big feature-rich frameworks like Laravel, Django, NextJs etc... Because of that I find it harder to do web dev in go regardless of it's simplicity. The mentality of go community that all you need is standard library makes it often very hard because you have do to a lots of things manually while in other languages/frameworks you have those problems already solved. So in that regard go is not freaking easy at all. It's very hard to do it right because you have to do it yourself.
Given its charactestics, I think that Go should be used only by experienced developers when they don't have an equally performant alternative.
Considering you named a bunch of battery included frameworks, then say Fiber, which is a minimalistic approach like Express or Flask, yeah no duh your gonna require either making what you are looking for or importing it. It’s the same with Express and Flask, you want an ORM, import it, database? Import it. It’s not that complicated. Not to mention if you really want a kitted batteries included framework, there are many MVC frameworks for Golang.
this is not a correct comparison since you are comparing a minimal http library (fiber) with batteries included frameworks
His point is that Go doesn’t seem to have a batteries included framework like Laravel or Rails that is heralded by its own community. OP is spot on. Go is fantastic and very powerful and I use it daily for work in a larger org, but if I wanted to build something for a startup I’d reach for it only if I hit a problem with compute speed or needed something small and isolated that performed very fast.
@@DavidThorpe well even if the community doesn’t herald one framework (mainly because the framework ecosystem is extremely diverse and everyone chooses a different framework) there are still many batteries included frameworks. Go Buffalo, Go Appy, uTron, and my personal favorite, Goyave. Now these aren’t popular because Go is very unopinionated in nature and developers rather build their own system designs, not to mention go is primarily a micro service and rest api builder, and battery included frameworks are typically really overkill for most jobs. But the stuff is there, saying Golang is hard because it’s lacking in frameworks is just wrong.
👍
This type of behavior can be easily achieved with Unpoly too.
Didn't know about this one - thanks for the suggestion!
ok. you got me. it is a wonderful video but where is the repo?
No repo for this one - sorry 🫠
I'm working on an extend version for this stack, and I'll make that project available on GitHub.
Thanks, but I personally prefer you use default pkg golang. I am newbie.
Fair enough!
where's the git repo? 🤔
Where is the demo of the project ?😢
Sorry - there isn't one :(
I'm working on a more in depth video with this stack, and I'll make that project public.
Bro, this is how they made websites back in the 2008 days, what the actual fk.
We call this "progress"!
@@awesome-coding Yeah, at least coming from oldschool PHP I can recognize all this patterns lol, btw do you recommend go fiber?
@@axelramirezludewig306 Fiber has great DX, especially if you are coming from the NodeJS / Express world. Go has a bunch of other great advantages, so, all in all, it's a pretty good option if you are not "married" with another framework already.
Where are ApiKey, Fetch and Stock defined?
Hey! in this specific small example you could save them in the stocks.go file.
In a larger project, I would advise storing Fetch and Stock under a "domain" directory, which will contain all your domain related types. The ApiKey should be stored in a properties file.
I don't really care what language to use. In my opinion a good stack is when you write your component once. Writing it in BE land for ssr and a second time in JS for interactivity sucks.
Good point!
How do you componentize in htmx
On the frontend? You don't have to. All you do in HTMX is send a request, expect HTML, maybe with further HTMX included, and replace the content of an identified container with the new HTML, or prepend / append the new HTML to the existing HTML in that container. At the end of the day it's what you request that defines the HTML you receive.
@@matthiaslangbart9841 it's going to be too much code in one file
Why not Go std lib, htmx and tailwind?
Isn't Fiber's DX a bit better?
@@awesome-codingGo devs normally swear by the standard lib lol. But you should do a video that uses the Go + HTMX + Tailwind/UnoCSS + Alpine.js
fiber is slightly faster, but std would be a good choice too.
Is there a github for this?
Sorry - it isn't :(
I'm working on a more in depth video with this stack, and I'll make that project public.
I'm lowkey out on a-h/TEMPL
Remember, folks: KISS!
Rock OOOOOOON!!! ✌✌
So, PHP but worse?
😂 can there be something worse than PHP?
PHP with Laravel Livewire needs the same if not more of the attention that HTMX is getting
Thanks for the suggestion!
I'll give it a try!
@@awesome-coding I'd say you should start with Symfony. Laravel, phpbb and others straight up include base of Symfony (request/response classes) and sometimes more. I get that Laravel is shiny and stuff. But being recently myself at php conference in EU there's been 0 talk about laravel and only symfony. This conference was like 1.5-2k people. 2 weeks later was laravel conf with like 29 ppl interested on fb...
Phoenix with LiveView too !
Yeah they are amazing I have used them but the only problem is I can't use go or rust or any other backend language soooooo ( I hate to say this 😅 ) it depends on the use case
It’s PHP tho 🤢
Can we create PWA with htmx?
Sure thing!
@@awesome-coding would be ace to get a tutorial on the golang htmx example.
Im getting f**** hearing a new stack every single week
I believe you.
Why not just load the CSS file directly? Instead of calling it first via JavaScript 4:25
There is more code in your node_modules folder than the entire linux code base.... to print hello world
While this might be true in most cases, you picked one of the only videos where I created a project without a node_modules folder :))
On top of that, this is a pretty irrelevant metric as long as the build time is really snappy, and the output delivered to the browser in the end is small.
@@awesome-coding you didn't get my point, I'm in favor of htmx, I'm using it currently in all my projects, node_modules are what htmx replaces . Love your content, keep up 👌
@@KhaledKimboo4 Ah, got it now - sorry about the misunderstanding. Thanks for the feedback!
why uno and not tailwind css !
Tailwind CSS could work for certain as well!
How is jwt authentication handled using htmx?
You will be looking for back-end authentication. Perhaps you don't even need jwt depending on your back-end
**OWASP Top 10 has entered the room** 🤣
ha! I posted a video about Auth JS where I was complaining that auth & security are really hard. And then this guy wrote a comment saying Auth is not hard at all. It's not hard until the first security audit 😅
@@awesome-coding Or until you dont do audit at all and then got hacked suddenly 🤣
A classless CSS-Framework would be even more minimal
A no class, no css CSS Framework :D
Omg kill me now😂
Bend over then
wonder if htmx is made by the same people who made underscore and lodash?
same white/blue theme :DD always makes me think if thoies are invented by finns/estonians lol ; )
I think go-chi is a better choice.
You might be right - I don't have any experience with chi, but I'll look into it.
Its all good until fiber... Go was designed to be useful with the std lib and if needed, 3rd party libs. Frameworks, especially fiber, are an overkill to such a language like go.
My gut doesn't like htmx.
Why is that? :D
Now just dump UnoCSS, use plain and proper CSS and good HTML markup, and we're back on the effectiveness track. 😅
Fair enough 😂
@@awesome-coding Rereading my comment, it sounds more harsh than planned. 🫢 However I really meant it: Maybe try good markup and CSS next time, too? Markup for the WHAT, and CSS for the HOW. The goal is to make the markup fully separated from layout and design.
i don't get why people are mad about new tools and tech stacks coming out... nobody is forcing you to use them, you can stick with you own tools and let people who love to try new things have their fun!
You are 100% right. To each his own!
I'll not write htmx and tailwind css together 😅😅😅
:)) why?
after 20 years of garbage frameworks and tools people finally figure out what backend is supposed to do and what frontend is supposed to do
i thought it will never happen
I wonder how one can put so much work into such a video and not provide the full source code... If you follow this tutorial step by step, your code is just not going to work, because the creator left out some details in the implementation... I found it sketchy from the beginning, that the resulting site was never shown... Really strange, since the video in itself is made pretty well and has a fast pace, so you don't waste time with useless explanations
Hey!
Thanks for reaching out.
I spent a bit of time recreating the code. Here is the GitHub url - github.com/awesome-club/htmx-go.
Hope this helps! :)
The reason for the extreme proliferation of JavaScript frameworks is due to the unpleasant nature of JavaScript programming. What developers really want is an alternative to JavaScript, not another framework. It's why there's so much excitement over Webassembly.
Htmx is totally a good choice but still has some security issues (xss), I hope the team behind it get it all working
It doesn't have any issue with XSS since it's your server responsibility to sanitize the returned HTML
You can also simply use the CSP header which is a native protection against those types of attacks
HTMX will just put the received HTML where you want it, so there is no security issue if the received HTML is already secured
Just don't return unsanitised user input and your good go. You do need to remember to implement CSRF though.
@hasukoorachi1505 exactly!
@@hasukoorachi1505 I wouldn't really label it as an "issue" but something like react ensures by default that no html or js will be evaluated, still my point of view and what you just suggested is also worth noting, thanks btw
another tool creating unnecessary buzz among new developers 🤦♂🤦♂. I do think this tool can be useful if you want to create a small scale application as various of the important features are missing from this tool like error handling and etc and even if they are they are not as easy as the traditional try/catch in js or js frameworks and it is very crucial tha in the production level you can understand code and can change it very easily if required but if we use this tool in any large scale application like any social media platform application, it would be a huge mess writing 5-6 lines only filled with single html tag and we will be writing comments more than the actual code as the code readability will be a major issue. First of all you are trying to say that the web can work without js which is completly bs and just a stratergy to create a buzz among the lazy newbie deevlopers and nothing. I think this tool can do very good in it's own level but the audience it targeting and the kind of stratergy it is using to make it popular is not good and will result in bad outcome in a long run. That's what I think, your openion can be completely different and I always respect a different valid openion until and unless you are just a fanboy or a hater. 😄
Its so stupid lmaoo, they wrote js for you. Doesn't mean you have a better performing website. xD
Go is easy? Lol what???))
Isn't it?
@@awesome-codingNope - python, js, php, maybe Ruby is easy - golang is not easy language
@@ukrainetoday960 I'm guessing it's all relative then. I would definitely put Go in the "easy" category, but yes, compared to JS any language would be considered "difficult"
You lost me at Go Fiber.
😅 it is not that bad.
chi + base go http >>>