Local-First `LiveView` + `Svelte` ToDo App

[nelsonic]

Saw this on Elixir Forum a while back but forgot to share! https://elixirforum.com/t/offline-enabled-apps-with-phoenix-liveview-and-livesvelte/61709 https://github.com/tonydangblog/liveview-svelte-pwa This is super impressive and might be the answer to working offline with LiveView. 💡

[nelsonic]

https://github.com/woutdp/live_svelte

[nelsonic]

https://youtu.be/PX9-lq0LL9Q

[ndrean]

One point: seems like he is rendering...SSR ?! I am not sure I understood.... On the other side, if you render a client code, then you would need to sync via the socket, but... this does not survive navigation. I already tried this, both React and solidJS. If you don't have navigation, then I believe you could have service worker for only, and need some CRDT (or something like this). Yet another thing to dig in

[nelsonic]

The OG LiveView + Svelte post: https://dev.to/debussyman/e2e-reactivity-using-svelte-with-phoenix-liveview-38mf

[ndrean]

A digression. Feel free to ask me to delete this remark as it may pollute your thread. Would you be interested with a writing on SolidJS? I already did something very similar, needs to be polished. Because SolidJS is among the most performant JS frameworks. No virtual DOM like Svelte, only 7kB. You write components with JSX, it is based on signals for reactivity (event listener that returns a function) so components only render only once. It scores very high on the Javascript frameworks benchmark (close to vanilla Javascript). You can do SSR. I believe you can go native mobile with Capacitor-Solid although I have no native mobile experience. An extract of the scores:

[nelsonic]

With all respect to the very competent people who build SolidJS, they haven’t understood what makes Svelte so simple. It’s HTML with enhancements not JSX.

How often do you add 1000 rows in an App? 🤷 Feels a bit synthetic … 💭

If our only objective is absolute speed we should forget writing JavaScript/TypeScript. 🐌 We should all be compiling Zig to WebAssembly: https://github.com/dwyl/learn-zig/issues/1#issuecomment-2241703139 🏎️

[ndrean]

Svelte is so simple. It’s HTML with enhancements not JSX.

LiveView is very JSX inspired, isn't it? And Signals might becomes part of JS, and that's all what Solid uses, nearly. The rest is vanilla, almost :) In favour of Svelte, it has Svelte-native. Is it performant (enough)?

How often do you add 1000 rows in an App?

😄 yes!... but do you have in mind usage/need for WASM?

[nelsonic]

Zero need for WASM. Just saying that if you're comparing "performance" of SolidJS and Svelte you might as well do what Figma are doing with Rust or Zig to WASM if you need to squeeze out every last drop of perf in the Browser. I don't think many people building Web Apps need that perf. Instead, we need a simple language that is easy for everyone to understand and maintain.

[ndrean]

One point: seems like he is rendering...SSR ?! I am not sure I understood.... On the other side, if you render a client code, then you would need to sync via the socket, but... this does not survive navigation. I already tried this, both React and solidJS. If you don't have navigation, then I believe you could have service worker for only, and need some CRDT (or something like this). Yet another thing to dig in

[ndrean]

This perhaps addresses my remark! Probably one day it will appear on YT.