0Pricing
Learn Rust Coding · Lezione

Da Rust a WebAssembly (WASM)

Compili il codice Rust in WebAssembly, consentendo l’esecuzione di moduli ad alte prestazioni nei browser e in altri runtime WASM.

Da Rust a WebAssembly (WASM) è una lezione Learn Rust Coding gratuita su CoddyKit. Questa è la lezione 2 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Learn Rust Coding, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Learn Rust Coding include 3 lezioni in totale.

Che cos'è WebAssembly (WASM)?

WebAssembly, o WASM, è un formato di istruzioni binarie per una macchina virtuale basata su stack. È progettato come destinazione di compilazione portabile per linguaggi di alto livello come Rust, C/C++ e Go.

Lo si può considerare un linguaggio di basso livello simile all'assembly, che viene eseguito in modo efficiente nei browser web e in altri ambienti. Consente di eseguire codice critico per le prestazioni a velocità quasi native.

I vantaggi di Rust per WASM

Rust è una scelta eccellente per lo sviluppo WebAssembly grazie ai suoi punti di forza:

  • Prestazioni: Rust è noto per la sua velocità, paragonabile a quella di C/C++.
  • Sicurezza della memoria: il sistema di proprietà di Rust previene i bug comuni senza un garbage collector.
  • Binari di piccole dimensioni: il runtime minimale di Rust produce moduli WASM compatti.
  • Strumenti: offre un eccellente supporto con strumenti come wasm-pack e wasm-bindgen.

Configurare gli strumenti WASM

Per compilare Rust in WebAssembly, utilizzerà principalmente wasm-pack. È uno strumento da riga di comando che gestisce l'intero processo di compilazione.

Utilizzerà anche wasm-bindgen, un crate Rust e uno strumento CLI che facilita le interazioni di alto livello tra i moduli WASM e JavaScript.

Per installare wasm-pack, apra il terminale ed esegua:

cargo install wasm-pack

Il primo progetto WASM

Creiamo un nuovo progetto Rust adattato a WebAssembly. Useremo cargo generate con un template specifico:

cargo install cargo-generate
cargo generate --git https://github.com/rustwasm/wasm-pack-template

Segua le istruzioni per assegnare un nome al progetto. In questo modo verrà configurato un file lib.rs pronto per il codice WASM e una directory www per una semplice interfaccia web.

Una funzione Rust per JavaScript

Per rendere una funzione Rust chiamabile da JavaScript, usiamo l'attributo #[wasm_bindgen] del crate wasm-bindgen.

Questo attributo indica a wasm-bindgen di generare il codice di collegamento necessario affinché JavaScript possa interagire con la funzione Rust.

use wasm_bindgen::prelude::*;

// This attribute makes the `greet` function available to JavaScript.
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

// In a WASM library, `main` is not used. This code is compiled to a .wasm module.

Integrare WASM con JavaScript

Dopo aver scritto il codice Rust, lo si compila in un modulo WASM usando wasm-pack build. Questo comando crea una directory pkg con il file .wasm e il codice JS di collegamento.

Nel codice JavaScript è quindi possibile importare e usare facilmente le funzioni Rust esportate:

// www/index.js (simplified)
import { greet } from "../pkg/your_project_name"; // Adjust path

// Call the Rust function
const message = greet("CoddyKit Learner");
console.log(message); // Outputs: "Hello, CoddyKit Learner!"

// You'd typically connect this to HTML elements.

Rust chiama JavaScript

Rust può anche chiamare funzioni JavaScript. Le si dichiarano in un blocco extern "C" e si usa #[wasm_bindgen] per associarle a oggetti o funzioni globali JS.

L'argomento js_namespace consente di specificare dove trovare la funzione nell'ambiente JavaScript, ad esempio nell'oggetto console.

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern "C" {
    // Import JS console.log as a Rust function named 'log'
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);

    // You can import other JS functions too
    #[wasm_bindgen(js_name = alert)]
    fn js_alert(s: &str);
}

#[wasm_bindgen]
pub fn log_and_alert_from_rust(message: &str) {
    log(&format!("Rust log: {}", message));
    js_alert(&format!("Rust alert: {}", message));
}

Passare stringhe tra Rust e JS

wasm-bindgen gestisce in modo intelligente i tipi di dati comuni, come numeri e valori booleani. Per le stringhe usa la codifica UTF-8.

Quando si passa un &str o una String da Rust, wasm-bindgen lo converte in una String JavaScript e viceversa. Questa astrazione rende fluida l'interoperabilità.

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn uppercase_and_reverse(s: String) -> String {
    s.to_uppercase().chars().rev().collect()
}

// This function takes a String, processes it, and returns a new String.
// wasm-bindgen handles the conversion to/from JS strings.

WASM al di fuori del browser

Sebbene sia spesso associato ai browser web, WebAssembly non è limitato a questi ambienti! Esistono runtime WASM per molti ambienti, aprendo nuove possibilità:

  • Funzioni serverless: distribuire funzioni rapide e isolate.
  • Blockchain: eseguire smart contract.
  • Plugin/estensioni: estendere le applicazioni in modo sicuro.
  • Applicazioni desktop: incorporare moduli ad alte prestazioni.

Questo amplia la portata di Rust ben oltre la tradizionale programmazione di sistema.

Concetti chiave di WebAssembly

Verifichiamo la Sua comprensione di Rust e WebAssembly.

Riepilogo: da Rust a WASM

Ha imparato a portare le prestazioni e la sicurezza di Rust in WebAssembly!

  • WASM fornisce un runtime rapido e portabile per il codice compilato.
  • Rust è particolarmente adatto a WASM grazie alle sue prestazioni, ai binari di piccole dimensioni e alla sicurezza.
  • Strumenti come wasm-pack e wasm-bindgen semplificano il processo di sviluppo.
  • È possibile esportare facilmente funzioni Rust in JavaScript e importare funzioni JavaScript in Rust.
  • Le applicazioni di WASM vanno ben oltre i semplici browser web.

Continui a esplorare per creare applicazioni potenti e ad alte prestazioni, sia web sia non web, con Rust!

Domande Frequenti

La lezione «Da Rust a WebAssembly (WASM)» è gratuita?

Sì — il testo completo di «Da Rust a WebAssembly (WASM)» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Learn Rust Coding, passa a CoddyKit PRO. Il corso Learn Rust Coding include 3 lezioni in totale.

Cosa imparerò in «Da Rust a WebAssembly (WASM)»?

Compili il codice Rust in WebAssembly, consentendo l’esecuzione di moduli ad alte prestazioni nei browser e in altri runtime WASM. Eserciti Learn Rust Coding con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Learn Rust Coding?

Non è richiesta alcuna esperienza precedente. Learn Rust Coding su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 3.

Quanto tempo richiede la lezione «Da Rust a WebAssembly (WASM)»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Learn Rust Coding?

Sì. Ogni lezione Learn Rust Coding include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Foreign Function Interface (FFI)
  2. Da Rust a WebAssembly (WASM)
  3. Benchmark e ottimizzazione delle prestazioni
← Torna a Learn Rust Coding