Some frontend stuff

[ndrean]

I spent the last 2 weeks using SolidJS and VanJS. It is very nice to use a framework that does not use a VDOM. Makes everything easy. There are numerous frontend frameworks, but these 2 are interesting I believe (again no VDOM) for small to medium size projects. As for the performance, I don't know. SolidJS is not so new whilst VanJS is, but very impressive: the build size is small. I also use Universal-Router (2k) as the bundle size of React-Router is huge. For the store manager, I also use Zustand (1k). All together this reduces significantly the bundle size.

With Phoenix Liveview, you don't control the DOM but you can use hooks to inject JS stuff. I will try to combine both in an app.

An example with VanJS: https://github.com/ndrean/vanjs-dialog-modal. This takes 3-4 days, learning and doing, quite easy and.. no VDOM!

An example with SolidJS: https://github.com/ndrean/Solid-components. It is also quite easy to use, and again no VDOM.

[nelsonic]

@ndrean had you previously looked at Alpine.js? 💭 https://github.com/dwyl/learn-alpine.js 🗻

As you say there are way too many JS frameworks for anyone to know them all. 🙃
Our main issue with selecting a frontend library/framework was interop with LiveView ... 💭
Our preference would be https://svelte.dev #84 but it was not easy to integrate with LiveView ... 😞

[ndrean]

Yes, but AlpineJS is 14k and uses ugly tricks. To forget. VanJS is 1k and uses 4 words. SolidJS is 8k, quite easy, createSignal, createEffect sometimes, quite React-like but no VDOM. The problem I have with Liveview is that you don't control the DOM, anything is overwritten by Liveview which I don't like and make things super complicated as soon as you have a dynamic view (think of adding inputs on-the-fly...). Furthermore, it is very costly to run since it is SSR so you will need to power up your server with the traffic, not talking of how you run on mobile. The big thing with SSR is safety, I 100% agree. But all these are old and well-known tech choices.

I will have a look at Svelte, thks. Mobil friendly?

[nelsonic]

Svelte is a very elegant and mature frontend library IMO one of the best. 😍
Agree with you regarding LiveView wanting to "own" the DOM... 🙄
It's the price we pay for the level of simplicity from dev perspective. 💭
SSR works well for low power (Mobile) devices. 🚀

VanJS is very recent. Reading the code: https://github.com/vanjs-org/van 👀
Looks familiar ... https://github.com/dwyl/javascript-todo-list-tutorial/blob/main/lib/elmish.js 😉
But without the documentation (comments) https://github.com/vanjs-org/van/blob/main/src/van.js 🤷‍♂️
And not very rigorously tested ... https://github.com/vanjs-org/van/blob/8358dfb4ca92e96cda63a2f1933b352084452c1e/package.json#L8
Definitely not production-ready - at the time of reading. 😕
Chasing small package size at the expense of robustness is not the trade-off I would pursue. (but that's just me ...)

~14kb is an acceptable size for a library even on a 2G connection (48 kB/s) this would load in ~1 second; slow for sure, but not catastrophic. Almost any image on the page will take an order of magnitude longer to load. Compared with a Flutter App ... ⏳ 🙊

[ndrean]

Yes, VanJS is not ready, just wanted to test. Furthermore, it is not performant on DOM diffs.... too young but I wanted to test it. I really recommend SolidJS; once you test it, you feel you need to ditch React, honestly. You can reference a DOM elt, just by its name. Far easier than the React rubbish IMO. For Flutter, do you there is a serious gain on mobile?

[nelsonic]

Agreed on SolidJS, makes React seem like a relic.
https://www.youtube.com/watch?v=hw3Bx5vxKl0
Flutter is purely for building Native Apps and then there's a "Free" PWA.
Don't look at the JS code it produces; definitely not friendly. 💭