Skip to content

Latest commit

 

History

History
95 lines (54 loc) · 3.76 KB

File metadata and controls

95 lines (54 loc) · 3.76 KB

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 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 memory usage

Absolutely stable

Firefox Profiler Firefox profiler

Very lightweight on the CPU

React Profiler 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:

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