1 
2WebAssembly (WASM) e nato come un modo per eseguire C++ nel browser. Nel 2026, gira ovunque  -  browser, server, reti edge, dispositivi embedded  -  e alimenta alcune delle applicazioni piu impegnative del web. Il motore di rendering di Figma, Adobe Photoshop sul web, l'elaborazione video di Google Meet e la piattaforma di calcolo edge di Cloudflare funzionano tutti su WebAssembly.
3 
4Chrome Platform Status colloca WASM a circa il 5,5% di tutti i caricamenti di pagina su Chrome all'inizio del 2026, in crescita rispetto al 4,5% dell'anno precedente. Con WASM 3.0 diventato standard W3C e WASI in fase di maturazione verso la versione 1.0, l'ecosistema ha raggiunto un punto di svolta.
5 
6Questa guida copre tutto cio che devi sapere per iniziare a sviluppare con WebAssembly.
7 
8## Cos'e WebAssembly?
9 
10WebAssembly e un formato di istruzioni binarie progettato come target di compilazione. Scrivi il codice in un linguaggio ad alto livello (Rust, C, C++, Go, Kotlin), lo compili in `.wasm` e lo esegui in qualsiasi ambiente che disponga di un runtime WASM  -  browser, Node.js, Cloudflare Workers, Wasmtime o Wasmer.
11 
12```mermaid
13graph LR
14    Rust[Rust / C / C++] --> Compiler[Compiler]
15    Compiler --> WASM[.wasm Binary]
16    WASM --> Browser[Browser V8/SpiderMonkey]
17    WASM --> Server[Server Wasmtime]
18    WASM --> Edge[Edge Cloudflare Workers]
19    WASM --> Embedded[Embedded WAMR]
20```
21 
22### Come funziona
23 
24WASM e una **macchina virtuale basata su stack**. Le funzioni inseriscono e rimuovono valori da uno stack di operandi. Il runtime host (V8 in Chrome, SpiderMonkey in Firefox) compila JIT il bytecode WASM in codice macchina nativo, ed e per questo che le prestazioni sono quasi native.
25 
26Caratteristiche principali:
27 
28- **Esecuzione in sandbox**: i moduli WASM possono accedere solo alle risorse che l'host concede esplicitamente. Nessun accesso al filesystem, alla rete o al sistema operativo a meno che non sia permesso. Questo e fondamentalmente diverso dal codice nativo.
29- **Memoria lineare**: un singolo `ArrayBuffer` contiguo condiviso tra WASM e l'host. I dati complessi (stringhe, struct) vengono passati scrivendo in memoria e condividendo un puntatore.
30- **Tipi limitati**: WASM supporta nativamente solo quattro tipi: `i32`, `i64`, `f32`, `f64`. Tutto il resto (stringhe, array, oggetti) richiede la codifica attraverso la memoria lineare o il Component Model.
31- **Portabile**: lo stesso binario `.wasm` gira su qualsiasi piattaforma con un runtime WASM, senza ricompilazione.
32 
33### WASM vs JavaScript
34 
35WASM non sostituisce JavaScript. Lo complementa.
36 
37| Aspetto | JavaScript | WebAssembly |
38|---------|-----------|-------------|
39| **Parsing** | Parsing + compilazione a runtime | Binario pre-compilato, solo decodifica |
40| **Velocita di esecuzione** | Ottimizzato JIT, variabile | Quasi nativo, costante |
41| **Avvio** | Veloce per piccoli script | Decodifica veloce, prevedibile |
42| **Accesso al DOM** | Diretto | Indiretto (tramite glue JS) |
43| **Ideale per** | UI, manipolazione DOM, gestione eventi | Calcolo intensivo sulla CPU |
44| **Garbage collection** | Integrato | WasmGC (nuovo), o manuale |
45 
46Usa JavaScript per l'interfaccia utente e il lavoro sul DOM. Usa WASM per il calcolo pesante: elaborazione immagini, codifica video, simulazioni fisiche, crittografia, parsing di dati.
47 
48## WASM 3.0: le novita
49 
50WebAssembly 3.0 e diventato standard W3C nel settembre 2025, standardizzando nove funzionalita che erano in fase di sviluppo da anni.
51 
52| Funzionalita | Cosa abilita |
53|--------------|-------------|
54| **WasmGC** | Garbage collection nativa in WASM. I linguaggi gestiti (Java, Kotlin, Dart) possono compilare in WASM senza includere il proprio runtime GC. Supportato in Chrome 119+, Firefox 120+, Safari 18.2+. |
55| **Exception Handling** | `try`/`catch` nativi in WASM. In precedenza, le eccezioni richiedevano costosi roundtrip verso JavaScript. |
56| **Tail Calls** | Abilita la ricorsione efficiente senza stack overflow. Fondamentale per i linguaggi funzionali. |
57| **Relaxed SIMD** | Istruzioni vettoriali a 128 bit per l'elaborazione parallela dei dati. Abilita ottimizzazioni specifiche per l'hardware. |
58| **Memory64** | Supera il limite di 4GB di memoria lineare. Necessario per l'elaborazione di dati su larga scala. |
59| **Multi-memory** | Piu regioni di memoria indipendenti in un singolo modulo. |
60 
61La piu impattante e **WasmGC**. Prima di essa, compilare Java o Kotlin in WASM significava includere un intero garbage collector come parte del binario, gonfiando le dimensioni del file. Ora il GC del browser gestisce la memoria per i moduli WASM, esattamente come fa per JavaScript.
62 
63## WASI: WebAssembly oltre il browser
64 
65WASM nel browser e potente, ma **WASI (WebAssembly System Interface)** e cio che rende WASM un runtime universale. WASI fornisce interfacce standardizzate per le risorse di sistema  -  file, rete, orologi, numeri casuali  -  permettendo ai moduli WASM di funzionare al di fuori del browser.
66 
67```mermaid
68graph TD
69    subgraph "Browser"
70        B[WASM Module] --> Web[Web APIs\nDOM, Fetch, Canvas]
71    end
72 
73    subgraph "Server / Edge / Embedded"
74        S[WASM Module] --> WASI[WASI Interfaces]
75        WASI --> FS[wasi:filesystem]
76        WASI --> Net[wasi:sockets]
77        WASI --> HTTP[wasi:http]
78        WASI --> Clock[wasi:clocks]
79        WASI --> Rand[wasi:random]
80    end
81```
82 
83WASI Preview 2 (l'attuale release stabile) definisce queste interfacce:
84 
85- `wasi:filesystem`  -  operazioni sui file tramite handle di capacita (non i tradizionali file descriptor)
86- `wasi:sockets`  -  networking TCP/UDP
87- `wasi:http`  -  gestione richieste/risposte HTTP
88- `wasi:clocks`  -  orologio di sistema, orologio monotonico
89- `wasi:random`  -  casualita crittografica
90- `wasi:cli`  -  argomenti della riga di comando, variabili d'ambiente, stdio
91 
92Il principio chiave e la **sicurezza basata sulle capacita**: un modulo WASM non puo accedere al filesystem a meno che l'host non conceda esplicitamente un handle a una directory specifica. Questo rende WASI fondamentalmente piu sicuro rispetto all'esecuzione di eseguibili nativi.
93 
94### Il percorso verso WASI 1.0
95 
96WASI 0.3.0 (che aggiunge primitive async/concorrenza) e previsto nel 2026, con WASI 1.0 a seguire. L'aggiunta principale e l'async integrato nel linguaggio con I/O streaming a copia zero.
97 
98## Il Component Model
99 
100I moduli WASM di base possono scambiare solo numeri. Il **Component Model** risolve questa limitazione aggiungendo un sistema di tipi ricco e un livello di composabilita sopra WASM.
101 
102### WIT (WebAssembly Interface Types)
103 
104WIT e un linguaggio di definizione delle interfacce che permette ai componenti di dichiarare le proprie importazioni ed esportazioni con tipi ricchi  -  stringhe, record, liste, varianti, enum  -  non solo `i32` e `f64`.
105 
106```wit
107// calculator.wit
108package myorg:calculator@1.0.0;
109 
110interface operations {
111    record calculation {
112        expression: string,
113        result: f64,
114        timestamp: u64,
115    }
116 
117    add: func(a: f64, b: f64) -> f64;
118    multiply: func(a: f64, b: f64) -> f64;
119    history: func() -> list<calculation>;
120}
121 
122world calculator {
123    export operations;
124}
125```
126 
127Le toolchain come `wit-bindgen` generano binding specifici per il linguaggio a partire dai file WIT. Un componente Rust e un componente Python possono scambiare stringhe, record e liste attraverso contratti WIT senza che nessuna delle due parti conosca il linguaggio di implementazione dell'altra.
128 
129## Costruire il tuo primo modulo WASM con Rust
130 
131Rust ha gli strumenti WASM piu maturi. Costruiamo un esempio pratico: un modulo di elaborazione immagini che gira nel browser.
132 
133### Configurazione
134 
135```bash
136# Install the WASM target for Rust
137rustup target add wasm32-unknown-unknown
138 
139# Install wasm-pack (builds Rust to WASM + generates JS bindings)
140cargo install wasm-pack
141 
142# Create a new library project
143cargo new --lib image-processor
144cd image-processor
145```
146 
147### Configurare Cargo.toml
148 
149```toml
150[package]
151name = "image-processor"
152version = "0.1.0"
153edition = "2021"
154 
155[lib]
156crate-type = ["cdylib"]
157 
158[dependencies]
159wasm-bindgen = "0.2"
160```
161 
162### Scrivere il codice Rust
163 
164```rust
165// src/lib.rs
166use wasm_bindgen::prelude::*;
167 
168/// Convert an image buffer to grayscale.
169/// Input: RGBA pixel data as a flat u8 array (4 bytes per pixel).
170/// Output: Modified in place for zero-copy performance.
171#[wasm_bindgen]
172pub fn grayscale(pixels: &mut [u8]) {
173    for chunk in pixels.chunks_exact_mut(4) {
174        let r = chunk[0] as f32;
175        let g = chunk[1] as f32;
176        let b = chunk[2] as f32;
177        // ITU-R BT.709 luminance coefficients
178        let gray = (0.2126 * r + 0.7152 * g + 0.0722 * b) as u8;
179        chunk[0] = gray;
180        chunk[1] = gray;
181        chunk[2] = gray;
182        // chunk[3] is alpha, leave unchanged
183    }
184}
185 
186/// Adjust brightness of an image.
187/// factor > 1.0 brightens, < 1.0 darkens.
188#[wasm_bindgen]
189pub fn adjust_brightness(pixels: &mut [u8], factor: f32) {
190    for chunk in pixels.chunks_exact_mut(4) {
191        chunk[0] = ((chunk[0] as f32 * factor).min(255.0)) as u8;
192        chunk[1] = ((chunk[1] as f32 * factor).min(255.0)) as u8;
193        chunk[2] = ((chunk[2] as f32 * factor).min(255.0)) as u8;
194    }
195}
196 
197/// Invert all colors in the image.
198#[wasm_bindgen]
199pub fn invert(pixels: &mut [u8]) {
200    for chunk in pixels.chunks_exact_mut(4) {
201        chunk[0] = 255 - chunk[0];
202        chunk[1] = 255 - chunk[1];
203        chunk[2] = 255 - chunk[2];
204    }
205}
206 
207/// Calculate the average brightness of an image (0-255).
208#[wasm_bindgen]
209pub fn average_brightness(pixels: &[u8]) -> f32 {
210    let mut total: f64 = 0.0;
211    let pixel_count = pixels.len() / 4;
212    for chunk in pixels.chunks_exact(4) {
213        let luminance = 0.2126 * chunk[0] as f64
214            + 0.7152 * chunk[1] as f64
215            + 0.0722 * chunk[2] as f64;
216        total += luminance;
217    }
218    (total / pixel_count as f64) as f32
219}
220```
221 
222### Build
223 
224```bash
225wasm-pack build --target web
226```
227 
228Questo produce una directory `pkg/` con:
229- `image_processor_bg.wasm`  -  il binario WASM compilato
230- `image_processor.js`  -  codice glue JavaScript con definizioni TypeScript
231- `package.json`  -  pronto per la pubblicazione su npm
232 
233### Utilizzo in JavaScript
234 
235```html
236<!DOCTYPE html>
237<html>
238<head><title>WASM Image Processor</title></head>
239<body>
240  <canvas id="canvas" width="800" height="600"></canvas>
241  <button onclick="applyGrayscale()">Grayscale</button>
242  <button onclick="applyBrightness()">Brighten</button>
243  <button onclick="applyInvert()">Invert</button>
244 
245  <script type="module">
246    import init, { grayscale, adjust_brightness, invert } from "./pkg/image_processor.js";
247 
248    let ctx;
249    let imageData;
250 
251    async function setup() {
252      await init();
253      const canvas = document.getElementById("canvas");
254      ctx = canvas.getContext("2d");
255 
256      // Load an image onto the canvas
257      const img = new Image();
258      img.onload = () => {
259        ctx.drawImage(img, 0, 0);
260        imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
261      };
262      img.src = "photo.jpg";
263    }
264 
265    window.applyGrayscale = () => {
266      grayscale(imageData.data);
267      ctx.putImageData(imageData, 0, 0);
268    };
269 
270    window.applyBrightness = () => {
271      adjust_brightness(imageData.data, 1.3);
272      ctx.putImageData(imageData, 0, 0);
273    };
274 
275    window.applyInvert = () => {
276      invert(imageData.data);
277      ctx.putImageData(imageData, 0, 0);
278    };
279 
280    setup();
281  </script>
282</body>
283</html>
284```
285 
286Il punto chiave: `imageData.data` e un `Uint8ClampedArray` supportato da un `ArrayBuffer`. Quando viene passato a WASM, condivide la stessa memoria  -  nessuna copia. La funzione Rust modifica i pixel direttamente, e il lato JavaScript vede immediatamente le modifiche.
287 
288## Livello piu basso: istanziazione manuale di WASM
289 
290Se non vuoi usare `wasm-bindgen`, puoi istanziare direttamente i moduli WASM:
291 
292```javascript
293const response = await fetch("calculator.wasm");
294const { instance } = await WebAssembly.instantiateStreaming(response, {
295  env: {
296    // Functions the WASM module can call
297    log_result: (value) => console.log("Result:", value),
298  },
299});
300 
301// Call exported functions
302const { add, multiply } = instance.exports;
303console.log(add(5, 3));       // 8
304console.log(multiply(4, 7));  // 28
305```
306 
307Questo e utile quando si vuole un overhead minimo e non si ha bisogno di interoperabilita avanzata tra tipi.
308 
309## Prestazioni: WASM vs JavaScript
310 
311I benchmark reali mostrano accelerazioni significative per i compiti intensivi sulla CPU:
312 
313| Compito | JavaScript | WASM | Accelerazione |
314|---------|-----------|------|---------------|
315| Elaborazione immagine 4K | 180ms | 8ms (con SIMD) | 22x |
316| Ridimensionamento immagine (4K) | 250ms | 45ms | 5,5x |
317| Simulazione fisica (10K entita) | Frame persi | 60fps fluidi | ~10x |
318| Parsing JSON (payload grande) | 12ms | 3ms | 4x |
319| Hashing crittografico | 45ms | 6ms | 7,5x |
320 
321WASM gira a circa il 95% della velocita del codice nativo. I maggiori guadagni derivano da:
322- Prestazioni prevedibili (nessun warmup JIT, nessuna pausa del GC)
323- Istruzioni SIMD per l'elaborazione parallela dei dati
324- Accesso diretto alla memoria senza interferenza del garbage collector
325 
326Dove WASM NON e piu veloce: manipolazione del DOM, piccoli calcoli, compiti legati all'I/O. JavaScript e gia ottimizzato per questi casi.
327 
328## Casi d'uso in produzione
329 
330### Figma: rendering vettoriale in tempo reale
331 
332Il motore di rendering principale di Figma e C++ compilato in WASM. Ogni forma, gradiente ed effetto viene calcolato in WASM e disegnato su un elemento Canvas. Questo permette a Figma di gestire design complessi con migliaia di livelli a 60fps nel browser  -  prestazioni impossibili in puro JavaScript.
333 
334### Adobe Photoshop sul web
335 
336Adobe ha portato filtri e strumenti chiave di Photoshop in WASM utilizzando Rust. I loro benchmark mostrano l'elaborazione di immagini 4K in 22ms con WASM SIMD contro 180ms in JavaScript  -  un miglioramento di 8 volte che rende possibili le anteprime dei filtri in tempo reale.
337 
338### Cloudflare Workers
339 
340Cloudflare esegue moduli WASM in isolati V8 in oltre 330 posizioni edge. I cold start sono di 1-5ms (rispetto ai 100-500ms per il serverless basato su container). A febbraio 2026, hanno distribuito l'inferenza di Llama-3-8b attraverso la loro rete edge utilizzando WASM.
341 
342### Google Meet
343 
344La sfocatura dello sfondo e gli sfondi virtuali in Google Meet utilizzano WASM con SIMD per l'elaborazione video in tempo reale. Il modulo WASM elabora ogni frame video abbastanza velocemente da mantenere un video fluido a 30fps.
345 
346## Supporto browser (2026)
347 
348| Funzionalita | Chrome | Firefox | Safari | Edge |
349|--------------|--------|---------|--------|------|
350| Core WASM | Completo | Completo | Completo | Completo |
351| Threads | Si | Si | Si | Si |
352| SIMD (128 bit) | Si | Si | Si | Si |
353| WasmGC | 119+ | 120+ | 18.2+ | Si |
354| Exception Handling | Si | Si | Si | Si |
355| Memory64 | Si | Si | Parziale | Si |
356 
357Tutti i principali browser supportano pienamente WASM. Le funzionalita piu recenti (WasmGC, Exception Handling) hanno raggiunto un'ampia disponibilita.
358 
359## Riferimento degli strumenti
360 
361| Strumento | Scopo | Installazione |
362|-----------|-------|---------------|
363| **wasm-pack** | Compilare Rust in WASM, generare pacchetti npm | `cargo install wasm-pack` |
364| **wasm-bindgen** | Binding di interoperabilita Rust/JS (usato da wasm-pack) | Dipendenza nel Cargo.toml |
365| **wasm-opt** | Ottimizzazione delle dimensioni del binario (riduzione del 50%+) | Parte di Binaryen: `brew install binaryen` |
366| **wit-bindgen** | Generare binding dai file WIT | `cargo install wit-bindgen-cli` |
367| **Wasmtime** | Runtime WASM lato server (implementazione di riferimento WASI) | `brew install wasmtime` |
368| **Wasmer** | Runtime WASM alternativo con supporto WASI | `curl https://get.wasmer.io -sSfL \| sh` |
369| **wasm-feature-detect** | Rilevamento delle funzionalita del browser a runtime | `npm install wasm-feature-detect` |
370 
371### Ottimizzare le dimensioni del binario
372 
373I binari WASM possono essere grandi. Ecco come ridurli:
374 
375```toml
376# Cargo.toml
377[profile.release]
378opt-level = "z"     # Optimize for size
379lto = true          # Link-time optimization
380codegen-units = 1   # Better optimization, slower compile
381strip = true        # Strip debug symbols
382```
383 
384```bash
385# Build in release mode
386wasm-pack build --release --target web
387 
388# Further optimize with wasm-opt
389wasm-opt -Oz pkg/image_processor_bg.wasm -o pkg/image_processor_bg.wasm
390```
391 
392Un tipico modulo WASM in Rust passa da 500KB a meno di 50KB con queste ottimizzazioni.
393 
394## Percorso per iniziare
395 
396```mermaid
397flowchart TD
398    A[Week 1: Basics] --> B[Week 2: Real Project]
399    B --> C[Week 3: WASI and Server-side]
400    C --> D[Month 2+: Production]
401 
402    A --> A1[Install Rust + wasm-pack]
403    A --> A2[Build hello-world WASM module]
404    A --> A3[Call WASM functions from JavaScript]
405 
406    B --> B1[Build image processor or game physics]
407    B --> B2[Use wasm-bindgen for rich types]
408    B --> B3[Benchmark against pure JS]
409 
410    C --> C1[Run WASM with Wasmtime]
411    C --> C2[Explore WASI interfaces]
412    C --> C3[Try Component Model with WIT]
413 
414    D --> D1[Optimize binary size]
415    D --> D2[Use SIMD for parallelism]
416    D --> D3[Deploy to Cloudflare Workers or browser]
417```
418 
419## Conclusione
420 
421WebAssembly non e piu sperimentale. E una tecnologia di produzione utilizzata da alcune delle applicazioni piu impegnative del web. Prestazioni quasi native, sicurezza in sandbox e portabilita universale  -  nessun altro target di compilazione ti offre tutte e tre queste caratteristiche.
422 
423Non devi riscrivere l'intera applicazione in WASM. Inizia con una singola funzione intensiva sulla CPU  -  un filtro per immagini, un parser di dati, un calcolo fisico  -  compilala in WASM e chiamala da JavaScript. Misura la differenza. Poi decidi dove altro WASM puo essere d'aiuto.
424 
425Gli strumenti sono maturi, il supporto dei browser e universale e l'ecosistema sta crescendo. Se scrivi in Rust, sei gia a un comando di distanza dal browser.
426 
427> **Checklist per iniziare:**
428>
429> - [x] Rust e wasm-pack installati
430> - [x] Primo modulo WASM compilato e funzionante nel browser
431> - [x] Interoperabilita JavaScript funzionante (chiamare WASM da JS)
432> - [x] Build di rilascio con ottimizzazioni delle dimensioni applicate
433> - [x] Prestazioni confrontate con l'equivalente in puro JavaScript
434> - [x] WASI esplorato con Wasmtime per i casi d'uso lato server
435