cpatti97100/react-crypto-orderbook-using-websocket-webworker-and-sharedworker

React crypto orderbook using websocket, webworker and sharedworker

Good day and thank you for checking out my crypto orderbook :)

Live link (Firefox only): https://react-crypto-orderbook-using-websocket-webworker-an-cpatti97100.vercel.app/

Get Firefox: https://www.mozilla.org/en-US/firefox/new/

Screenshot

Here are few important notes:

This repository is a fork of https://github.com/glook/webpack-typescript-react (base react + webpack 5 boilerplate, see below)

This code is not for production use and only runs on Firefox due to SharedWorker and WebWorker specific features browser support.

I honestly just had so much fun playing with those that I could not resist going all in :)

For a real world application I would rely on a different setup, although less optimal probably.

Features

• It shares one WebSocket connection with multiple component instances and/or tabs. No matter how many, there will always be only one connection.
• It uses at most 2 WebWorkers, one for every currently displayed product.
• Component updates are throttled no matter the message frequency from the WebSocket
• Fully responsive

Performance

Memory usage in time

Absolutely stable

Firefox Profiler

Very lightweight on the CPU

React Profiler

dev build rendering times

Improvements

• Tests
• SharedWorker is currently not supported in safari, but it is again under consideration (https://bugs.webkit.org/show_bug.cgi?id=149850)
• SharedWorker cannot spin up WebWorker in Chrome
• I used HTML tables and SVG as they are accessible and in theory the right tool for the job.
• Naming of CSS classes and variables in general
• ...many more, software is a never ending journey :D

Next ideas

• I am very familiar with RxJS, and it would have probably be a nice fit here

Webpack 5 boilerplate

Webpack 5 boilerplate with support of most common loaders and modules:

• babel

• typescript (using ForkTsCheckerWebpack )

• sass, less, css modules with automatic typescript declaration

• with react support (also with react-refresh)

• esLint

• prettier (with import sorting using prettier-plugin-import-sort, import-sort-style-module-and-prefix)

• webpack dev server (proxy support is also available)

• importing svg as react components using @svgr/webpack

• postcss loader (with autoprefixer and cssnano)

• husky prehooks and lint-staged

Quick start

To run this locally:

1. run git clone https://github.com/glook/webpack-typescript-react.git sample-project

2. Install all dependencies using yarn or npm install

3. Start the development server using yarn start or npm run start

4. Open up http://localhost:8080