Future-proofing: framework and bundler choice

[fgblomqvist]

Currently, the website uses choojs as its SSR SPA framework. It's quite simple and performant, and is easy to get going with. However, it is essentially unmaintained since a few years back. That in itself does not have to be an issue, but it makes it less ideal in case a bug were to show up, or in case a browser API were to change.

The larger part of the issue is that choojs is a very small framework popularity-wise, which means the ecosystem around it is also very small. Currently, the website uses jalla as its choojs server and bundler, and afaik, there is simply no other good choice out there if you're using choojs. jalla is, just like choojs, also simple and easy to get going with. Though, it is indeed very simple. It also relies on fairly dated tools. One example is browserify, which is used for transpilation and bundling. That tool does not, and probably never will, support modern tech such as ESM.

My argument is essentially that if resonate wants to stay future-proof and attract contributors, it should be in its interest to switch to a different framework and bundler in the medium term at least. In my experience, open-source volunteers like to work on cool new stuff, things they might not get the chance to use in their everyday work, or perhaps simply things that are pleasant to work with and modern. Furthermore, it is always nice when there is good community support for the framework/bundler that are chosen, in case problems arise.

Any thoughts on this? The other options out there are certainly aplenty, and most if not all can probably be switched to in an incremental fashion which is hugely beneficial. Some popular choices are obviously React/Vue/Angular. However, there are also more newcomers like Svelte, that might fit resonate a bit better. Would be interested in discussing further, just figured I'd post this to get a discussion started at least 🙂

[fgblomqvist]

I'll keep documenting any issues I come across in this thread:

• sheetify, which is the CSS bundler that's used with browserify, does not support the latest ES syntaxes correctly (see e.g. Object Rest/Spread Properties jquery/esprima#1588, it's a subdep), and most likely never will

[auggod]

I think jalla does not support sheetify anyway. The sheetify configuration in beta/package.json can be removed. We did use sheetify with bankai.

[fgblomqvist]

Hmm okay, sounds good. Just gotta properly investigate whether it's actually used or not first, because it feels like it's still used (since I hit the above error) 🤔

[auggod]

I like Lit
https://lit.dev/

[fgblomqvist]

Yes this could be a good option as well

[auggod]

I'm especially interested in this one because the templating system (lit-html) is similar to choo/html + nanomorph.
https://lit.dev/docs/v1/lit-html/introduction/

I also feel like porting some components would be easy. I just didn't have time yet to look deeper into it.

I know this project because of https://github.com/beakerbrowser/beaker

I also have some prior experience with Polymer.

[fgblomqvist]

The only thing I'd be wary about is their SSR support/setup. Not sure what that would look like.

[auggod]

As for the bundler, if we use jalla we are stuck with browserify. I just like that jalla is using koajs and has built in data prefetching.

With our new website (gohugo), we're using hugo pipes with babel and esbuild.

See: https://github.com/resonatecoop/website/blob/develop/src/layouts/partials/head.html

choo/html is picked up by babel.
See babel config: https://github.com/resonatecoop/website/blob/develop/src/babel.config.js

I'd like to have a similar setup for our id server frontend as gulp is such a drag.

[fgblomqvist]

jalla and choo are both cool and all, but I think they're just too simple and/or old to be useful long-term. You can achieve SSR with frameworks like Svelte as well of course.