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

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

[@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!!!

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

[@bashscript2805]

You can inject vue js for that purposes

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

[@bigtymer4862]

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

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

[@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 :)

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

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

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

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

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

[@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?

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

[@nathanaelcunningham]

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

[@raonisiann]

This is cool man. Definitely thumbs up!

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

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

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

[@troneras-tv]

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

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

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

[@theretroman3862]

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

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

[@jalbers3150]

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

[@AlbertEspinRodriguez]

Of course we need a tutorial sounds great!!

[@anthonygg_]

Alright

[@codedusting]

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

[@dave6012]

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

[@illegalsmirf]

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

[@houbill5363]

Amazing. Please share how you do it. Thanks!

[@anthonygg_]

Next video

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

[@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 ❤

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

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

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

[@aus10d]

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

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

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

[@zizouhuweidi]

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

[@jugurtha292]

when visiting your website i can still find the in login

[@fsra16]

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

[@streamer3139]

i will love to see that combo.

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

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

[@andredasilva6807]

Would love to see more go templ. Great video

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

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

[@pseabrook]

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

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

[@adicandra9940]

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

[@illegalsmirf]

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.

[@adicandra9940]

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

[@hanzofuma]

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

[@anthonygg_]

Check latest vid

[@hanzofuma]

@@anthonygg_ Definitely thanks for your effort 😁

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

[@cianmcnally4694]

You’re a great story teller

[@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!

[@hipertracker]

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

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

[@meryplays8952]

Amazing and eye-opening. Where is the code?

[@alditascheplastick8772]

I think you would love Phoenix live view and elixir

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

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

[@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?

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

[@TheFlyingMonkey200]

Would love to see the in-depth video !

[@yotubecreators47]

Amazing Anthony GG thanks!

[@mwaqze]

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

[@1vnhk]

Is there any open tech positions at Levenue? :)

[@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?

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

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

[@more-sun]

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

[@1998goodboy]

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

[@dulanjala]

this is basically PHP... there's so much more why there's react and others exists. It's all use case and usage based... use this kind of approach and then start adding all the interactive stuff, no matter what you're going to end up with cluster f*. then you will have to manage two or more different things just like before. difference is you will have to work more harder to maintain this compare to some other solution that's tailor made to support A-Z for everything you will do with it, frontend or backend or apps api.

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

[@final182]

a tutorial on Temple would be awsome, it looks great

[@800pieds]

You can minimize the rewriting of code in another language like API types and code by using a codegen on your openapi file

[@zoop2174]

I have seen this used quite a bit lately. I think a tutorial where it's specifically htmx focused would be appreciated.

[@SiCrip09]

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

[@StingSting844]

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

[@norlanperdomo4228]

This is awsome! if you can create Go + HTMX + tailwind repo just like boredstack would be out of the world!

[@anthonygg_]

I will do that!

[@saadaqnuurgeedi7777]

this stack is the way. thanks

[@KLILMLA]

Does anyone know this Vscode theme?

[@anthonygg_]

Gruvbox

[@Koppe167]

definetly interested in the setup of this :)

[@TomaszCzerminski]

Seems amazing, please make a video about it

[@anthonygg_]

Next week

[@joelwillis2043]

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

[@edzynda]

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

[@muradbu]

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

[@anthonygg_]

Vid next week

[@cooltune]

I won't be changing framework any time soon. The moment I do, I'll be jumping on/off bandwagons again for the next 4 years, basically halting my career full stop. I rather learn new things that complement my stack with new developments, such as webgl, 3d, animation (with svg) and develop plugins for visual code and such.

[@UnravelSecrets7]

Please add series fot htmx..

[@Akshatgiri]

Very interesting stuff

[@nikolaip.9944]

Gave me Vietnam flashbacks of Smarty templates in PHP.

[@dranon0o]

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

[@gabrielc3nsored20]

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

[@alaska2298]

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

[@delusion8399]

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?