Arbeiten mit WebAssembly und Rust: von A bis Z

Einführung in WebAssembly und Rust

WebAssembly (WASM) ist ein binäres Low-Level-Anweisungsformat, das es ermöglicht, hochperformanten Code im Browser mit nahezu nativer Geschwindigkeit auszuführen. Rust ist mit seinem Besitzsystem und dem Fehlen eines Garbage Collectors die ideale Sprache für die Kompilierung in WebAssembly. In diesem Artikel gehen wir den Weg von der Installation der Werkzeuge bis zur Erstellung eines vollwertigen WASM-Moduls in Rust.

Warum gerade Rust? Es bietet sichere Speicherverwaltung, minimale Binärgröße und hervorragende Leistung. In Kombination mit WebAssembly erhalten Sie die Möglichkeit, komplexe Algorithmen, Spiele, Grafikeditoren und sogar vollwertige Anwendungen zu schreiben, die im Browser laufen.

Installation der Werkzeuge und Vorbereitung der Umgebung

Für den Anfang benötigen Sie:

\n
• Rust (installiert über rustup)
\n
• Zielplattform wasm32-unknown-unknown
\n
• Das Werkzeug wasm-pack (Build und Veröffentlichung von WASM)
\n
• Einen einfachen HTTP-Server (z.B. python3 -m http.server)
\n

Installation der Zielplattform und von wasm-pack:

# Installation der Zielplattform für WebAssembly\nrustup target add wasm32-unknown-unknown\n\n# Installation von wasm-pack\ncargo install wasm-pack

Jetzt erstellen wir ein neues Projekt:

cargo new --lib wasm-rust-demo\ncd wasm-rust-demo

Öffnen Sie Cargo.toml und fügen Sie die Abhängigkeit hinzu:

[lib]\ncrate-type = ["cdylib"]\n\n[dependencies]\nwasm-bindgen = "0.2"

Das Flag cdylib gibt an, dass wir eine dynamische Bibliothek erstellen, die mit WebAssembly kompatibel ist.

Schreiben des ersten WASM-Moduls in Rust

Erstellen wir eine einfache Funktion, die aus JavaScript zugänglich ist. Bearbeiten Sie src/lib.rs:

use wasm_bindgen::prelude::*;\n\n#[wasm_bindgen]\npub fn greet(name: &str) -> String {\n    format!("Hallo, {}! Willkommen in der Welt von WebAssembly!", name)\n}\n\n#[wasm_bindgen]\npub fn fibonacci(n: u32) -> u32 {\n    match n {\n        0 => 0,\n        1 => 1,\n        _ => fibonacci(n - 1) + fibonacci(n - 2),\n    }\n}\n\n#[wasm_bindgen]\npub fn add(a: i32, b: i32) -> i32 {\n    a + b\n}

Das Attribut #[wasm_bindgen] ermöglicht das Exportieren von Funktionen nach JavaScript. Beachten Sie: String wird automatisch in einen JavaScript-String konvertiert.

Jetzt bauen wir das Projekt:

wasm-pack build --target web

Nach dem Build erscheinen im Ordner pkg folgende Dateien:

\n
• wasm_rust_demo_bg.wasm — das kompilierte WASM-Modul
\n
• wasm_rust_demo.js — JavaScript-Wrapper für einfachen Import
\n
• wasm_rust_demo.d.ts — TypeScript-Deklarationen
\n

Integration mit JavaScript und HTML

Erstellen Sie eine Datei index.html im Stammverzeichnis des Projekts:

<!DOCTYPE html>\n<html lang="de">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Rust + WebAssembly Demo</title>\n</head>\n<body>\n    <h1>Rust + WebAssembly Beispiel</h1>\n    \n    <div>\n        <h3>Funktion greet</h3>\n        <input type="text" id="nameInput" placeholder="Namen eingeben" value="Welt">\n        <button id="greetBtn">Begrüßen</button>\n        <p id="greetOutput"></p>\n    </div>\n\n    <div>\n        <h3>Fibonacci-Zahlen</h3>\n        <input type="number" id="fibInput" value="10" min="0" max="40">\n        <button id="fibBtn">Berechnen</button>\n        <p id="fibOutput"></p>\n    </div>\n\n    <script type="module">\n        import init, { greet, fibonacci, add } from './pkg/