Deutsch

WebAssembly Tutorial

WebAssembly - Arbeit mit Rust

Einführung in WebAssembly und Rust

Hallo, zukünftige Programmierer! Heute tauchen wir in eine aufregende Welt ein, in der Webbrowser zu leistungsstarken Plattformen für die Ausführung hoher Leistungsanwendungen werden. Stellen Sie sich vor, komplexe 3D-Spiele oder anspruchsvolle Datenanalysewerkzeuge direkt in Ihrem Browser spielen oder ausführen zu können. Das ist die Magie von WebAssembly, und wir werden lernen, diese Kraft mit der Programmiersprache Rust zu nutzen.

WebAssembly - Working with Rust

Als ich WebAssembly zum ersten Mal entdeckte, fühlte es sich an, als hätte ich eine versteckte Superkraft für die Webentwicklung gefunden. Es ist wie herauszufinden, dass Ihr treuer Fahrrad plötzlich in ein Raumschiff verwandeln kann! Lassen Sie uns gemeinsam diese aufregende Reise antreten.

Was ist WebAssembly?

WebAssembly, oft abgekürzt als Wasm, ist ein binäres Anweisungsformat, das für effiziente Ausführung in Webbrowsern entwickelt wurde. Es ist wie ein geheimes Code, das Browser schnell verstehen und ausführen können. Denken Sie daran als einen Turbo-Boost für Ihre Webanwendungen!

Warum Rust für WebAssembly?

Rust ist eine Programmiersprache, die sowohl leistungsstark als auch sicher ist. Es ist wie ein Sportauto mit den neuesten Sicherheitsfunktionen. Rusts einzigartige Merkmale machen es zu einer hervorragenden Wahl für die WebAssembly-Entwicklung:

  1. Speichersicherheit ohne Müllsammlung
  2. Hohe Leistung
  3. Kleine Binärgröße
  4. Einfache Integration mit JavaScript

Einrichten Ihrer Entwicklungsumgebung

Bevor wir mit dem Programmieren beginnen, müssen wir unsere Arbeitsumgebung vorbereiten. Es ist wie das Einrichten Ihres Ateliers, bevor Sie ein Meisterwerk malen.

Installation von Rust

Zuerst installieren wir Rust. Öffnen Sie Ihr Terminal und führen Sie aus:

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

Dieser Befehl lädt Rust herunter und installiert es. Es ist wie das Pflanzen eines Samens, der zu unserem mächtigen Programmierbaum heranwächst!

Installation von wasm-pack

Als nächstes installieren wir wasm-pack, ein Werkzeug, das uns beim Bau und der Arbeit mit WebAssembly hilft:

cargo install wasm-pack

Denken Sie an wasm-pack als Ihren treuen Assistenten, der immer bereit ist, Ihnen zu helfen, Ihren Rust-Code für das Web zu verpacken.

Ihr erstes Rust- und WebAssembly-Projekt

Nun erstellen wir unser erstes Projekt. Wir beginnen einfach, mit einer Funktion, die zwei Zahlen addiert.

Erstellen des Projekts

Führen Sie im Terminal aus:

cargo new --lib wasm-add
cd wasm-add

Dies erstellt ein neues Rust-Bibliotheksprojekt. Es ist wie das Öffnen eines neuen Notizbuchs, bereit für unsere Programmierabenteuer!

Schreiben von Rust-Code

Öffnen Sie src/lib.rs und ersetzen Sie dessen Inhalt mit:

use wasm_bindgen::prelude::*;

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

Lassen Sie uns das zusammenbrechen:

  • use wasm_bindgen::prelude::*; importiert die notwendigen WebAssembly-Bindings.
  • #[wasm_bindgen] ist wie ein magischer Spruch, der unsere Funktion für JavaScript zugänglich macht.
  • pub fn add(a: i32, b: i32) -> i32 definiert unsere Funktion, die zwei Integer annimmt und deren Summe zurückgibt.

Kompilieren für WebAssembly

Nun transformieren wir unseren Rust-Code in WebAssembly. Führen Sie aus:

wasm-pack build --target web

Dieser Befehl ist wie ein magischer Ofen, der unseren Rust-Code in ein WebAssembly-Leckerbissen backt, das Browser genießen können!

Verwenden Ihres WebAssembly-Moduls in einer Webseite

Nun kommt der aufregende Teil - die Verwendung unseres WebAssembly-Moduls in einer echten Webseite!

Erstellen einer HTML-Datei

Erstellen Sie eine Datei namens index.html im Stammverzeichnis Ihres Projekts mit dem folgenden Inhalt:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Wasm Add</title>
</head>
<body>
<script type="module">
import init, { add } from './pkg/wasm_add.js';

async function run() {
await init();
const result = add(5, 7);
document.body.textContent = `5 + 7 = ${result}`;
}

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

Diese HTML-Datei ist wie eine Bühne, auf der unser WebAssembly-Stern auftritt!

Ausführen Ihrer Webseite

Um Ihre Kreation in Aktion zu sehen, benötigen Sie einen lokalen Webserver. Wenn Sie Python installiert haben, können Sie verwenden:

python -m http.server

Öffnen Sie dann Ihren Browser und navigieren Sie zu http://localhost:8000. Sie sollten "5 + 7 = 12" auf der Seite sehen. Gratulation! Sie haben gerade Rust-Code in Ihrem Webbrowser ausgeführt!

Fortgeschrittene Themen

Nun, da wir unsere Füße nass gemacht haben, tauchen wir tiefer in die Welt von WebAssembly und Rust ein.

Arbeiten mit Strings

Strings sind in WebAssembly etwas komplizierter. Lassen Sie uns eine Funktion erstellen, die einen Benutzer begrüßt:

#[wasm_bindgen]
pub fn greet(name: &str) -> String {
format!("Hello, {}!", name)
}

In JavaScript würden wir es so verwenden:

const greeting = greet("WebAssembly");
console.log(greeting); // Gibt aus: Hello, WebAssembly!

Speicherverwaltung

Eine der Superkräfte von Rust ist seine Speicherverwaltung. Bei der Arbeit mit WebAssembly müssen wir besonders vorsichtig sein. Hier ist eine Funktion, die ein Vektor erstellt und zurückgibt:

#[wasm_bindgen]
pub fn create_array(size: usize) -> Vec<i32> {
let mut v = Vec::with_capacity(size);
for i in 0..size {
v.push(i as i32);
}
v
}

Diese Funktion ist sicher, da Rusts Eigentümlichkeitssystem sicherstellt, dass der Speicher ordnungsgemäß verwaltet wird, auch wenn er von JavaScript verwendet wird!

Schlussfolgerung

Glückwunsch, dass Sie die ersten Schritte in die Welt von WebAssembly und Rust gewagt haben! Wir haben viel Boden cobered, von der Einrichtung Ihrer Umgebung bis hin zur Erstellung und Verwendung von WebAssembly-Modulen. Denken Sie daran, dass wie bei jeder neuen Fähigkeit, die Beherrschung mit der Übung kommt. Also weiter codieren, weiter experimentieren und vor allem: Spaß haben!

Als wir uns abschließen, erinnere ich mich an ein Zitat der berühmten Informatikerin Grace Hopper: "Der schädlichste Satz in der Sprache ist 'Wir haben es immer so gemacht'." WebAssembly und Rust repräsentieren eine neue Denkweise in der Webentwicklung. Nehmen Sie diese Veränderung an, und Sie werden eine Welt voller Möglichkeiten in Ihrer Programmierreise öffnen.

Frohes Coden und möge Ihre WebAssembly-Abenteuer voller Aufregung und Entdeckungen sein!

Credits: Image by storyset

Vorheriges Tutorial:
WebAssembly - Arbeit mit C++
Nächstes Tutorial:
WebAssembly - Arbeit mit Go