WebAssembly - Lavorare con Node.js

Ciao a tutti, aspiranti programmatori! Oggi ci imbarcheremo in un viaggio emozionante nel mondo di WebAssembly e Node.js. Non preoccupatevi se questi termini vi sembrano lingue aliene - alla fine di questo tutorial, li parlerete fluentemente!

Cos'è WebAssembly?

WebAssembly, spesso abbreviato in Wasm, è come un supereroe nel mondo della programmazione. È un formato di istruzioni binarie che permette a codice scritto in linguaggi come C, C++ e Rust di essere eseguito nei browser a velocità quasi nativa. Immaginate di poter giocare a complessi giochi 3D direttamente nel browser - è proprio questa la potenza che WebAssembly porta sul tavolo!

Perché Node.js?

Ora, potreste essere curiosi, "Che c'entra Node.js con tutto questo?" Beh, Node.js è come il personale di scena che fa avvenire la magia. È un runtime JavaScript che ci permette di eseguire JavaScript fuori dal browser. Quando combiniamo WebAssembly con Node.js, otteniamo il meglio di entrambi i mondi - la velocità di WebAssembly e la versatilità di Node.js.

Configurazione del Nostro Ambiente

Prima di immergerci nel codice, configuriamo il nostro workspace. Non preoccupatevi, è più facile che configurare un nuovo smartphone!

1. Installate Node.js dal sito ufficiale (https://nodejs.org)
2. Aprite il vostro terminale o prompt dei comandi
3. Create una nuova directory per il nostro progetto:

   mkdir wasm-nodejs-tutorial
   cd wasm-nodejs-tutorial

4. Inizializzate un nuovo progetto Node.js:

   npm init -y

Ottimo! Ora siamo pronti per iniziare a programmare.

Il Tuo Primo Modulo WebAssembly

Creiamo un semplice modulo WebAssembly che somma due numeri. Lo scriveremo in C e lo compileremo in WebAssembly.

Passo 1: Scrivere il codice C

Create un file chiamato add.c con il seguente contenuto:

#include <emscripten.h>

EMSCRIPTEN_KEEPALIVE
int add(int a, int b) {
return a + b;
}

Non panicate se questo sembra geroglifici! Analizziamo:

• #include <emscripten.h> include la libreria Emscripten, che ci aiuta a compilare C in WebAssembly.
• EMSCRIPTEN_KEEPALIVE è una direttiva speciale che dice al compilatore di mantenere questa funzione accessibile da JavaScript.
• int add(int a, int b) è la nostra funzione che accetta due interi e restituisce la loro somma.

Passo 2: Compilare in WebAssembly

Per compilare questo codice C in WebAssembly, dobbiamo installare Emscripten. Seguite le istruzioni di installazione sul sito di Emscripten (https://emscripten.org/docs/getting_started/downloads.html).

Una volta installato, eseguite questo comando:

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

Questo comando compila il nostro codice C in WebAssembly e crea due file: add.wasm e add.js.

Utilizzare WebAssembly in Node.js

Ora arrivesi la parte entusiasmante - utilizzare il nostro modulo WebAssembly in Node.js!

Create un file chiamato index.js con il seguente contenuto:

const fs = require('fs');
const path = require('path');

const wasmBuffer = fs.readFileSync(path.join(__dirname, 'add.wasm'));

WebAssembly.instantiate(wasmBuffer).then(wasmModule => {
const add = wasmModule.instance.exports._add;
console.log('5 + 3 =', add(5, 3));
});

Analizziamo:

1. Importiamo i moduli Node.js necessari: fs per le operazioni sul sistema dei file e path per lavorare con i percorsi dei file.
2. Leggiamo il file WebAssembly in un buffer.
3. Utilizziamo WebAssembly.instantiate() per caricare e compilare il nostro modulo WebAssembly.
4. Una volta caricato, possiamo accedere alla nostra funzione add tramite wasmModule.instance.exports._add.
5. Infine, chiamiamo la nostra funzione e registriamo il risultato.

Eseguite questo script con:

node index.js

Se tutto è andato bene, dovreste vedere: 5 + 3 = 8

Congratulazioni! Avete appena eseguito il vostro primo modulo WebAssembly in Node.js!

Confronto delle Prestazioni

Ora confrontiamo le prestazioni della nostra funzione WebAssembly con una funzione JavaScript nativa.

Aggiungete questo al vostro index.js:

function jsAdd(a, b) {
return a + b;
}

const iterations = 1000000;

console.time('WebAssembly');
for (let i = 0; i < iterations; i++) {
add(5, 3);
}
console.timeEnd('WebAssembly');

console.time('JavaScript');
for (let i = 0; i < iterations; i++) {
jsAdd(5, 3);
}
console.timeEnd('JavaScript');

Questo codice esegue sia la versione WebAssembly che la versione JavaScript della nostra funzione di somma un milione di volte e misura quanto tempo richiede ciascuna.

Eseguite di nuovo lo script, e molto probabilmente vedrete che la versione WebAssembly è più veloce!

Conclusione

Abbiamo solo sfiorato la superficie di ciò che è possibile con WebAssembly e Node.js. Immaginate le possibilità - potreste utilizzare algoritmi complessi scritti in C o Rust, motori di gioco, o persino intere applicazioni, tutte eseguite a velocità quasi nativa in Node.js!

Ricordate, imparare a programmare è come imparare a guidare una bicicletta. All'inizio potrebbe sembrare instabile, ma con la pratica, diventerete rapidi. Continuate a sperimentare, continuate a imparare e, soprattutto, divertitevi!

Ecco una tabella che riassume i principali metodi che abbiamo utilizzato:

Metodo	Descrizione
WebAssembly.instantiate()	Compila e istanzia un modulo WebAssembly
fs.readFileSync()	Legge un file synchronous
path.join()	Unisce segmenti di percorso
console.time()	Inizia un timer
console.timeEnd()	Termina un timer e 注册 la durata

Buon divertimento con il codice, futuri maghi di WebAssembly!

Credits: Image by storyset