Learn Rust Coding · Lektion

Rust zu WebAssembly (WASM)

Kompilieren Sie Rust-Code zu WebAssembly, sodass hochperformante Module in Webbrowsern und anderen WASM-Laufzeitumgebungen ausgeführt werden können.

Rust zu WebAssembly (WASM) ist eine kostenlose Learn Rust Coding-Lektion auf CoddyKit. Dies ist Lektion 2 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Learn Rust Coding-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Learn Rust Coding-Kurs umfasst insgesamt 3 Lektionen.

Was ist WebAssembly (WASM)?

WebAssembly oder WASM ist ein binäres Instruktionsformat für eine stapelbasierte virtuelle Maschine. Es wurde als portables Kompilierungsziel für höhere Programmiersprachen wie Rust, C/C++ und Go entwickelt.

Stellen Sie es sich als hardwarenahe, assemblerähnliche Sprache vor, die in Webbrowsern und anderen Umgebungen effizient ausgeführt wird. Dadurch können Sie leistungskritischen Code mit nahezu nativer Geschwindigkeit ausführen.

Die Vorteile von Rust für WASM

Rust eignet sich aufgrund seiner besonderen Stärken hervorragend für die WebAssembly-Entwicklung:

Leistung: Rust ist für seine hohe Geschwindigkeit bekannt, die der von C/C++ nahekommt.
Speichersicherheit: Das Ownership-System von Rust verhindert häufige Fehler, ohne dass ein Garbage Collector erforderlich ist.
Kleine Binärdateien: Die minimale Laufzeitumgebung von Rust führt zu kompakten WASM-Modulen.
Werkzeuge: Hervorragende Unterstützung durch Werkzeuge wie wasm-pack und wasm-bindgen.

WASM-Werkzeuge einrichten

Um Rust nach WebAssembly zu kompilieren, verwenden Sie hauptsächlich wasm-pack. Dabei handelt es sich um ein Kommandozeilenwerkzeug, das den gesamten Build-Prozess übernimmt.

Außerdem verwenden Sie wasm-bindgen, eine Rust-Crate und ein CLI-Werkzeug, das die Interaktion zwischen WASM-Modulen und JavaScript auf höherer Ebene ermöglicht.

Um wasm-pack zu installieren, öffnen Sie Ihr Terminal und führen Sie Folgendes aus:

cargo install wasm-pack

Ihr erstes WASM-Projekt

Erstellen wir ein neues Rust-Projekt, das für WebAssembly ausgelegt ist. Dazu verwenden wir cargo generate mit einem speziellen Template:

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

Folgen Sie den Anweisungen, um Ihrem Projekt einen Namen zu geben. Dadurch werden eine für WASM-Code vorbereitete Datei lib.rs und ein Verzeichnis www für eine einfache Weboberfläche erstellt.

Rust-Funktion für JavaScript

Damit eine Rust-Funktion aus JavaScript aufgerufen werden kann, verwenden wir das Attribut #[wasm_bindgen] aus der Crate wasm-bindgen.

Dieses Attribut weist wasm-bindgen an, den erforderlichen Glue-Code zu erzeugen, damit JavaScript mit Ihrer Rust-Funktion interagieren kann.

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.

WASM in JavaScript integrieren

Nachdem Sie Ihren Rust-Code geschrieben haben, kompilieren Sie ihn mit wasm-pack build zu einem WASM-Modul. Dieser Befehl erstellt ein Verzeichnis pkg mit Ihrer .wasm-Datei und dem JS-Glue-Code.

Anschließend können Sie die exportierten Rust-Funktionen in Ihrem JavaScript einfach importieren und verwenden:

// 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 ruft JavaScript auf

Rust kann auch JavaScript-Funktionen aufrufen. Sie deklarieren diese in einem extern "C"-Block und verwenden #[wasm_bindgen], um sie JavaScript-globalen Objekten oder Funktionen zuzuordnen.

Mit dem Argument js_namespace geben Sie an, wo die Funktion in der JavaScript-Umgebung zu finden ist, beispielsweise im Objekt 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));
}

Zeichenketten zwischen Rust und JS übergeben

wasm-bindgen verarbeitet gängige Datentypen wie Zahlen und boolesche Werte intelligent. Für Zeichenketten verwendet es die UTF-8-Kodierung.

Wenn Sie ein &str oder String aus Rust übergeben, konvertiert wasm-bindgen es in einen JavaScript-String und umgekehrt. Diese Abstraktion ermöglicht eine reibungslose Interoperabilität.

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 außerhalb des Browsers

WebAssembly wird zwar häufig mit Webbrowsern in Verbindung gebracht, ist aber nicht auf diese beschränkt. WASM-Laufzeitumgebungen gibt es für viele verschiedene Umgebungen, wodurch neue Möglichkeiten entstehen:

Serverlose Funktionen: Schnelle, isolierte Funktionen bereitstellen.
Blockchain: Ausführung von Smart Contracts.
Plugins/Erweiterungen: Anwendungen sicher erweitern.
Desktop-Apps: Leistungsstarke Module einbetten.

Dadurch reicht Rusts Einsatzbereich weit über die traditionelle Systemprogrammierung hinaus.

Zentrale Konzepte von WebAssembly

Überprüfen wir Ihr Verständnis von Rust und WebAssembly.

Zusammenfassung: Rust zu WASM

Sie haben gelernt, wie Sie die Leistung und Sicherheit von Rust zu WebAssembly bringen!

WASM stellt eine schnelle, portable Laufzeitumgebung für kompilierten Code bereit.
Rust eignet sich dank seiner Leistung, kleinen Binärdateien und Sicherheit hervorragend für WASM.
Werkzeuge wie wasm-pack und wasm-bindgen vereinfachen den Entwicklungsprozess.
Sie können Rust-Funktionen einfach für JavaScript exportieren und JavaScript-Funktionen in Rust importieren.
Die Einsatzmöglichkeiten von WASM reichen weit über Webbrowser hinaus.

Erkunden Sie die Möglichkeiten weiter, um mit Rust leistungsstarke Anwendungen für das Web und andere Umgebungen zu entwickeln!

Häufig gestellte Fragen

Ist die Lektion „Rust zu WebAssembly (WASM)“ kostenlos?

Ja — der vollständige Text von „Rust zu WebAssembly (WASM)“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Learn Rust Coding-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Learn Rust Coding-Kurs umfasst insgesamt 3 Lektionen.

Was lerne ich in „Rust zu WebAssembly (WASM)“?

Kompilieren Sie Rust-Code zu WebAssembly, sodass hochperformante Module in Webbrowsern und anderen WASM-Laufzeitumgebungen ausgeführt werden können. Du übst Learn Rust Coding mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Learn Rust Coding zu starten?

Keine Vorkenntnisse erforderlich. Learn Rust Coding auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 3.

Wie lange dauert die Lektion „Rust zu WebAssembly (WASM)“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Learn Rust Coding-Lektion Code schreiben und ausführen?

Ja. Jede Learn Rust Coding-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Learn Rust Coding