This is an awesome cryptocurrency orderbook built with NextJS, Tailwind and Redux Sagas!
Here is a list of relevant changes for performance 🚀
Configure babel to transpile to newest browsers
The default target for NextJS builds is ES5.
We build for new browsers in order to use built-in generators.
Use browser's dir property to avoid layout shift
We need to change the order of text in screen, CSS text-align seems to trigger layout.
Then dir property was adopted to avoid that.
Notice that this could have been flex-direction too.
Dinamically batch redux dispatch using redux-saga based on client performance
We use browser's performance API to calculate the time used to dispatch and re-render the interface.
Based on that number we decide for how long we should delay the next dispatch.
This makes the main thread free for other computings in the interface.
Apply socket patches into a sorted array in-place to avoid sorting
We avoid sorting using the native quick-sort solution and implement an optimized sorting algorithm
for sorted list of tuples. It sorts in the same run as it inserts, removes and updates the tuples.
Replace extensive use of CSS variables and opacity by values
In production builds we use a postcss plugin that converts tailwindcss css variables into values in
order to improve the compute layout process of browsers. We also avoid using opacity for background colors,
so this plugin can safely convert them.