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.
Thanks for your contribution to the STEMsocial community. Feel free to join us on discord to get to know the rest of us!
Please consider delegating to the @stemsocial account (85% of the curation rewards are returned).
You may also include @stemsocial as a beneficiary of the rewards of this post to get a stronger support.
Thanks
Congratulations @nftea.gallery!
You raised your level and are now a Minnow!
Check out the last post from @hivebuzz:
Support the HiveBuzz project. Vote for our proposal!
huzzah! :D
Congratulations on becoming a Minnow @nftea.gallery 🎉🎉🎉
Congratulations @nftea.gallery! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s):
Your next target is to reach 1500 upvotes.
You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word
STOPCheck out the last post from @hivebuzz:
Support the HiveBuzz project. Vote for our proposal!
The rewards earned on this comment will go directly to the people sharing the post on Reddit as long as they are registered with @poshtoken. Sign up at https://hiveposh.com. Otherwise, rewards go to the author of the blog post.