WASM, cos'è e come sta rivoluzionando le applicazioni Web

Dal 1995 e fino a “poco” tempo fa, l’unico strumento per realizzare qualcosa di veramente interattivo e un po’ più evoluto rispetto alla staticità delle pagine HTML era JavaScript, che però ha i suoi limiti soprattutto per ciò che riguarda le attività che devono essere svolte con un certo livello prestazionale. WASM, abbreviazione di WebAssembly, è nato per essere un’alternativa all’esecuzione di codice JavaScript nel browser, consentendo alle applicazioni di eseguire operazioni impegnative all’interno del programma che si usa per navigare online.

Cos’è WASM e come esegue, da browser, codice nettamente più performante di JavaScript

WASM è progettato per eseguire codice in modo molto più veloce rispetto a JavaScript: utilizza infatti un formato di bytecode binario che può essere eseguito nei browser Web moderni e che assicura prestazioni molto simili a quelle delle applicazioni eseguite nativamente a livello di sistema operativo.

L’anno di nascita di WASM è il 2015: è allora che il World Wide Web Consortium (W3C) e i principali fornitori di browser hanno trovato la quadra al fine di approvare e predisporre una macchina virtuale a basso livello che esegue il bytecode, tradotto dai linguaggi ad alto livello.

Quando si parla di WASM, infatti, non bisogna pensare a un nuovo linguaggio di programmazione bensì a un formato di istruzioni binarie compatto caricato ed eseguito all’interno di una sandbox allestita dal browser. Diversamente rispetto a JavaScript, che è un linguaggio interpretato, WASM usa bytecode ovvero un insieme di istruzioni a basso livello generate da un compilatore, ma non è direttamente eseguibili dalla macchina. Il bytecode è un codice intermedio progettato per essere eseguito in una macchina virtuale: il vantaggio principale consiste ovviamente nella portabilità poiché il bytecode può essere utilizzato per eseguire l’applicazione su diverse piattaforme e architetture senza la necessità di essere ricompilato.

Esempi di linguaggi che utilizzano il bytecode includono Java (che genera bytecode eseguito sulla Java Virtual Machine, JVM) e C# (che genera bytecode eseguito sulla Common Language Runtime, CLR).

In un altro articolo abbiamo messo in evidenza le principali differenze tra linguaggi interpretati e compilati parlando anche di linguaggio macchina.

La forza di WASM per gli sviluppatori Web

I vantaggi di WASM sono molteplici. Oltre ai già citati benefici in termini prestazionali e all’elevata portabilità del codice, WASM non è legato a un linguaggio di programmazione specifico. Può infatti essere utilizzato con diversi linguaggi, tra cui C, C++, Rust e altri. Ciò significa che gli sviluppatori possono scrivere il proprio codice in un linguaggio di programmazione preferito e ottenere il bytecode WASM eseguibile all’interno di qualunque browser Web moderno.

I web developer sono entusiasti di WASM perché non devono sostituire completamente le applicazioni basate su JavaScript. Un altro vantaggio di WASM è infatti la sua interoperabilità: gli sivluppatori Web possono così chiamare le funzioni WASM da JavaScript e viceversa, consentendo un’integrazione senza soluzione di continuità tra le due tecnologie.

Dicevamo inoltre che un altro aspetto fondamentale che costituisce la spina dorsale di WASM consiste nel supporto diretto per la sandbox, un ambiente sicuro integrato nel browser Web e completamente isolato dal resto del sistema che evita la “commistione” con le altre applicazioni in esecuzione sulla macchina. Con tutto ciò che ne potrebbe seguire sul versante della sicurezza.

WASM sinonimo di containerizzazione?

Nel 2019 Mozilla ha fatto un annuncio storico: presentando la sua WebAssembly System Interface (WASI), il codice WASM diventava in grado di accedere alle risorse del sistema operativo superando di fatto i confini del browser Web. Ecco quindi che arrivò la proposta di una soluzione, universalmente riconosciuta, per eseguire lo stesso codice su tutte le macchina senza necessità di una nuova compilazione, come abbiamo visto in precedenza.

Leggete questo tweet di Solomon Hykes, cofondatore di Docker: “Se WASM+WASI fossero esistiti nel 2008, non avremmo avuto bisogno di creare Docker. Ecco quanto è importante. WebAssembly lato server è il futuro dell’informatica. Un’interfaccia di sistema standard era il collegamento mancante“.

Lo stesso concetto, con maggiore dovizia di particolari, è stato ribadito più di recente (dicembre 2022) da VMware che ha descritto come cambia la gestione dei software lato server con WASM, senza bisogno di container.

Non è così semplice: le sfide che WASM deve affrontare

Ad ogni modo, sebbene WASI e runtime alternative come WasmEdge abbiano reso molto più facile eseguire il codice WASM in molti ambiti (quindi in ambienti diversi dal browser Web…), c’è ancora molto lavoro da fare. Basti pensare a Python. Questo linguaggio di programmazione è diventato un po’ il “faro” per la stragrande maggioranza dei progetti per il machine learning e in generale per le applicazioni di intelligenza artificiale, grazie alla disponibilità di PyTorch.

PyTorch è una libreria open source per le attività di machine learning e deep learning ampiamente utilizzata per lo sviluppo di applicazioni di intelligenza artificiale. Sviluppata principalmente dai laboratori AI Research di Facebook, PyTorch è diventata popolare per la sua flessibilità, facilità d’uso e per il supporto delle reti neurali profonde.

Il problema, che ci riporta alla cruda realtà, è che non è possibile trasferire queste applicazioni Python in modo semplice con WASM: servono molte dipendenze di terze parti, che non sono ancora disponibili.

Il potenziale, tuttavia, c’è tutto: guardate ad esempio il porting di Audacity realizzato con WASM. La sfida, però, consiste a questo punto nel rafforzare la presenza di WASM al di fuori del browser Web e quindi come soluzione da utilizzare anche sul backend. Intendiamo, in questo caso, la possibilità di servirsi di bytecode WASM lato server.

Un valido ausilio in questo senso dovrebbe arrivare con l’utilizzo del WebAssembly Component Model (WACM) e con la seconda versione di WASI.

Tornando invece al browser Web, va detto che in WASM manca non soltanto l’accesso al DOM della pagina ma anche molte altre strutture come XMLHttpRequest.

Come imparare il WebAssembly Text Format

L’autore del progetto Watlings ha creato un repository su GitHub dedicato all’apprendimento dei “rudimenti” di WASM attraverso una serie di esercizi e piccoli programmi. Obiettivo del progetto è fornire le “chiavi” per apprendere il WebAssembly Text Format (WAT), una rappresentazione testuale leggibile dall’uomo per il codice WASM.

Come abbiamo visto, infatti, il bytecode WASM è in formato binario: WAT semplifica la creazione, la lettura e la modifica del codice WASM.

Il progetto Watlings include una serie di esercizi pratici che coprono vari aspetti di WAT: sono suddivisi in numerose sezioni, ognuna delle quali tratta un aspetto specifico del formato.

Per iniziare “il viaggio”, gli apprendisti sviluppatori possono clonare il repository, installare le dipendenze tramite npm e quindi testare le proprie soluzioni agli esercizi utilizzando comandi specifici.

Qualche idea di codice da trasformare in bytecode WASM

Prendiamo come esempio questo semplice codice C/C++ che calcola la somma di due numeri (da salvare come file sorgente.cpp):

#include <iostream>

int main() {
int a = 5;
int b = 7;
int sum = a + b;
std::cout << “La somma di ” << a << ” e ” << b << ” è ” << sum << std::endl;
return 0;
}

Usando Emscripten è possibile compilare questo codice in WASM e ottenere un file HTML che lo richiama da browser Web:

emcc sorgente.cpp -o output.html

Ancora, il codice Rust seguente calcola il fattoriale di un numero (da salvare come sorgente.rs) e lo esporta come funzione WASM:

#[no_mangle]
pub extern “C” fn factorial(n: u32) -> u32 {
if n <= 1 {
return 1;
}
return n * factorial(n – 1);
}

Il codice può essere compilato in WASM utilizzando il compilatore Rust:

rustc --target wasm32-unknown-unknown -O -o output.wasm sorgente.rs

Parlavamo di interoperabilità: una volta generato il file WASM, si possono chiamare le funzioni tramite codice JavaScript.

Il codice presentato di seguito richiama proprio la funzione factorial scritta precedentemente in Rust:

// Carica il modulo WASM
const { instance, module } = await WebAssembly.instantiateStreaming(fetch(‘output.wasm’));

// Chiama la funzione WASM
const result = instance.exports.factorial(5);
console.log(“Il fattoriale di 5 è ” + result);

È quindi possibile usare WASM per qualunque elaborazione complessa e integrare gli input e gli output delle funzioni con esso definite nelle proprie applicazioni Web.

WASM può essere utilizzato per eseguire operazioni di compressione e decompressione dei dati, per effettuare simulazioni fisiche realistiche, per elaborare immagini direttamente nel browser, per svolgere calcoli matematici impegnativi. Le elaborazioni possono così essere eseguite in modo efficiente e il risultato è a disposizione dell’applicazione Web.

Credit immagine in apertura: iStock.com/Cecilie_Arcurs