Qu’est-ce que WebAssembly et quelle est la place de React

WebAssembly (WASM) est un format d'instructions binaire conçu pour s'exécuter dans les navigateurs web à une vitesse proche de celle du code natif. Contrairement à JavaScript, qui est un langage interprété de haut niveau, WASM est un code binaire de bas niveau que le moteur JavaScript du navigateur compile et exécute avec très peu de surcoût, atteignant des performances inférieures de seulement 10 à 20 % à celles du code natif.

WebAssembly n'est pas un langage de programmation que vous écrivez directement : c'est une cible de compilation. Des langages comme Rust, C, C++ et Go peuvent être compilés en code binaire WASM à l'aide de leurs chaînes d'outils respectives. Vous écrivez dans un langage système, vous compilez en WASM, puis vous envoyez le module binaire au navigateur.

WASM s'exécute dans une machine virtuelle en bac à sable au sein du navigateur, avec les mêmes restrictions de sécurité que JavaScript. Il ne peut pas accéder directement au DOM, au réseau ou au système de fichiers : tous ces accès passent par des liaisons JavaScript. Cette mise en bac à sable garantit que même du code à vitesse native ne peut pas contourner les politiques de sécurité du navigateur.

WASM et JavaScript sont conçus pour fonctionner ensemble, et non pour se remplacer mutuellement. JavaScript excelle dans l'orchestration, la manipulation du DOM, la gestion des événements et l'appel des interfaces de programmation du navigateur. WASM excelle dans les algorithmes très exigeants en calcul. Le schéma standard est le suivant : JavaScript orchestre l'application et WASM prend en charge les calculs lourds.

WASM utilise un modèle de mémoire linéaire : un bloc contigu d'octets représenté par un ArrayBuffer JavaScript. WASM et JavaScript peuvent tous deux lire et écrire dans cette mémoire partagée. Le transfert de grandes quantités de données entre JavaScript et WASM consiste à écrire dans ce tampon partagé, puis à le lire, ce qui évite une sérialisation coûteuse.

React prend en charge la couche d'interface utilisateur : rendu, gestion de l'état et interactions utilisateur. WASM prend en charge les calculs que React ne peut pas effectuer efficacement en JavaScript. React appelle les fonctions WASM depuis des gestionnaires d'événements ou des effets, reçoit les résultats, puis met à jour l'état pour déclencher de nouveaux rendus. React est la couche de présentation ; WASM est le moteur de calcul.

WASM convient aux applications React qui nécessitent : le traitement d'images ou de vidéos (manipulation de pixels), la synthèse et le traitement audio, les opérations cryptographiques (hachage, chiffrement), la simulation physique, la logique de jeu, la compression et la décompression, ainsi que la recherche textuelle dans de grands volumes de données. Ce sont toutes des tâches pour lesquelles les performances de JavaScript sont insuffisantes de manière mesurable.

WASM atteint une vitesse proche de celle du code natif pour les calculs limités par le CPU, car il est compilé en code machine par le compilateur à la volée du navigateur, avec très peu d'optimisation nécessaire. Toutefois, franchir la frontière entre JavaScript et WASM (appeler une fonction WASM depuis JS ou inversement) entraîne un surcoût. Réduisez le nombre de franchissements en regroupant les opérations sur les données à l'intérieur de WASM.

WASM et les fils d'exécution Web répondent tous deux aux problèmes de performance. Un fil d'exécution Web déporte les calculs JavaScript hors du fil principal. WASM accélère les calculs, quel que soit le fil d'exécution sur lequel il fonctionne. Le schéma optimal consiste à combiner les deux : exécutez les calculs WASM dans un fil d'exécution Web afin que le fil principal de React reste disponible pour les mises à jour de l'interface utilisateur, tandis que WASM fonctionne à une vitesse proche de celle du code natif.

WebAssembly est pris en charge par tous les navigateurs modernes (Chrome, Firefox, Safari, Edge) depuis 2017. La spécification de base de WASM bénéficie d'une prise en charge quasi universelle. Les extensions plus récentes (fils d'exécution avec SharedArrayBuffer, SIMD pour les opérations vectorisées, ramasse-miettes pour les langages gérés) présentent des niveaux de prise en charge variables, mais sont progressivement normalisées et déployées.

L'écosystème WASM se développe rapidement. Parmi les usages notables en production figurent Figma (moteur de rendu), Google Earth (globe en 3D), Adobe Photoshop Web (traitement d'images), AutoCAD Web (rendu CAD) et de nombreuses bibliothèques de cryptographie. Les applications React utilisent couramment WASM pour les parties de ces mêmes catégories qui nécessitent le plus de calculs.

Comment WebAssembly s'exécute-t-il dans le navigateur ?

WebAssembly est une cible de compilation binaire (et non un langage) pour Rust, C, C++ et Go, qui s'exécute à une vitesse proche de celle du code natif dans une machine virtuelle de navigateur en bac à sable. WASM et JavaScript sont complémentaires : JS orchestre et WASM effectue les calculs. React joue le rôle de la couche d'interface utilisateur et appelle WASM pour les calculs lourds. Utilisez WASM pour le traitement d'images, la cryptographie, la physique, l'audio et la recherche dans de grands volumes de données. Réduisez les franchissements de la frontière JS-WASM en regroupant les opérations à l'intérieur de WASM.