Recently I created a bitshares-ui repo issue regarding uplifting the packages and compute environment, including most disruptively react from ~v16 to v18+; a gargantuan task with a potential estimate of thousands of dev hours to complete.
Several developers expressed abject horror at the prospect of uplifting the web wallet in place, indicating a preference to start from scratch & using the existing UI as reference.
The question thus becomes - if we're going to spend several thousand hours of development on the reference bitshares-ui wallet, should we continue using React and Ant Design, or should we look to newer/alternative technologies?
Some of our options:
- Nuxt 3
- Uses Vue3 - same framework as used in the Beet multiwallet
- Good for SEO
- NextJS
- ReactJS but with SSR & SEO
- ReactJS (v18+)
- Most similar to current code albeit with significant breaking changes to deal with
- Could lead to support of mobile devices through a react-native fork
- Poor SEO
- Sveltekit
- Faster than react/vue
- Smallest bundle
- Good SEO
- Fewer IRL svelte(kit) job advertisements
- SolidJS
- Faster than above frameworks
- Second smallest bundle
- More react-like than svelte; uses JSX.
- Good SEO
- Can use Solid Start to improve SSR
- Fewest IRL job advertisements
From the above benchmarks comparing our options, we can observe (best to worst per category)
- Speed: SolidJS, Vue3, Svelte then React. SolidJS is approx 76% faster than React.
- Startup time: Svelte, SolidJS, Vue3, ReactJS. Svelte and SolidJS are an even match, and React is again far behind the pack.
- Memory usage: SolidJS, Svelte, Vue, React. Note React uses approx 260% more memory than SolidJS.
Personally I like the look of SolidJS, despite it being relatively young and their community is still growing unlike the old and huge frameworks which have fallen behind in the benchmarks.
If we do go ahead with a non-ReactJS solution and need to replace Ant Design with something else, I have found the following interesting resources which I believe can help further optimize the reference wallet UI:
- Shoelace.style : npmjs
- m- : npmjs
- Fast components : npmjs
- See also: web components
By utilising the above web components we can further reduce the bundle size, improve performance and separate UI & styling from the underlying framework.
The above web components combined with the newer tech stack I think we could plausibly recreate the reference UI faster than fully uplifting the current UI in place to the latest React.
I'd love to hear what tech stack you think we should use in the future!
I hope to be a part of the team to fully realize this next gen Bitshares reference UI; so too can you become a contributor by joining in development on github once the next gen repo is created.