WebAssembly und Rust: Erstellung leistungsstarker Webanwendungen

Einführung in WebAssembly und Rust

Moderne Webanwendungen erfordern zunehmend mehr Leistung. JavaScript kommt trotz all seiner Vorteile nicht immer mit rechenintensiven Aufgaben zurecht – Bildverarbeitung, 3D-Rendering, Kryptographie oder Simulationen. Hier kommt WebAssembly (WASM) ins Spiel – ein binäres Befehlsformat, das im Browser mit nahezu nativer Geschwindigkeit ausgeführt wird.

Die Sprache Rust hat sich zu einem der besten Kandidaten für die Erstellung von WASM-Modulen entwickelt: Sie ist sicher, schnell und hat keinen Garbage Collector. In diesem Artikel werden wir uns ansehen, wie man Rust-Code in WebAssembly kompiliert, ihn mit JavaScript verbindet und echte leistungsstarke Webanwendungen erstellt.

Einrichtung der Umgebung für Rust + WASM

Bevor wir Code schreiben, installieren Sie die notwendigen Werkzeuge:

• Rust – installieren Sie es über rustup (offizieller Installer).
• wasm-pack – das Hauptwerkzeug zum Erstellen von WASM-Paketen.
• wasm-bindgen – eine Bibliothek zur Verbindung von Rust und JavaScript.
• Node.js und npm – zum Testen und Erstellen des Frontends.

# Installation von wasm-packcurl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

# Erstellen eines neuen Projektscargo new --lib wasm-examplecd wasm-example

Öffnen Sie nach der Projekterstellung die Datei Cargo.toml und fügen Sie die Abhängigkeiten hinzu:

[lib]crate-type = ["cdylib"]

[dependencies]wasm-bindgen = "0.2"

Unsere erste Funktion in Rust für WebAssembly schreiben

Erstellen wir eine einfache Funktion, die zwei Zahlen addiert und das Ergebnis zurückgibt. In src/lib.rs schreiben wir:

use wasm_bindgen::prelude::*;

#[wasm_bindgen]pub fn add(a: i32, b: i32) -> i32 {    a + b}

Das Attribut #[wasm_bindgen] generiert automatisch einen JavaScript-Wrapper für diese Funktion. Jetzt erstellen wir das Projekt:

wasm-pack build --target web

Nach dem Build erscheinen im Ordner pkg die Dateien: .wasm, .js (Wrapper) und .d.ts (TypeScript-Typen).

Integration mit HTML und JavaScript

Erstellen wir eine einfache HTML-Seite zum Testen:

<!DOCTYPE html><html><head>    <script type="module">        import init, { add } from './pkg/wasm_example.js';

        async function run() {            await init();            console.log('2 + 3 =', add(2, 3)); // 5        }        run();    </script></head><body>    <h1>Rust + WebAssembly funktioniert!</h1></body></html>

Öffnen Sie die Datei über einen lokalen Server (z. B. python3 -m http.server) – in der Browserkonsole sehen Sie das Ergebnis 5.

Arbeiten mit Strings und komplexen Datentypen

WebAssembly arbeitet nur mit Zahlen. Für die Arbeit mit Strings, Arrays und Objekten wird wasm-bindgen verwendet, das die Typen automatisch konvertiert.

Beispiel: Eine Funktion, die einen String zurückgibt

use wasm_bindgen::prelude::*;

#[wasm_bindgen]pub fn greet(name: &str) -> String {    format!("Hallo, {}! Du verwendest Rust + WASM.", name)}

In JavaScript:

import init, { greet } from './pkg/wasm_example.js';

await init();console.log(greet("Alex")); // "Hallo, Alex! Du verwendest Rust + WASM."

Arbeiten mit Arrays (Vec)

Verwenden Sie für die Übergabe von Arrays Vec<T>. Beispiel – eine Funktion, die alle Elemente verdoppelt:

#[wasm_bindgen]pub fn double_numbers(arr: Vec<i32>) -> Vec<i32> {    arr.iter().map(|x| x * 2).collect()}

JavaScript-Code:

const result = double_numbers([1, 2, 3, 4]);console.log(r