Che cos’è WebAssembly e quale ruolo ha React

WebAssembly (WASM) è un formato di istruzioni binario progettato per essere eseguito nei browser web a una velocità quasi nativa. A differenza di JavaScript, che è un linguaggio interpretato di alto livello, WASM è un bytecode di basso livello che il motore JavaScript del browser compila ed esegue con un overhead minimo, raggiungendo prestazioni entro il 10-20% di quelle del codice nativo.

WebAssembly non è un linguaggio di programmazione che si scrive direttamente — è un target di compilazione. Linguaggi come Rust, C, C++ e Go possono essere compilati in bytecode WASM usando le rispettive toolchain. Si scrive in un linguaggio di sistema, si compila in WASM e si invia il modulo binario al browser.

WASM viene eseguito all'interno di una macchina virtuale in sandbox nel browser, con le stesse restrizioni di sicurezza di JavaScript. Non può accedere direttamente al DOM, alla rete o al file system: tutti questi accessi passano attraverso i binding JavaScript. Questa sandbox garantisce che anche il codice a velocità nativa non possa aggirare le policy di sicurezza del browser.

WASM e JavaScript sono progettati per lavorare insieme, non per sostituirsi a vicenda. JavaScript è eccellente nell'orchestrazione, nella manipolazione del DOM, nella gestione degli eventi e nelle chiamate alle API del browser. WASM è eccellente per gli algoritmi ad alta intensità di calcolo. Lo schema standard è il seguente: JavaScript orchestra l'applicazione, mentre WASM gestisce i calcoli più impegnativi.

WASM usa un modello di memoria lineare: un blocco contiguo di byte rappresentato da un ArrayBuffer JavaScript. Sia WASM sia JavaScript possono leggere e scrivere in questa memoria condivisa. Il trasferimento di grandi quantità di dati tra JavaScript e WASM avviene scrivendo e leggendo da questo buffer condiviso, evitando la costosa serializzazione.

React gestisce il livello dell'interfaccia utente: rendering, gestione dello stato e interazioni dell'utente. WASM gestisce i calcoli che React non può eseguire in modo efficiente in JavaScript. React chiama le funzioni WASM dai gestori degli eventi o dagli effetti, riceve i risultati e aggiorna lo stato per attivare nuovi rendering. React è il livello di presentazione; WASM è il motore di calcolo.

WASM è indicato per applicazioni React che richiedono: elaborazione di immagini o video (manipolazione dei pixel), sintesi ed elaborazione audio, operazioni crittografiche (calcolo di hash, cifratura), simulazioni fisiche, logica di gioco, compressione e decompressione e ricerca testuale su grandi quantità di dati. Si tratta di attività per le quali le prestazioni di JavaScript sono insufficienti in modo misurabile.

WASM raggiunge velocità quasi native per i calcoli vincolati dalla CPU perché il compilatore JIT del browser lo compila in codice macchina, richiedendo pochissimo lavoro di ottimizzazione. Tuttavia, attraversare il confine tra JavaScript e WASM (chiamando una funzione WASM da JS o viceversa) comporta un overhead. Riduca al minimo i passaggi attraverso il confine raggruppando le operazioni sui dati all'interno di WASM.

Sia WASM sia i Web Worker risolvono problemi di prestazioni. Un Web Worker sposta i calcoli JavaScript fuori dal thread principale. WASM rende i calcoli più veloci, indipendentemente dal thread su cui viene eseguito. Lo schema ottimale combina entrambi: eseguire i calcoli WASM in un Web Worker, così il thread principale di React resta libero per gli aggiornamenti dell'interfaccia mentre WASM opera a velocità quasi nativa.

WebAssembly è supportato da tutti i browser moderni (Chrome, Firefox, Safari, Edge) dal 2017. La specifica WASM di base gode di un supporto quasi universale. Le estensioni più recenti (thread con SharedArrayBuffer, SIMD per operazioni vettorializzate, garbage collection per linguaggi gestiti) hanno livelli di supporto variabili, ma vengono progressivamente standardizzate e rese disponibili.

L'ecosistema WASM sta crescendo rapidamente. Tra gli utilizzi in produzione più rilevanti figurano: Figma (motore di rendering), Google Earth (globo 3D), Adobe Photoshop Web (elaborazione delle immagini), AutoCAD Web (rendering CAD) e numerose librerie crittografiche. Le applicazioni React usano comunemente WASM per le parti ad alta intensità di calcolo di queste stesse categorie.

Come viene eseguito WebAssembly nel browser?

WebAssembly è un target di compilazione binario, non un linguaggio, per Rust, C, C++ e Go, ed è eseguito a velocità quasi nativa in una macchina virtuale del browser con sandbox. WASM e JavaScript sono complementari: JS orchestra, WASM esegue i calcoli. React gestisce il livello dell'interfaccia utente e chiama WASM per i calcoli più impegnativi. Usi WASM per l'elaborazione delle immagini, la crittografia, la fisica, l'audio e la ricerca in grandi quantità di dati. Riduca al minimo i passaggi attraverso il confine JS-WASM raggruppando le operazioni all'interno di WASM.