Bitshares Astro DEX UI Developer showcase - Optimizations and preparation for Suez!

in BitShares6 months ago (edited)

Welcome back to the Astro UI Dev update blog!

This blog aims to continue updating you with regards to the development of the Bitshares Astro UI; a DEX UI which aims to be the most performant BTS DEX UI possible!

So what's new in today's dev blog post?

I recently blogged about the recent Bitshares collateral debt position form developments, in said blog post the initial performance results were somewhat lackluster:


Now, I know I said that I wouldn't prematurely optimize this page because I could be doing other productive things, so I quickly:

Now, I'd tried to use Elysia Compression, and until now I had not been able to get it working properly, but now I have... lo and behold..



A huge improvement; a completely different story when it comes to cumulative layout shift, at both zoom levels tested.

When at normal level of zoom, the performance is now 100%


Let's remind ourselves of the current reference wallet performances..

Firstly, the spotlight margin collateral position page:


Secondly, the user portfolio margin position table:


Now let's put it in some tables for easier comparison!
PagePerformanceAccessibilityBest practicesSEO
Astro @ 25%91 (207-212%)83 (109-113%)92 (122%)80 (114%)
Astro @ 100%100 (233-243%)83 (109-114%)92 (122%)80 (114%)
Spotlight @ 25%44767570
Spotlight @ 100%43767570
Portfolio @ 25%43737570
Portfolio @ 100%41737570

A significant improvement over the reference wallet, and the previous dev blog post.

Astro @ 25%0.5s (-1.6s to -1.7s)1.9s (-5.3s to -5.7s)0ms (-360ms to -370ms)0.0170.8s (-2.6s to -3.9s)
Astro @ 100%0.5s (-1.6s to -1.7s)0.5s (-6.6s to -7.4s)0ms (-360ms to -380ms)00.8s (-3s to -3.6s)
Spotlight @ 25%2.1s7.6s370ms03.4s
Spotlight @ 100%2.2s7.9s360ms0.0013.8s
Portfolio @ 25%2.2s7.2s360ms0.0044.7s
Portfolio @ 100%2.1s7.1s380ms0.0684.4s

So, you can see that simply improving the CLS value we have significantly improved the final performance score.

With the performance issues resolved, I'll be moving onto the following development tasks:

  • Global settlement fund bidding
  • Individual settlement fund bidding
  • Pool staking form
  • Credit offer creation form
  • Blocked user indication
  • i18n localization using nanostores i18n package

The development of the Bitshares DEX UI using Astro, React, ElysiaJS, ShadCN and BunJS continues to prove to be highly worthwhile!

Thanks for reading this far, I hope you enjoyed this development blog post!

Interested in checking out the code?

Don't forget to click the ⭐ button to like the github repos above!

These developments were brought to you by the NFTEA Gallery.
Consider collecting an NFTEA NFT to support continued Bitshares developments.

Don't have a Bitshares account? Make one today!


Congratulations! You received a personal badge!

Happy Hive Birthday! You are on the Hive blockchain for 2 years!

You can view your badges on your board and compare yourself to others in the Ranking

Check out our last posts:

LEO Power Up Day - November 15, 2023

Thanks :)

You're welcome, it's well deserved! Congrats on your constant involvement on Hive 😊👍