Why We Switched From Svelte Kit To Golang + HTMX
Vložit
- čas přidán 7. 12. 2023
- ► Join my Discord community for free education 👉 / discord
► Exclusive Lessons, Mentorship, And Videos 👉 / anthonygg_
► Enjoy a 60% Black Friday Discount on My Golang Course 👉 fulltimegodev.com
► Learn how I became a self-taught software engineer 👉fulltimegodev.com/#mystory
► Follow me on Twitter 👉 / anthdm
► Follow me on GitHub 👉 github.com/anthdm
github.com/a-h/templ
SUBSCRIBE OR NO MARGARITAS
╔═╦╗╔╦╗╔═╦═╦╦╦╦╗╔═╗
║╚╣║║║╚╣╚╣╔╣╔╣║╚╣═╣
╠╗║╚╝║║╠╗║╚╣║║║║║═╣
╚═╩══╩═╩═╩═╩╝╚╩═╩═╝
► Join my Discord community for free education 👉 discord.com/invite/Ac7CWREe58
► Exclusive Lessons, Mentorship, And Videos 👉 www.patreon.com/anthonygg_
► 60% OFF on my Golang course 👉 fulltimegodev.com
Thanks for watching
I would love a Go-HTMX-Templ video, that combination sounds so good
Agree! Additionally would love to know, how you've incorporated Tailwind in there, since I see you use arbitrary values which are, if I recall that right, require some pre-processing by tailwind's utility
highly agree
looking forward to it!
me too
same, i'm considering redoing my invoice generator app in this stack
That sounds very promising, I'd love a detailed follow-up for HTMX x Golang tuts more in Anthdm style!
Next vid
@@anthonygg_ Yay!!!
Wow, that's the coolest thing I've seen in the past year! Definitely a thumbs up for this. I hope you record the full setup for this. And please show hot reload with GoAir.
For me, with tools like svelte, the state management across pages and components is the biggest sell. I’m interested to see how your managing complex state here; especially if and when state is mutated by something client side such as a drag and drop event.
For state use URL path and query params. For more complex things cookies. People did that for decades and it worked fine. Nowadays devs got brainwashed by all those JS frameworks and forgot web standards 😂Client side only things like drag n drops you can use vanilla JS. Templ supports writing also JS scripts.
You can inject vue js for that purposes
The standard solution for that in Elixir/Phoenix land is to use Alpine for that
Svelte without sveltekit is the perfect tool for this
Interesting point. I'm just now really getting into this stuff. I have also played around with PowerShell templating. Not sure about sveltekit or nextjs@@kp8752
Funny how development trends come and go and repeat themselves. This looks exactly how C# developers were building web applications 10+ years ago with MVC/Razor syntax.
Exactly my thoughts. Never ending changes in the JS world copying eachother seeing who wins, and now others doing the same when .net has been doing all this years ago. Its amazing.
Love the HTMX Go stack!!! Some HTMX tutorials would be awesome.
I recently dabbled into templ and instantly knew that this + htmx is just going to be awesome. Great to hear that a veteran agrees :)
Hey Anthony, good video! I've been using HTMX & Go as well for my projects. I like your approach here, but I think the more idiomatic approach to handle form errors in HTMX is to set up a in your form, then . In this way, your sign in handler can simple return the error component in case of errors :) The rest of the form component will remain unchanged so users don't lose their input
Very nice! A video on how you guys set templ up would be awesome.
I would definitely want to see a more deep dive into this! Sounds great 👍
I started using the same stack a couple weeks ago I absolutely love it. Templ / Echo / HTMx are such a joy to work with. I would be very interested in a in depth video showing how you setup your dev env to run echo / compile templ / tailwind / typescript. I have hacked up a half-ass solution for that, it works but it's not ideal
Well done. I did this few months ago on my project. Absolutely love it. So much easier than bundling Svelte together with Go backend in self-hosted version.
Great, this looks promising. And by the way thx for the bigger font size in the code, now I can watch your videos from my mobile.
Yw
Totally new to Go but your sheer enthusiasm persuaded me to give this stack a try.
Yes. We want the in-depth video on this. I would love that.
I've played with temple a bit and I love it. Would definitely love a followup video on how to structure a project using Go-HTMX-Templ. Thank you so much for this video.
yes, please do an in-depth video on how you set this up, I'm sick of duplicating state & types just for the templating capabilities that JSX or Svelte offers, plus when it's a one or two man show, no point in having a separate backend & frontend
I've just stumbled onto this channel and it's amazing. I've done a bit of golang for my job but honestly, I'm interested in the business side these days. I've not done my due diligence to see if you have any videos on starting and/or running a SAAS or if you'd even be interested in making such content, but that's a huge blindspot for me. :)
Kind of interesting seeing how software development has come full circle and now what PHP did for decades before SPA even became a thing is now once again considered to be a good practice
I would love to see an in depth with templ and htmx
I want to see you make a follow up video with a tutorial on how to set that up.
Jup next vid 😎
This is cool man. Definitely thumbs up!
We-re also using SK + GoLang. GoLang team being seperate from us. The solution for the issue of rewriting Types is to have a shared submodule repo which contains api specs with yaml files and the types for us. Our case is different because SEO is irrelevant for us so we're using SvelteKit with CSR and it's great.
This looks a LOT like MVC / RazorPages imho.
Will take a look at HTMX first chance I get though.
I didn't understand a word of what you said. What are you producing? Web pages or what?
I started a project with sveltekit+golang when I watched your video about that and now i have to switch to htmx+golang 😁 cant wait to see next videos
Amazing ! Would love to see an in depth video
Next vid
"we have sveltekit in the frontend, golang in the backend" -> uhm isn't sveltekit a backend too? Or did you mean svelte?
sveltekit is more like a full-stack framework. you can use sveltekit but then build the app solely for the frontend like with an ssg
intresting. For someone whos using sveltekit with typescript backend, and no experience with go. How hard would it be to do a switch? and why should i use Go instead of GO?
Would be interested to see how/where you deploy a setup like this.
Amazing Anthony GG thanks!
Looks really promising. I’ll for sure try this out on my next project
We’re still PHP back-end, but I’m using svelte-retag to render Svelte as custom elements with nesting, context and etc. That way the UI is still fully svelte and the back-end is still fully PHP (as it always has been). Custom elements (web components) are a fantastic way to bridge the gap between front-end UI and back-end data/templating logic.
I don't quite understand here, did you use svelte as full client side rendering or just use svelte only on specific components (use svelte sparringly)?
@@adicandra9940 I’m migrating a very large website over by building new design elements in Svelte. I’m using svelte-retag to implement them as custom elements (instead of using the built-in functionality) so that I can nest and compose them together. So… to answer your question: Yes.
Basically it’s a big PHP site that has been around in some form since 2014. Most of the functionality already present is jQuery. It uses server side rendering (like you’d expect in many PHP frameworks, SilverStripe in this case). Lots of the code is a mix of legacy _globally scoped_ (but still nested) SASS code. The issue is that in this setting (as an MPA) it’s not practical to manually instantiate and target containers for every single instance of every particular component. Using web components (custom elements) allows me to easily port over and maintain the lifecycle of each component so Svelte can _very easily_ live side by side along all the other code on the site as I slowly migrate everything over 😊
It sounds complicated, but that’s only because I wrote the library, so I’m in the weeds. It’s actually very easy to use. Pass in your HelloWorld component and it’s immediately available _everywhere_ as .
@@adicandra9940 btw, re: “full client side rendering” - I interpreted this as using CSR instead of SSR.
I do have plans to *also* investigate ways to perform SSR (or maybe even SWSR, i.e. service worker side rendering) to help mitigate issues with CLS + code splitting, but that’s very experimental right now. I’m still thinking about how all that would work, architecturally. But, it’s interesting since we’re talking about *SSR* for _web components_ with Svelte. 😎
Totally! I would like to see ASAP a tutorial end to end on using TEMPL + GO and Wails if possible. Much appreciated!
Great video. Would love more video tutorials about go and templ and HTMX
Pretty good combo. What was the reduction in code percentage? time for conversion?
when visiting your website i can still find the in login
Great video! I feel the same way about Laravel + Blade/Livewire. If you have very complex interactivity then sure, a separate JS frontend makes sense. But in other cases the extra layer slows down development, increases costs and adds unnecessary maintenance headaches.
I found alpine to be the best for small reactivity
Would love to see more go templ. Great video
did you say you had Sveltekit (Sk) + nextjs + golang to start with and you dropped Sk/nextjs because all you were using Sk for was rendering html and htmx enabled that without the overhead of using Sk? If i got that correct then it wasnt so much a move from Sk to golang + htmx as replacing the Sk rendering with htmx? Could Sk alone not have done what you needed or golang was a must? Did really get the "how" you did it but would definitely like to see this. I get the dev time saved but was that at a performance expense? It seems htmx is essentially state management which is what Sk is all about, with performance.
I'd love an in-depth video on this stack, it seems really beautiful.
Latest vid
I never used it, but "templ" looks like so an interesting package. Thanks for sharing!!!
Your welcome
yes please we need a video how to setup something like this!
Next video
Of course we need a tutorial sounds great!!
Alright
This pattern is of programming the front end is amazing powerful. You still need a little bit of JS on the front end, but not all that much. If you're servers are fast at replying then the user would hardly the be able to tell, if at all. And there are things you can do to make it so they can't tell at all. The complexity just goes way down too. It seems like the complexity is linear with templating but it is nonlinear when you put all the logic on the front end.
I used this pattern to build offline-first applications and it works great.
How long until you switch to the Next New Thing? I give it 18 months max.
A few questions:
1) Where was the HTMX???
2) Testing: How do you unit test these .templ components and has this approach made E2E tests like Cypress redundant because you're integration is essentially guaranteed now?
3) DX: I didn't really see any hot reloading, so manually restarting the server each time I make a change would drive me up the wall i think...
It's cool for simple stuff. It's really annoying to work with when you need dynamic updates though. Sending back html isn't the best if you need an API or something.
But it's a cool concept.
I guess it's a preference.
Good for backend people who hate frontend stuff haha.
I guess it also could be a fun challenge to do something similar to a frontend framework. 😊
an in-depth vid for templ, htmx and tailwind would be very much appreciated
Very interested in this. Love Go, but every time I try to make a webapp in it I find myself reinventing so many wheels and importing so many things just to get standard stuff like database migrations, CSRF or encrypted cookies that I've basically created a worse Ruby on Rails at the end of it and had to make a ton of decisions just to get up and running with the basics. Go templates have been a huge thorn in my side that stop me every time, so I'm really looking forward to trying templ.
How are you handling page transitions? When pages are longer than a screen, HTMX likes to scroll to the top when loading new pages or transitions. I built my site in HTMX and Django.
I want to know the same...
I bought your course when you released it, honestly... I would love to have your way of doing ho-htmx-tmpl apps
That would help lot of people to graps the entire concept from A to Z
I have seen this used quite a bit lately. I think a tutorial where it's specifically htmx focused would be appreciated.
Wow, just wow. I really want to try this. I’m working with golang and react for around 1.5yrs, I am not very familier with vanilla javascript, is it hard to make interactive thinggy with using golang tmpl and some javascript? Because I would love to try some of this for my side project
what about your tailwind bundeling? Are you just importing the whole Taliiwnd script from a CDN or do you have a custom bundle script?
esbuild
Have heard the whispers of templ for a little while now. Will definitely try an implementation with this in my golang stack.
Before the rewrite, did you use next.js for server side rendering as well? is there any bottlenecks that you face with next.js which made you decide to rewrite? How is the result going so far, is the performance improved?
Thanks for sharing this! It reminds me of PHP with Laravel. Looks like lots of frameworks and libraries these days are becoming like PHP.
I have to redesign my compnies dashboard currently in React and Node.js, can we switch to HTMX + go? Is it good for building dashboards?
For simple frontend it make sense but when the frontend is more sophisticated I doubt htmx would be able to replace it.
definetly interested in the setup of this :)
That sounds Great!!
I tried Templ but got annoyed at how long it took to recompile when doing a hot reload...
I am a junior front end developer. I dont code in Go, but i would definitely want to see a video of a go + HTMX in production. I thought it was only me who is too confused with React spaghetti code and all those frameworks, I truly believe that HTML6 should be somehow resembling the HTMX
Id love an in depth video because my company has the same issue. Most of the work is duplicated between front and back end, changing types and figuring out new api calls types.
Would love to see the in-depth video !
would love a templ tutorial. Ive tried pure htmx and got it to work but struggled with templ despite knowing it was definitely the next step!
Vid next week
Primeagen sent me here! I'm a SRE/DevOps guy and HTMX is the only thing that has me interested in actually doing a frontend project. Please do more videos about this stack including a beginner friendly video on basic concepts and setup! A lot of people like me would really appreciate it ❤
I think you would love Phoenix live view and elixir
great work
Amazing. Please share how you do it. Thanks!
Next video
I said to myself, “that’s just react code,” and then you said, “it’s just like react code” lol heckin brilliant
I knew this is coming since I heard about htmx, next will be a GO framework with htmx 🔥
Unfortunate I'm so much used to separate BE from FE that I even forgot how to use templates in the BE. No matter how small the app is, I always split it into Go/Node in the BE and and React in the FE. It just feels home to me.
I would love to see a video on how you make a production deployment with docker and a go htmx app with templates.
But templ is not version 1 yet so it may be not stable, right?
Gave me Vietnam flashbacks of Smarty templates in PHP.
You’re a great story teller
I like how people get excited about the coding approach that I've been using 13 years ago coding on PHP
it's the circle haha
we ended where we started, just backend language and template around it lol
a tutorial on Temple would be awsome, it looks great
Hello there, thank yo so much for this video. Please create a whole course on Golang+HTMX.
Very interesting stuff
some feedback, i did a forgot password and added an email that is not registered and got a success response (although didn’t get the mail), won’t it be better to first check first if the account exists before sending a success response ?
also in the auth screens, the logo does not lead to the home page
I stumbled on Templ a few months ago. My only problem with it was the LS was horrible and would regularly mangle the HTML in the *.templ files making it unreadable. Did ya'll have that problem at all?
Its fine. Not perfect. But problems are there to be solved. If we just see a problem and leave it for the better, nothing new can be explored
Hey man do you mind also showing how you leverage Web components for som interactivity?
I'm a PHP devloper thinking to learn GOlang and this pretty much looked like PHP and I love it. Please do more videos! Can you make step by step from zero to make simple template that would integrate GOlang funcitons? Thanks!
Yeah, when I saw this I thought "PHP has had this built in 20+ years". But I get it, Go is the indispensable part of the stack, so he needed something that works with Go.
try htmx but still stuck with many simple require js action event. example: clickoutside when closing search suggestion
You still need sprinkles of js. But not 4034 npm modules
This is awsome! if you can create Go + HTMX + tailwind repo just like boredstack would be out of the world!
I will do that!
Is there any open tech positions at Levenue? :)
Amazing and eye-opening. Where is the code?
Yea, I would like to know why you use Echo framework
Please let us know how it works for you because I have fallen in love with golang and htmx separately and that would bring two loves together. I gave talks in my company about the two tech separately but an in depth walkthrough on a real use case would be fantastic
Seems amazing, please make a video about it
Next week
And why did you switch from fiber to echo?
Thumbs up for tutorial!
INDEP VIDEO PLSSSSSSSSSS about Templ golang
Yes sir
I’ve actually talked to the guy that made templ, he actually started the project that employed me
4 years ago I build something similar in PHP, wrap html in a php class, using ob_get_clean and ob_flush for embedding html directly in php file,
but eventually I ditch it because PHP type system isn't quite there yet at that time (PHP v7.x) and I'm using CodeIgniter as the framework back then (which uses a lot of magic, so VSCode and the language server can't fully understand the codebase anyway).
Ssssh don't talk about PHP here! Everyone on here seems to be about making web dev as ridiculously complicated and exotic-sounding as possible and PHP is not fashionable.
@@illegalsmirf It's not fashionable, I even hate it 4 years ago.
But it gets the job done, and a lot small business use it because how easy (and cheap) to deploy it.
Plus PHP now improved a lot, we could get good performance with Swoole (I mean, really good), the type system got better, Laravel + livewire + alpineJS if you need similar htmx feel, etc.
Now, on the other hand, it's seems React + NextJS is the new "ugly kid" here, because it's overly complicated.
For me, the real "cool kid" that really deserve the title is
Golang, svelte, and htmx
because it's feel so easy and simple to use, and we got great performance without overly complicated concept or rules.
I literally can learn to use Golang and Svelte in one night. It's THAT easy to use.
Would love it if you could make a video that looks at this.
I have seen your other videos and enjoyed them very much.
I would like to see specifically how you include js. For example how could you included shadcn-ui components into your app so you can pass them around as .templ components and the pass in data through arguments and update them with htmx. I think this is in your @shared.Table(args)?
I think I am missing something here with my search through docs.
I love your videos ❤
would like to see a neovim setup for this :)