From Svelte to Go and HTMX

Recorded live on twitch, GET IN

MY MAIN YT CHANNEL: Has well edited engineering videos

Discord

Hey I am sponsored by Turso, an edge database. I think they are pretty neet. Give them a try for free and if you want you can get a decent amount off (the free tier is the best (better than planetscale or any other))

[JkyLi]

I did the same for the previous few months. I used to have a Go backend server and a svelte frontend, I use the static svelte generator to generate static files and directly serve them as static files using caddy. Now, I only have a Go backend which spits out HTMX. It takes way less effort than I imagine. However, the performance of my tiny internal tool that only be used by a dozen of people is the same. The maintenance time does go down though.

[_MoKhaled]

Can't imagine my two favorite tech youtubers on one video together, this is legendary

[MrMustachehead]

Love that chat about type security. Anything without static code analysis warning/errors is so much harder to refactor in the future because it takes so long to hopefully find all the dependencies. And you can never be sure you have found them all

[console.logged]

It’s nice seeing The Rock get into HTMX

[ryanleemartin]

Svelte kit is now the recommended choice even if it’s going to be full SPA .. basically for the built in routing

[dejangegic]

This is the colab we need. Anthony and prime talking Go let's do it

[vinnythelegend]

I built an entire app with golang and HTMX, without even realizing TEMPL existed! I used the built in text/template for Go and I didn't actually hate it.

[chefaku]

4:58 yes i am a lazy backend developer, I want the answers to my problems to be easy and simple
"idiots admires complexity"

[Qrzychu]

I don't want to be THAT guy.... but the hated C# had this for decades :D type-safe, async data fetching from within the template, streaming rendering etc, hot reload in templates (now also in code). Just saying :) btw, now it's even better with with Blazor server rendering

[MrTallAndy]

"How many config files do you have in your frontend app?"

"Yes"

[ignrey]

4:47 I 100% agree with what he's saying trying to build a solid piece of software with react and some backend languages could be a nightmare in terms of security, integration and stuff.

[ygunayer]

Can't help but realize how we're coming back full circle to the modular monolith and I quite welcome it. I'm leaning towards the Elixir/LiveView side of the fence, but I wonder: what is the breaking point? Is it the over-complication of the JS/TS ecosystem? Is it because the cognitive load for writing and maintaining SPAs is going off the roof? Is it because SPA frameworks and libraries are getting so bloated that it defeats the purpose? Is it because each of those frameworks and libraries lock you in (I'm looking at you, React "library")? Or is it simply because the SPA model was never the right one?

My take on it is that the only thing we've ever needed was the ability to hook up a certain HTML element with an isolated state and logic, and the JS+HTML model never provided that out of the box, whereas with traditional AJAX+SSR it's quite easy to implement. The latter traditionally suffered from scoping issues with global JS for interaction, and most importantly global CSS for styling, and it looks like HTMX and the PHP model of rendering within the language bounds fix the former issue, and Tailwind just obliterates the latter.

[nomadshiba]

16:20 his issue was he mixes sveltekit (a full stack framework) with "go", either choose sveltekit or "go" with something else.
sveltekit has use:enhance, he didn't need to proxy anything, all he had to do was using <form>(s) with `use:enhance` and combine it with the `form` html attribute, and do everything with form actions, without any proxy, he doesnt have to manage any state, doesnt have to build a proxy, its just boosting.

something like this

+page.server.ts

const count = kv.value(0);

export const load = (async (event) => {
return {
count: await count.get()
};
}) satisfies PageServerLoad;

type zSetCount = z.infer<typeof zSetCount>;
const zSetCount = object({
value:
});

export const actions = {
async setCount(event) {
const form = await parseFormData(await event.request.formData(), zSetCount);
const response = { setCount: form };
if (!form.valid) fail(response);

await count.set(form.data.value);

return response;
}
} satisfies Actions;



+page.svelte


<script lang="ts">
export let data: PageData;
export let form: ActionData;

$: count = form?.setCount.data.count ?? data.count ?? 0;

const setCountFormId = uniqueId();
</script>

<form
hidden
id={setCount}
action="?/setCount"
method="post"
use:enhance
/>

<button type="submit" form={setCount} name="value" value={count + 1}>
+
</button>
{count}
<button type="submit" form={setCount} name="value" value={count - 1}>
-
</button>

<ActionError form={form?.setCount} />




OR if you like more reuseable actions




<script lang="ts">
export let data: PageData;
export let form: ActionData;

$: count = form?.setCount.data.count ?? data.count ?? 0;

const countUp = uniqueId();
const countDown = uniqueId();
</script>

<form hidden id={countUp} action="?/setCount" method="post" use:enhance>
<input type="hidden" name="value" value={count + 1} />
</form>

<form hidden id={countDown} action="?/setCount" method="post" use:enhance>
<input type="hidden" name="value" value={count - 1} />
</form>

<button type="submit" form={countUp}> + </button>
{count}
<button type="submit" form={countDown}> - </button>

<ActionError form={form?.setCount} />

and all works even when you disable js on the browser.

[baz_sh]

Prime has been so good for the developer community at large. I hate to think of a world without him.

[MickDavies]

So it's Laravel + Livewire? The modular monolith lives to fight another day son! I like to think that a PHP dev whose comfortable with Laravel could step up their skillset to Go in this type of capacity relatively easily and gain some new skills in typed languages but without a completely jarring learning experience. Go is the PHP developers secret best friend, they just don't know it yet 😅

[mahaka]

HTMX it's been a breath of fresh air.
For it to take off and become a trend, it just needs to be adopted by a large company. That would create a cycle of interest around the lib, open up job vacancies and spark more interest from the community.

[humanbeeng-programming-tppq]

It finally happened. Anthony on Prime’s channel🎉

[arnontzori]

Prime hates C#. Prime loves every single C# feature other languages adopt

Go figure

[jalalle]

The title is a bit misleading, they didn't move from sveltekit to hmtx+go, but rather from sveltekit+go which makes total sense considering they wanted to focus on one language

[mrbit]

this reminds me of server-side scripting, seems like tech took a detour. perhaps out of boredom or to solve a problem only to create many more. going back to the late 90's and early 2000s, i created many beautiful web applications without the need for React, Angular and etc... just good old JavaScript and ajax and sprinkles of direct server-side script, I still scratch my head as to how we arrived where we are now.