Italiano

Tutorial WebAssembly

Tutorial WebAssembly: Guida per Principianti

Ciao a tutti, futuri maghi di WebAssembly! Sono entusiasta di essere il vostro guida in questo emozionante viaggio nel mondo di WebAssembly. Come qualcuno che ha insegnato scienze informatiche per più anni di quanti ne vorrei ammettere (diciamo solo che ricordo quando i dischetti erano davvero flessibili), sono qui per rendere questa avventura il più possibile divertente e accessibile. Allora, prendete la vostra bevanda preferita, fatevi comodi e tuffiamoci!

WebAssembly - Home

Cos'è WebAssembly?

Immaginate di costruire un castello di sabbia. JavaScript è come usare le mani - è flessibile e facile da iniziare, ma potrebbe non essere il modo più veloce per costruire una massiccia fortezza. WebAssembly, dall'altra parte, è come avere un set di strumenti specializzati - potrebbe richiedere un po' più di configurazione, ma boy, può costruire cose velocemente!

WebAssembly, spesso abbreviato come Wasm, è un formato di istruzioni binarie progettato per un'esecuzione efficiente nei browser web. È come un codice segreto che il vostro browser capire, permettendo ai programmi di funzionare a velocità quasi nativa.

Perché Dovreste Preoccuparvi?

  1. Velocità: WebAssembly è fulmineo. È come passare da una bicicletta a una macchina sportiva per le vostre applicazioni web.
  2. Diversità di Linguaggi: Non siete più limitati a JavaScript. C, C++, Rust - portateli tutti!
  3. Sicurezza: WebAssembly funziona in un ambiente sandboxed, mantenendo le cose sicure.

Iniziare con WebAssembly

Configurazione dell'Ambiente di Sviluppo

Prima di iniziare a programmare, dobbiamo configurare il nostro spazio di lavoro. È come preparare la cucina prima di cucinare un pasto gourmet. Ecco cosa ci serve:

  1. Un browser web moderno (Chrome, Firefox, Safari o Edge)
  2. Un editor di testo (Consiglio Visual Studio Code, ma usate quello con cui vi sentite a vostro agio)
  3. Il toolkit Emscripten (lo installeremo insieme)

Installiamo Emscripten:

# Cloniamo il repository di Emscripten
git clone https://github.com/emscripten-core/emsdk.git

# Entriamo nella directory clonata
cd emsdk

# Scarichiamo e installiamo gli strumenti SDK più recenti
./emsdk install latest

# Attiviamo gli strumenti SDK più recenti
./emsdk activate latest

# Configuriamo le variabili d'ambiente
source ./emsdk_env.sh

Non preoccupatevi se questo sembra un gergo attuale. Pensatelo come preparare il vostro cavalletto e i vostri colori prima di creare un capolavoro!

Il Tuo Primo Programma WebAssembly

Iniziamo con un semplice programma "Ciao, Mondo!". Scriveremo in C e poi lo compileremo in WebAssembly.

Passo 1: Scrivere il Codice C

Create un file chiamato hello.c e aggiungete il seguente codice:

#include <stdio.h>

int main() {
printf("Ciao, Mondo WebAssembly!\n");
return 0;
}

Questo è come scrivere una lettera che vamos a tradurre in un linguaggio che il nostro browser capisce.

Passo 2: Compilare in WebAssembly

Ora, trasformiamo il nostro codice C in WebAssembly. Eseguite questo comando nel vostro terminale:

emcc hello.c -s WASM=1 -o hello.html

Questo comando è come mettere la nostra lettera in una macchina magica di traduzione. Cela crea tre file:

  • hello.wasm: Il binario WebAssembly
  • hello.js: Il codice JavaScript di colla
  • hello.html: Il file HTML per eseguire il nostro programma

Passo 3: Eseguire il Programma WebAssembly

Aprite il file hello.html nel vostro browser. Dovreste vedere "Ciao, Mondo WebAssembly!" stampato sulla pagina. Congratulazioni! Avete appena eseguito il vostro primo programma WebAssembly!

Capire la Magia

Analizziamo cosa è successo:

  1. Abbiamo scritto un semplice programma C.
  2. Abbiamo usato Emscripten per compilare il nostro codice C in WebAssembly.
  3. Emscripten ha anche generato del codice JavaScript per caricare ed eseguire il nostro WebAssembly.
  4. Il browser ha eseguito il nostro codice WebAssembly, stampando il nostro messaggio.

È come se avessimo scritto una lettera in inglese (C), la tradotta in una lingua universale (WebAssembly), e poi avuto un interprete (JavaScript) leggerla ad alta voce in modo che tutti (il browser) potessero capirla.

Andare Avanti: Un Semplice Calcolatore

Ora che abbiamo fatto i nostri primi passi, proviamo qualcosa di più interattivo. Creiamo un semplice calcolatore che somma due numeri.

Passo 1: Scrivere il Codice C

Create un nuovo file chiamato calculator.c:

#include <emscripten.h>

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

Qui, EMSCRIPTEN_KEEPALIVE è come mettere una grande etichetta "IMPORTANTE" sulla nostra funzione. Dice a Emscripten di mantenere questa funzione disponibile per JavaScript per chiamarla.

Passo 2: Compilare in WebAssembly

Compiliamo il nostro calcolatore:

emcc calculator.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_add"]' -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]' -o calculator.js

Questo comando è un po' più complesso, ma pensatelo come dare istruzioni specifiche alla nostra macchina di traduzione.

Passo 3: Creare l'Interfaccia HTML

Create un file chiamato calculator.html:

<!DOCTYPE html>
<html>
<head>
<title>Calcolatore WebAssembly</title>
</head>
<body>
<h1>Calcolatore WebAssembly</h1>
<input type="number" id="num1" placeholder="Inserisci il primo numero">
<input type="number" id="num2" placeholder="Inserisci il secondo numero">
<button onclick="calculateSum()">Add</button>
<p>Risultato: <span id="result"></span></p>

<script src="calculator.js"></script>
<script>
Module.onRuntimeInitialized = function() {
window.add = Module.cwrap('add', 'number', ['number', 'number']);
}

function calculateSum() {
var num1 = parseInt(document.getElementById('num1').value);
var num2 = parseInt(document.getElementById('num2').value);
var sum = add(num1, num2);
document.getElementById('result').textContent = sum;
}
</script>
</body>
</html>

Questo file HTML è come creare un'interfaccia utente friendly per il nostro calcolatore. Ha caselle di input per i nostri numeri e un pulsante per avviare il calcolo.

Passo 4: Eseguire il Calcolatore WebAssembly

Aprite il file calculator.html nel vostro browser. Dovreste vedere due caselle di input e un pulsante "Add". Inserite due numeri, cliccate "Add" e voilà! Il vostro calcolatore WebAssembly in azione!

Conclusione

Ecco fatto, gente! Abbiamo fatto i nostri primi passi nel mondo emozionante di WebAssembly. Abbiamo configurato il nostro ambiente, creato un programma "Ciao, Mondo!" e persino costruito un semplice calcolatore.

Ricordate, imparare WebAssembly è come imparare a guidare una bicicletta. Potrebbe sembrare un po' instabile all'inizio, ma con pratica, diventerete esperti in nessun tempo. Continuate a sperimentare, continuate a imparare e, surtout, divertitevi!

Nella prossima lezione, esploreremo più a fondo le capacità di WebAssembly e vedremo come ottimizzare le prestazioni. Fino a quel momento, buone codifiche!

Credits: Image by storyset

 
Prossimo tutorial:
WebAssembly - Panoramica