What is being developed?
In a previous Hive blog post I asked the public what their preferred tech stack would be for an updated Bitshares reference wallet UI.
This software is used for the Bitshares web wallet and the light client, however it's not used in the various python tools nor mobile apps.
The proposed upate is to implement several years of web-tech advancements, yielding significant performance and SEO improvements.
Why SolidJS?
I chose SolidJS for the following reasons
- It uses JSX which keeps the code very similar to the current Bitshares-ui component code
- It has a significantly smaller bundle size than React, leading to faster load times.
- SolidJS cuts out unnecessary boilerplate code which React insists on. Improving the DX for maintainers.
- It supports SEO through the solid starter toolkit - imagine the first google result for "trade BTS for USDT" be Bitshares, not CEX? Powerful!
How?
So what's the plan? It's potentially a significant amount of work!
1. Inherit code which doesn't need to change
A good chunk of code relating to the bitsharesjs and bitsharesjs-ws libraries don't need to change and can be inherited without significant effort.
2. Swap alt for a new store/action solution
The store/action library titled 'alt.js' was long ago abandoned by its developer; so it's time to replace it.
The actions and stores folders contain the affected code; it's likely we can harvest the contents of the actions and include them in updated solidjs stores, hopefully without needing an external library, further improving the maintainability of the project in the long run.
This is a fairly substantial change to the organization of stores/actions/reducers in the bitshares-ui, however it'll be well worth ridding ourselves of poorly maintained packages.
3. Porting the 400+ components
This is where the majority of the work lies.
400+ components to uplift; thankfully given they're remaining as JSX components we can easily extract the functions and general layout into new SolidJS components.
A big benefit of doing this is that it'll remove a significant amount of React v16 component boiler-plate, resulting in much leaner components.
If there are Bitshares community members who are more interested in say Next.JS for a Bitshares-ui implementation, then porting this uplifted code to Next will be faster than uplifting the current React 16 components, so it's not solely for the benefit of SolidJS implementation that we cut the fat from the components.
Given that we're replacing Ant Design with alternative component design libraries, there will be significant UX code replacement, ideally with the hope of keeping things looking/acting as similar to the current wallet as possible.
It'll be the case however that the initial implementation will look very basic until we have talented UX/UI designers to tackle the CSS implementation task.
Further we will need to replace the charting library currently in use, if anyone has a preferred MIT licensed charting library which is compatible with SolidJS then comment below!
4. Improve documentation
I'll do a pass through the codebase, inserting missing documentation for functions to improve maintainability.
5. Testing & verification
Make sure all the replaced parts operate as expected, manually functional test all changes.
Will try to replace current tests with vitest tests; further verifying the stability of the uplifted client code.
6. Deployment documentation
Given that this tech stack will be able to run on the edge, there will be no need to run a dedicated VPS, nor any need to maintain ubuntu or environmental packages.
Web wallet operators will be able to run their wallet in a simplified cloud environment which will utilize the latest evergreen tech to run the uplifted code. I believe this will significantly ease access and reduce costs/complexity associated with running a web wallet.
If I had to pick an edge provider, I'd probably go with Cloudflare where you could deploy the web wallet to many locations around the world without duplicating underlying compute environments at reduced cost.
I look forwards to the much faster client running on much faster systems; the future of Bitshares is looking great! Don't miss out!
How can I help?
Developers:
- Start learning SolidJS & ViTest.
- Check out the new repo: https://github.com/BTS-CM/bitshares-solid-ui
Designers: Consider how to replicate the UI in figma using mdash & shoelace style web components
Others: Your encouragement and comments will suffice :)
Thanks for reading this blog post, more to come as developments further!
Brought to you by the Bitshares committee & the NFTEA Gallery