Why We Switched From Svelte Kit To Golang + HTMX

[@anthonygg_]

► 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

[@0zema]

I would love a Go-HTMX-Templ video, that combination sounds so good

[@sealoftime]

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

[@rekram1519]

highly agree

[@YEET-oc1yk]

looking forward to it!

[@abdorootuae]

me too

[@kristun216]

same, i'm considering redoing my invoice generator app in this stack

[@uzair558]

That sounds very promising, I'd love a detailed follow-up for HTMX x Golang tuts more in Anthdm style!

[@anthonygg_]

Next vid

[@meryplays8952]

@@anthonygg_ Yay!!!

[@reikooters]

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.

[@Jeff-co.]

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.

[@IvanArsenev-x3w]

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.

[@jaymason7097]

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.

[@dyto2287]

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.

[@BosonCollider]

The standard solution for that in Elixir/Phoenix land is to use Alpine for that

[@kp8752]

Svelte without sveltekit is the perfect tool for this

[@victormendoza3295]

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

[@OzzyTheGiant]

npm install nanostores But I still like my Svelte for complex projects.

[@brigadafitness5833]

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.

[@anthonygg_]

Yw

[@bigtymer4862]

Love the HTMX Go stack!!! Some HTMX tutorials would be awesome.

[@pldcanfly]

I recently dabbled into templ and instantly knew that this + htmx is just going to be awesome. Great to hear that a veteran agrees :)

[@theodoreivanov6257]

Totally new to Go but your sheer enthusiasm persuaded me to give this stack a try.

[@davidhinojosa3680]

Very nice! A video on how you guys set templ up would be awesome.

[@0x6664]

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

[@peteredmonds1712]

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

[@illegalsmirf]

How long until you switch to the Next New Thing? I give it 18 months max.

[@bionic_batman]

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

[@houbill5363]

Amazing. Please share how you do it. Thanks!

[@anthonygg_]

Next video

[@raonisiann]

This is cool man. Definitely thumbs up!

[@user_v12]

I want to see you make a follow up video with a tutorial on how to set that up.

[@anthonygg_]

Jup next vid 😎

[@Madmaniac639]

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

[@TheMustafa1313]

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

[@jugurtha292]

when visiting your website i can still find the in login

[@jalbers3150]

Would be interested to see how/where you deploy a setup like this.

[@dyto2287]

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.

[@nathanaelcunningham]

I would love to see an in depth with templ and htmx

[@troneras-tv]

I would definitely want to see a more deep dive into this! Sounds great 👍

[@sledgex9]

"we have sveltekit in the frontend, golang in the backend" -> uhm isn't sveltekit a backend too? Or did you mean svelte?

[@nilkonom]

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

[@codedusting]

Yes. We want the in-depth video on this. I would love that.

[@LippittDesigns]

Amazing ! Would love to see an in depth video

[@anthonygg_]

Next vid

[@yaminokaze4475]

yes please we need a video how to setup something like this!

[@anthonygg_]

Next video

[@bunajim413]

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.

[@theretroman3862]

Totally! I would like to see ASAP a tutorial end to end on using TEMPL + GO and Wails if possible. Much appreciated!

[@bozidarbralic1937]

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.

[@illegalsmirf]

I didn't understand a word of what you said. What are you producing? Web pages or what?

[@AlbertEspinRodriguez]

Of course we need a tutorial sounds great!!

[@anthonygg_]

Alright

[@GabrielPozo]

I never used it, but "templ" looks like so an interesting package. Thanks for sharing!!!

[@anthonygg_]

Your welcome

[@stefandorresteijn3489]

I'd love an in-depth video on this stack, it seems really beautiful.

[@anthonygg_]

Latest vid

[@patricknelson]

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.

[@adicandra9940]

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)?

[@patricknelson]

@@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 .

[@patricknelson]

@@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. 😎

[@dovh49]

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.

[@earthling_parth]

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 ❤

[@meryplays8952]

Amazing and eye-opening. Where is the code?

[@markojerkic7724]

what about your tailwind bundeling? Are you just importing the whole Taliiwnd script from a CDN or do you have a custom bundle script?

[@anthonygg_]

esbuild

[@streamer3139]

i will love to see that combo.

[@pickavana8056]

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.

[@haskafikri254]

try htmx but still stuck with many simple require js action event. example: clickoutside when closing search suggestion

[@anthonygg_]

You still need sprinkles of js. But not 4034 npm modules

[@fsra16]

Looks really promising. I’ll for sure try this out on my next project

[@dave6012]

I said to myself, “that’s just react code,” and then you said, “it’s just like react code” lol heckin brilliant

[@aus10d]

Great video. Would love more video tutorials about go and templ and HTMX

[@zizouhuweidi]

an in-depth vid for templ, htmx and tailwind would be very much appreciated

[@paperclip11]

Where you ever able to get Javascript JSDoc Typing to correctly highlight in VS COde in a .templ file? I don't need type compilation safety for JS (though I do like it), but I definitely want type hints and error highlighting during dev time. Would love to inline some JS in a .templ file and get some of that juicy type hinting.

[@hanzofuma]

I'm interested in why you chose Echo as a web framework?

[@anthonygg_]

Check latest vid

[@hanzofuma]

@@anthonygg_ Definitely thanks for your effort 😁

[@edzynda]

I tried Templ but got annoyed at how long it took to recompile when doing a hot reload...

[@capcadoi]

"It means you can write GO in your HTML" - LOL that's just php with extra steps. We have come full circle. People are getting tired of the over-engineered frontends and tooling and are falling back to what was used on the web 20 years ago. Back then it was standard, then all the script kiddies came in and said it was bad practice, so they came up with frontend frameworks. And yes, they are nice and yes, they are very useful for app-like interactions but boy are they over-engineered.

[@andredasilva6807]

Would love to see more go templ. Great video

[@UnravelSecrets7]

Please add series fot htmx..

[@yotubecreators47]

Amazing Anthony GG thanks!

[@TheFlyingMonkey200]

Would love to see the in-depth video !

[@FloKorp86]

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...

[@illiay.7963]

I like how people get excited about the coding approach that I've been using 13 years ago coding on PHP

[@SnegMy]

it's the circle haha we ended where we started, just backend language and template around it lol

[@pseabrook]

Have heard the whispers of templ for a little while now. Will definitely try an implementation with this in my golang stack.

[@tmanley1985]

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. :)

[@cianmcnally4694]

You’re a great story teller

[@klirmio21]

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

[@1vnhk]

Is there any open tech positions at Levenue? :)

[@SiCrip09]

I knew this is coming since I heard about htmx, next will be a GO framework with htmx 🔥

[@ehrm...]

I'd be interested in a follow up thanks

[@final182]

a tutorial on Temple would be awsome, it looks great

[@binaryfire]

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.

[@KrisAlcordo]

I found alpine to be the best for small reactivity

[@hipertracker]

For simple frontend it make sense but when the frontend is more sophisticated I doubt htmx would be able to replace it.

[@alditascheplastick8772]

I think you would love Phoenix live view and elixir

[@moriz111]

Why the “golang” rush? You need to squeeze performance? You have very big team and onboarding is critical?

[@anthonygg_]

npm is hard for us to pass trough security audits

[@KLILMLA]

Does anyone know this Vscode theme?

[@anthonygg_]

Gruvbox

[@more-sun]

Hey man do you mind also showing how you leverage Web components for som interactivity?

[@paulneal9908]

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!

[@anthonygg_]

Vid next week

[@Septumsempra8818]

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.

[@ncpeaksean4278]

I want to know the same...

[@robuandrei5969]

Yea, also encountered this issue when doing a chat app and handling updates with htmx and just used a small script on each afterSwap event to scroll to where I wanted it to be

[@Alex-hr2df]

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.

[@mti2fw]

Why Echo? I'm curious about it 🤔

[@hedgehogform]

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.

[@hedgehogform]

I guess it also could be a fun challenge to do something similar to a frontend framework. 😊

[@gabrielc3nsored20]

Yea, I would like to know why you use Echo framework

[@rossvold]

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?

[@pixtweaks393]

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!

[@kushagragupta3734]

when you will be continuing that distributed Content Addressable Storage project....

[@anthonygg_]

I release the next 2 over the weekend

[@TomaszCzerminski]

Seems amazing, please make a video about it

[@anthonygg_]

Next week

[@Adanjakub]

Why dont just autogenerate svelte's types from openapi ?

[@LoneIgadzra]

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.

[@muradbu]

I'm interested in why you're echo as opposed to other Go web frameworks

[@anthonygg_]

Vid next week

[@devoverlord]

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?

[@anthonygg_]

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

[@1998goodboy]

I’ve actually talked to the guy that made templ, he actually started the project that employed me

[@pr0master]

Isn't everything server side rendered?

[@andredasilva6807]

And why did you switch from fiber to echo?

[@caderosche]

I tried to setup templ and couldn't figure it out, so a tut for it would be great!

[@anthonygg_]

Next vid ❤️

[@StingSting844]

Pretty good combo. What was the reduction in code percentage? time for conversion?

[@IamI16]

But templ is not version 1 yet so it may be not stable, right?

[@kenga8972]

Thanks for sharing this! It reminds me of PHP with Laravel. Looks like lots of frameworks and libraries these days are becoming like PHP.

[@yunyang6267]

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?

[@mwaqze]

Hello there, thank yo so much for this video. Please create a whole course on Golang+HTMX.

[@nikolaip.9944]

Gave me Vietnam flashbacks of Smarty templates in PHP.

[@joelwillis2043]

Sick they added a feature that has existed in other languages for 30 years!!!

[@amiranbari5268]

That sounds Great!!

[@saadaqnuurgeedi7777]

this stack is the way. thanks

[@themcbrooms]

What VSCode theme is this?

[@Koppe167]

definetly interested in the setup of this :)