Workers — Démonstrateur de multithreading JS/TS

Un calcul lourd en JavaScript n'a plus aucune raison de figer l'interface utilisateur.

🎯 Le Problème & La Solution

Dans un navigateur, le main thread gère à la fois le rendu UI et l'exécution du code JS. Lancer un calcul algorithmique gourmand — comme la recherche des nombres narcissiques sur une plage élevée — bloque la boucle d'événements (event loop) et crée un gel de l'application.

Workers est une application interactive permettant de visualiser et mesurer l'impact concret de la parallélisation en JavaScript grâce aux Web Workers. Elle permet d'ajuster dynamiquement la plage de calcul ainsi que le nombre de threads alloués, afin de comparer les temps d'exécution et d'observer la répartition de la charge.

🛠️ Sous le Capot

Le projet privilégie des choix d'architecture simples et légers pour maximiser la lisibilité du code et mesurer les performances sans surcouche logicielle :

• Frontend & UI : React avec Vite et TypeScript pour une base de code typée et un build rapide. Interfaces basées sur Tailwind CSS / shadcn/ui.
• Threading Native : Implémentation Vanilla des Web Workers sans framework intermédiaire.
• Stratégie de découpage : L'intervalle est segmenté en sous-ensembles distribués équitablement entre les différents threads via postMessage.
• Feedback visuel : Suivi en temps réel de la progression de chaque worker via des barres de progression dédiées dans le thread principal.

🥊 Le Challenge Technique

Le point critique a résidé dans la granularité des messages transférés. Envoyer un message postMessage à chaque nombre testé sature rapidement le canal de communication inter-thread (serialization overhead), créant un goulot d'étranglement côté main thread pire que le calcul lui-même.

Solution : Agrégation de la progression par paquets (batching) au sein de chaque worker avant notification de l'UI. Cela permet de conserver un rendu fluide à 60 fps sans pénaliser la puissance brute de calcul.

Retour d'Expérience & Liens

Ce projet démontre qu'il est désormais très accessible d'exploiter les architectures multi-cœurs du matériel moderne directement depuis le navigateur, à condition de concevoir un découpage de données sans état partagé (embarrassingly parallel problem).