Videocorso WebAssembly CGFA

Dal formato testo WAT all'uso da JavaScript, fino a compilare Rust e C in codice velocissimo per browser e server

Partenza: Base
14 ore con gli esercizi
10 lezioni in 3 livelli
2 lezioni gratis

Inizia la prima lezione Sblocca il corso

A chi serve

Sviluppatori web e programmatori curiosi che vogliono capire e usare WebAssembly, anche senza averlo mai visto

Cosa serve per iniziare

Conoscere le basi di JavaScript (variabili, funzioni, cicli)
Un computer Windows, Mac o Linux con un browser moderno
Per le ultime lezioni: nozioni elementari di Rust o di C aiutano, ma ripassiamo il necessario

Cosa installare

Un browser moderno e Node.js 24 LTSChrome, Firefox, Edge e Safari supportano WebAssembly; Node.js si scarica gratis da nodejs.org e serve per provare gli esempi da riga di comando

WABT (WebAssembly Binary Toolkit)Contiene wat2wasm per trasformare il testo WAT in un file .wasm. Si scarica dalle release su github.com/WebAssembly/wabt oppure con sudo apt install wabt o brew install wabt. Online c'è anche l'editor ufficiale "wat2wasm demo" per provare senza installare nulla

Rust con rustup e wasm-bindgenrustup da rust-lang.org; poi rustup target add wasm32-unknown-unknown e cargo install wasm-bindgen-cli

Emscripten o clang (per il C)Emscripten da emscripten.org (emsdk), oppure clang con wasm-ld: basta un compilatore LLVM con il target wasm32

WasmtimeRuntime gratuito per eseguire file .wasm fuori dal browser, da wasmtime.dev

A cosa ti serve

Applicazioni web ad alte prestazioni (editor di immagini, CAD, giochi, video)
Portare nel browser librerie scritte in C, C++ o Rust
Plugin sicuri e portabili per server e cloud (edge computing)
Strumenti da riga di comando portabili con WASI
Sicurezza: l'isolamento (sandbox) dei programmi non fidati

Programma del corso

10 lezioni in 3 livelli. Ogni lezione: video, spiegazione, codice da copiare o provare, esercizio con soluzione e quiz.

Base

Cos'è WebAssembly, il formato testo WAT, tipi, controllo del flusso e memoria

1Cos'è WebAssembly e il primo moduloCapire a cosa serve WebAssembly, scrivere un modulo in formato WAT e chiamarlo da JavaScript.Gratis25 min 2Tipi, variabili locali e globaliConoscere i quattro tipi di Wasm, usare variabili locali e globali e fare calcoli con numeri interi e decimali.Gratis25 min 3Condizioni, cicli e funzioniUsare if, block, loop e br_if per scrivere cicli, e far chiamare funzioni tra loro.30 min 4La memoria lineareUsare la memoria di Wasm con load e store, inizializzarla con data e leggerla da JavaScript.30 min

Intermedio

L'API JavaScript, importare funzioni e compilare dal C

1L'API JavaScript di WebAssemblyConoscere Module, Instance, Memory, Global e Table e riconoscere gli errori di caricamento.30 min 2Importare funzioni e passare datiFar chiamare a Wasm funzioni JavaScript con gli import e scambiare testi e array tramite la memoria.30 min 3Compilare dal CTrasformare una funzione C in un modulo Wasm con clang oppure con Emscripten e usarla da JavaScript.35 min

Avanzato

Rust, WASI fuori dal browser e prestazioni

1Da Rust a WebAssembly con wasm-bindgenCompilare una libreria Rust in Wasm e usarla da JavaScript con stringhe e funzioni comode grazie a wasm-bindgen.40 min 2WASI: WebAssembly fuori dal browserEseguire programmi Wasm da riga di comando con un runtime e capire il ruolo di WASI e dei componenti.35 min 3Prestazioni, debug e quando usare WasmMisurare, alleggerire e fare il debug di un modulo, conoscere SIMD, thread e GC e decidere quando conviene usare Wasm.35 min

Progetto finale: Il convertitore di fatture in WebAssembly

Costruisci un modulo Wasm che calcola il totale con IVA di una lista di fatture e una pagina web che lo usa. Imparerai a scrivere WAT, a preparare i dati in memoria da JavaScript e a leggere il risultato.

I passi

Crea il file totale.wat con una memoria esportata di una pagina.
Scrivi la funzione somma_f64(inizio, n) che somma n numeri f64 letti dalla memoria (8 byte ciascuno).
Scrivi la funzione con_iva(x) che restituisce x * 1.22.
Compila con wat2wasm totale.wat -o totale.wasm.
In JavaScript scrivi gli importi nella memoria con un Float64Array e chiama le due funzioni.
Mostra il risultato in una pagina HTML con un campo e un pulsante.
Extra: riscrivi la somma in Rust con wasm-bindgen e confronta le dimensioni dei due file.

Esame e attestato

Alla fine del corso fai l'esame: 15 domande, serve il 75% di risposte giuste. Superato l'esame ottieni l'attestato stampabile con nome, ore, punteggio e un codice di controllo che chiunque può verificare.

Vai all'esame

Glossario di WebAssembly

WebAssembly (Wasm): Un formato di programma binario, veloce e portabile, eseguito da browser, Node.js e altri runtime.
WAT: Il formato testo leggibile di WebAssembly, con parentesi alla maniera dei linguaggi Lisp.
Modulo: Un file Wasm compilato, che contiene funzioni, memoria e dati.
Istanza: Un modulo caricato e pronto all'uso, con la sua memoria e le sue funzioni.
Pila (stack): L'area dove Wasm mette i valori mentre calcola: ogni istruzione ne toglie e ne aggiunge.
Memoria lineare: Un grande vettore di byte, a pagine da 64 KiB, che il modulo e JavaScript possono leggere e scrivere.
Import: Una funzione o un oggetto fornito dall'esterno, di solito JavaScript, che il modulo può usare.
Export: Una funzione, memoria o valore del modulo visibile da JavaScript.
Sandbox: Un ambiente isolato in cui il codice non può toccare ciò che non gli è concesso.
WASI: L'interfaccia standard con cui un modulo Wasm chiede al sistema file, argomenti e altro, solo se concessi.
wasm-bindgen: Lo strumento che collega in automatico Rust e JavaScript, con stringhe e oggetti.
Emscripten: Il compilatore che porta programmi C e C++ in WebAssembly, con librerie e collegamento JavaScript.

Le prime 2 lezioni sono gratis

Per il corso completo, scuole e aziende: chiedi le condizioni.

Inizia ora Richiedi maggiori informazioni