Rust + WebAssembly: Einstieg für Webentwickler

Einleitung

WebAssembly (kurz: Wasm) gilt als eine der spannendsten Technologien im modernen Web. Es ermöglicht, Code in Hochsprachen wie Rust, C++ oder Go zu schreiben und ihn dann direkt im Browser mit nahezu nativer Geschwindigkeit auszuführen.

Doch warum sollte man sich als Freelancer oder Webentwickler damit beschäftigen? Ganz einfach: WebAssembly erweitert JavaScript um Performance, Sicherheit und Wiederverwendbarkeit. Dinge, die bisher nur auf dem Server möglich waren – wie Bildbearbeitung, komplexe Berechnungen oder PDF-Erstellung – können nun direkt im Browser stattfinden.

In dieser Artikelreihe möchte ich zeigen, wie man mit Rust und WebAssembly praxisnahe Projekte umsetzt. In Teil 1 starten wir mit einem soliden Einstieg: von der Einrichtung der Toolchain bis zu einer kleinen interaktiven Demo, die Rust-Funktionen im Browser ausführt.

Warum Rust + WebAssembly?

Rust ist in der WebAssembly-Welt besonders beliebt – und das aus guten Gründen:

Performance: Rust wird in Maschinencode (bzw. Wasm-Bytecode) kompiliert, was zu sehr schnellen Programmen führt.

Speichersicherheit: Anders als C oder C++ verhindert Rust ganze Klassen von Bugs (Buffer Overflows, Use-after-Free).

Ökosystem: Mit Tools wie wasm-pack oder wasm-bindgen ist die Integration in Webprojekte einfach.

Zukunftssicherheit: Rust ist bei großen Playern wie Cloudflare, Mozilla, Shopify oder Figma längst im Einsatz.

Für Freelancer bedeutet das: Man kann mit Rust+Wasm Projekte umsetzen, die bisher “zu groß” wirkten – sei es Bildoptimierung für Shops, Datenverarbeitung direkt im Browser oder kleine Edge-APIs.

Voraussetzungen & Setup

Bevor wir loslegen, brauchen wir ein paar Tools:

Rust installieren

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

Target für WebAssembly hinzufügen

rustup target add wasm32-unknown-unknown

wasm-pack installieren

cargo install wasm-pack

Node.js & npm – nötig, um das Wasm-Modul im Browser zu testen.

Damit sind wir startklar.

Unser erstes Rust + Wasm Projekt

Projekt anlegen

Wir starten mit einem neuen Projekt:

cargo new wasm-intro --lib
cd wasm-intro

Cargo.toml anpassen

Damit Rust für Wasm kompiliert werden kann, müssen wir im Cargo.toml ein paar Dinge einstellen:

[package]
name = "wasm_intro"
version = "0.1.0"
edition = "2021"

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

[dependencies]
wasm-bindgen = "0.2"

Rust-Code schreiben

Nun schreiben wir unsere erste Rust-Funktion, die später aus JavaScript heraus aufrufbar ist:

use wasm_bindgen::prelude::*;

/// Diese Funktion wird später aus JavaScript heraus aufgerufen
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hallo, {}! Willkommen bei Rust + WebAssembly", name)
}

Kompilieren & Build mit wasm-pack

Jetzt lassen wir Rust nach WebAssembly übersetzen:

wasm-pack build --target web

Wenn alles klappt, entsteht im Ordner pkg/ ein fertiges Paket mit:

wasm_intro_bg.wasm → unser kompiliertes Rust-Modul
wasm_intro.js → automatisch erzeugte JavaScript-Bindings

Integration in HTML

Damit wir das Modul im Browser ausprobieren können, legen wir eine kleine index.html an:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Rust + Wasm Intro</title>
  </head>
  <body>
    <h1>Rust + WebAssembly Demo</h1>
    <input id="name" placeholder="Dein Name">
    <button id="btn">Sag Hallo</button>
    <p id="output"></p>

    <script type="module">
      import init, { greet } from "./pkg/wasm_intro.js";

      async function run() {
        await init();
        document.getElementById("btn").addEventListener("click", () => {
          const name = document.getElementById("name").value;
          document.getElementById("output").textContent = greet(name);
        });
      }

      run();
    </script>
  </body>
</html>

Projekt starten

Wir brauchen nur noch einen kleinen lokalen Webserver:

npx serve .

Öffne den Browser unter http://localhost:5000 und probiere es aus: Gib deinen Namen ein, klicke auf den Button – und der Grußtext kommt direkt aus Rust + WebAssembly.

Debugging & Development Tools

Für die Entwicklung sind ein paar zusätzliche Tools hilfreich:

# Für bessere Debugging-Informationen
cargo install wasm-pack

# Optional: wasm-bindgen CLI für erweiterte Features
cargo install wasm-bindgen-cli

Im Browser kannst du die Developer Tools nutzen, um das WebAssembly-Modul zu inspizieren:

Öffne die DevTools (F12)
Gehe zum “Sources” oder “Debugger” Tab
Du findest das .wasm Modul und kannst es sogar debuggen!

Was passiert hier eigentlich?

Der Rust-Code wurde nach .wasm kompiliert.
wasm-bindgen hat dafür JavaScript-Bindings erzeugt.
Im Browser lädt JavaScript das Wasm-Modul und ruft die Rust-Funktion auf.
Ergebnis: Wir kombinieren die Flexibilität von JavaScript mit der Performance & Sicherheit von Rust.

Performance-Beispiel: Fibonacci

Um die Performance von WebAssembly zu demonstrieren, erweitern wir unser Beispiel um eine rechenintensive Funktion:

#[wasm_bindgen]
pub fn fibonacci_wasm(n: u32) -> u64 {
    match n {
        0 => 0,
        1 => 1,
        _ => fibonacci_wasm(n - 1) + fibonacci_wasm(n - 2)
    }
}

#[wasm_bindgen]
pub fn fibonacci_optimized(n: u32) -> u64 {
    let mut a = 0u64;
    let mut b = 1u64;
    for _ in 0..n {
        let temp = a + b;
        a = b;
        b = temp;
    }
    a
}

Und die entsprechende JavaScript-Version zum Vergleich:

function fibonacciJS(n) {
    if (n <= 1) return n;
    return fibonacciJS(n - 1) + fibonacciJS(n - 2);
}

Ergebnis: Bei fibonacci(40) ist die Rust-Version oft 2-5x schneller als JavaScript!

Häufige Probleme & Lösungen

CORS-Probleme beim lokalen Development

Falls du Fehler wie “CORS policy” siehst:

# Statt npx serve verwende:
python3 -m http.server 8000
# oder
npx http-server --cors

Größe der WASM-Datei optimieren

Standardmäßig sind WASM-Dateien recht groß. Für Produktion:

# Optimierte Builds mit kleinerer Dateigröße
wasm-pack build --target web --release

# Noch kleiner mit wee_alloc
# In Cargo.toml ergänzen:
# wee_alloc = { version = "0.4.5", default-features = false }

Memory Management zwischen JS und Rust

Wichtig: Strings und Arrays zwischen JS und Rust benötigen besondere Aufmerksamkeit:

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn process_array(input: &[u8]) -> Vec<u8> {
    // Verarbeitung der Daten
    input.iter().map(|&x| x * 2).collect()
}

Ausblick auf die Serie

Das war unser Einstieg – klein, aber sehr mächtig. In den nächsten Artikeln schauen wir uns praxisnahe Szenarien an, z. B.:

Bildoptimierung im Browser (Rust-Crate image).
PDF-Generierung direkt in Web-Apps.
Volltextsuche mit Rust+Wasm (statt ElasticSearch).
Checkout-Logik für E-Commerce-Shops.
Datenbanken (SQLite im Browser).

Jeder Artikel wird ein fertiges Mini-Projekt mit GitHub-Repo enthalten, sodass du den Code direkt verwenden oder erweitern kannst.

Was wir erreicht haben

Rust + WebAssembly eröffnet Webentwicklern völlig neue Möglichkeiten:

Rechenintensive Aufgaben wandern in den Browser.
Sicherheit und Performance liegen deutlich über klassischem JavaScript.
Freelancer können damit Services anbieten, die sonst nur mit großen Backends möglich waren.

Dieser erste Artikel hat den Grundstein gelegt. Mit nur wenigen Zeilen Code haben wir eine Rust-Funktion im Browser ausgeführt. Ab jetzt steigen wir tiefer ein – und bringen WebAssembly in echte Praxisprojekte.

Weitere Ressourcen

Offizielle Dokumentation

Tools & Crates für WebAssembly

trunk: Build-Tool für Rust Web-Apps
yew: React-ähnliches Framework für Rust im Browser
wasm-bindgen: Bindings zwischen Rust und JavaScript
js-sys: Rust-Bindings für Web-APIs
web-sys: Rust-Bindings für DOM-APIs

Performance & Debugging

twiggy: Analysiere WASM-Dateigrößen
wasm-opt: Optimiere WASM-Dateien
Chrome DevTools: Native WASM-Debugging-Unterstützung

Praxis-Beispiele

Figma: 3x schnellere Ladezeiten durch WASM
Shopify: WASM in E-Commerce
Cloudflare Workers: WASM an der Edge

Insights