Web Workers & WebAssembly
Running CPU-intensive compiled binaries in browser background threads — keeping the UI responsive while executing near-native computation.
1 / The Performance Problem
Running a chess engine — hundreds of millions of position evaluations per second — on the browser's main thread would freeze the React UI completely. CheckMate needed to execute Stockfish 16, a C++ engine compiled into WebAssembly, without blocking user interaction. Web Workers provided the solution: background threads that execute independently of the main thread's rendering loop.
2 / Worker Architecture
The implementation used a dedicated Web Worker that loaded the Stockfish WASM module and communicated with the main React thread through message posting. UCI (Universal Chess Interface) commands were sent from the main thread to the worker, and evaluation results — centipawn scores, best move lines, depth information — were posted back as structured messages.
The communication boundary between the main thread and the worker required clean serialization — complex objects cannot be transferred directly. The worker's message handler parsed UCI protocol output into structured TypeScript objects before posting results to the main thread.
3 / SharedArrayBuffer
SharedArrayBuffer enabled low-overhead memory sharing between the worker and the WASM module. However, it required specific server security headers — Cross-Origin-Opener-Policy (COOP) and Cross-Origin-Embedder-Policy (COEP) — that affected the deployment configuration. Without these headers, SharedArrayBuffer is disabled for security reasons related to Spectre-class timing attacks.
4 / Lessons
Web Workers prevent main thread UI jank during deep calculation loops. But the message-posting communication model adds complexity compared to direct function calls. I would encapsulate the worker communication behind a clean Promise-based async API wrapper in future projects — giving React components a simple `evaluate(fen)` interface that hides the underlying worker message lifecycle.