WebAssembly - Moduli

Ciao, aspiranti programmatori! Oggi ci imbarcheremo in un viaggio entusiasmante nel mondo dei moduli WebAssembly. Non preoccupatevi se siete nuovi alla programmazione - sarò il vostro guida amichevole, e affronteremo tutto passo per passo. Alla fine di questa lezione, avrete una comprensione solida dei moduli WebAssembly e di come funzionano. Iniziamo!

WebAssembly - Modules

Cos'è WebAssembly?

Prima di parlare dei moduli, vediamo rapidamente cos'è WebAssembly. Immagina di costruire un castello di sabbia. WebAssembly è come avere un secchio speciale che ti permette di costruire castelli più velocemente e più forti che mai. Nel mondo dello sviluppo web, WebAssembly è un linguaggio a basso livello che gira nei browser, permettendo prestazioni quasi nativa.

Passo 1: Comprendere i Moduli WebAssembly

I moduli WebAssembly sono i mattoni delle applicazioni WebAssembly. Pensate a loro come a pezzi di LEGO - ogni modulo è una unità autocontenuta che può essere combinata con altri per creare qualcosa di straordinario.

Concetti Chiave

Formato Binario: I moduli sono distribuiti tipicamente in un formato binario (.wasm files).
Compilazione: Questi moduli sono compilati da linguaggi come C, C++ o Rust.
Importazioni ed Esportazioni: I moduli possono importare funzionalità ed esportare le loro funzioni.

Passo 2: Creare e Utilizzare Moduli WebAssembly

Ora, esploriamo il processo di creazione e utilizzo di un modulo WebAssembly.

2.1 Scrivere il Modulo WebAssembly

Prima, dobbiamo scrivere il nostro modulo. Useremo una semplice funzione C come esempio:

// add.c
int add(int a, int b) {
return a + b;
}

Questa funzione somma due numeri. Semplice, vero? Ma come la trasformiamo in un modulo WebAssembly?

2.2 Compilare in WebAssembly

Per compilare questo in WebAssembly, utilizziamo uno strumento chiamato Emscripten. Ecco il comando:

emcc add.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_add"]' -o add.js

Questo comando crea due file:

add.wasm: Il nostro modulo WebAssembly
add.js: Codice JavaScript di colla per caricare e utilizzare il nostro modulo

2.3 Caricare il Modulo in JavaScript

Ora, vediamo come possiamo utilizzare questo modulo in una pagina web:

<!DOCTYPE html>
<html>
<head>
<title>Funzione Add di WebAssembly</title>
</head>
<body>
<h1>Funzione Add di WebAssembly</h1>
<p>Risultato: <span id="result"></span></p>
<script src="add.js"></script>
<script>
Module.onRuntimeInitialized = async _ => {
const result = Module._add(5, 3);
document.getElementById('result').textContent = result;
};
</script>
</body>
</html>

Spiegazione del Codice

Analizziamo cosa sta succedendo in questo codice:

Includiamo il file add.js, che carica il nostro modulo WebAssembly.
Utilizziamo Module.onRuntimeInitialized per assicurarci che il modulo sia caricato prima di utilizzarlo.
Chiamiamo la nostra funzione add utilizzando Module._add(5, 3).
Il risultato viene visualizzato nella pagina.

Esempio: Un Modulo Più Complesso

Ora che abbiamo visto un esempio semplice, proviamo qualcosa di più complesso. Creeremo un modulo che calcola il fattoriale di un numero.

// factorial.c
int factorial(int n) {
if (n <= 1) return 1;
return n * factorial(n - 1);
}

Compiliamolo allo stesso modo:

emcc factorial.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_factorial"]' -o factorial.js

Ora, utilizziamolo nel nostro HTML:

<!DOCTYPE html>
<html>
<head>
<title>Calcolatore Fattoriale WebAssembly</title>
</head>
<body>
<h1>Calcolatore Fattoriale WebAssembly</h1>
<input type="number" id="input" value="5">
<button onclick="calculateFactorial()">Calcola</button>
<p>Risultato: <span id="result"></span></p>
<script src="factorial.js"></script>
<script>
function calculateFactorial() {
const n = document.getElementById('input').value;
const result = Module._factorial(n);
document.getElementById('result').textContent = result;
}

Module.onRuntimeInitialized = async _ => {
calculateFactorial();
};
</script>
</body>
</html>

Output

Quando eseguite questo in un browser, vedrete un campo di input dove potete inserire un numero. Cliccando il pulsante "Calcola" visualizzerà il fattoriale di quel numero, tutto calcolato utilizzando il nostro modulo WebAssembly!

Conclusione

Complimenti! Avete appena fatto i vostri primi passi nel mondo dei moduli WebAssembly. Abbiamo coperto le basi della creazione, della compilazione e dell'uso dei moduli WebAssembly nelle applicazioni web. Ricordate, questo è solo l'inizio - WebAssembly apre un mondo nuovo di possibilità per lo sviluppo web, permettendo di portare il calcolo ad alte prestazioni nel browser.

Mentre continuate il vostro viaggio, scoprirete come WebAssembly può essere utilizzato per tutto, dai giochi al trattamento di dati complessi. Continuate a sperimentare e non abbiate paura di spingere i limiti di ciò che è possibile nel browser!

Metodo	Descrizione
Module.onRuntimeInitialized	Assicura che il modulo WebAssembly sia completamente caricato prima dell'uso
Module._functionName	Chiama una funzione esportata dal modulo WebAssembly
emcc	Comando del compilatore Emscripten per creare moduli WebAssembly

Ricordate, imparare WebAssembly è come imparare a pedalare una bicicletta - potrebbe sembrare difficile all'inizio, ma con la pratica, inizierete a zoomare in pochissimo tempo. Buon codice!

Credits: Image by storyset

Tutorial precedente:

WebAssembly - "Ciao Mondo"

Prossimo tutorial:

WebAssembly - Validazione