Deutsch

WebAssembly Tutorial

WebAssembly-Tutorial: Ein Anfängerleitfaden

Hallo da draußen, zukünftige WebAssembly-Zauberer! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt der WebAssembly zu sein. Als jemand, der already mehr Jahre als Informatiklehrer gearbeitet hat, als ich zugeben möchte (lass uns einfach sagen, ich erinnere mich daran, als Floppy-Disketten wirklich flexibel waren), bin ich hier, um dieses Abenteuer so unterhaltsam und zugänglich wie möglich zu gestalten. Also holt euch eure Lieblingsgetränke, macht es euch gemütlich und taucht ein!

WebAssembly - Home

Was ist WebAssembly?

Stellen Sie sich vor, Sie bauen ein Sandkasten. JavaScript ist wie die Verwendung Ihrer Hände - es ist flexibel und leicht zu beginnen, aber es mag nicht der schnellste Weg sein, um eine riesige Festung zu bauen. WebAssembly andererseits ist wie ein Satz spezialisierte Werkzeuge - es mag etwas mehr Einrichtung erfordern, aber boy, es kann Dinge schnell bauen!

WebAssembly, oft abgekürzt als Wasm, ist ein binäres Anweisungsformat, das für eine effiziente Ausführung in Webbrowsern konzipiert ist. Es ist wie ein Geheimcode, den Ihr Browser versteht, der es Programmen ermöglicht, mit annähernd nativer Geschwindigkeit zu laufen.

Warum sollte es Sie interessieren?

  1. Geschwindigkeit: WebAssembly ist blitzschnell. Es ist wie der Aufstieg von einem Fahrrad auf ein Sportauto für Ihre Webanwendungen.
  2. Sprachenvielfalt: Sie sind nicht mehr auf JavaScript beschränkt. C, C++, Rust - bring sie alle!
  3. Sicherheit: WebAssembly läuft in einer sandboxed Umgebung, hält Dinge sicher und sicher.

Einstieg in WebAssembly

Einrichten Ihrer Entwicklungsumgebung

Bevor wir mit dem Programmieren beginnen, müssen wir unsere Arbeitsumgebung einrichten. Es ist wie das Vorbereiten Ihrer Küche bevor Sie ein Gourmetgericht kochen. Hier ist, was Sie benötigen:

  1. Ein moderner Webbrowser (Chrome, Firefox, Safari oder Edge)
  2. Ein Texteditor (ich empfehle Visual Studio Code, aber verwenden Sie, was Ihnen bequem ist)
  3. Emscripten-Toolkit (wir werden dies gemeinsam installieren)

Lassen Sie uns Emscripten installieren:

# Klonen Sie das Emscripten-Repository
git clone https://github.com/emscripten-core/emsdk.git

# Gehen Sie in das geklonte Verzeichnis
cd emsdk

# Laden und installieren Sie die neuesten SDK-Tools
./emsdk install latest

# Aktivieren Sie die neuesten SDK-Tools
./emsdk activate latest

# Richten Sie die Umgebungsvariablen ein
source ./emsdk_env.sh

Machen Sie sich keine Sorgen, wenn das jetzt wie ein Kauderwelsch aussieht. Denken Sie daran als das Einrichten Ihres Staffele und Ihrer Farben bevor Sie ein Meisterwerk schaffen!

Ihr erstes WebAssembly-Programm

Lassen Sie uns mit einem einfachen "Hallo, Welt!"-Programm beginnen. Wir schreiben es in C und kompilieren es dann in WebAssembly.

Schritt 1: Schreiben Sie den C-Code

Erstellen Sie eine Datei namens hello.c und fügen Sie den folgenden Code hinzu:

#include <stdio.h>

int main() {
printf("Hallo, WebAssembly-Welt!\n");
return 0;
}

Das ist wie das Schreiben eines Briefes, den wir in eine Sprache übersetzen werden, die unser Browser versteht.

Schritt 2: Kompilieren Sie in WebAssembly

Nun lassen Sie uns unseren C-Code in WebAssembly umwandeln. Führen Sie diesen Befehl in Ihrem Terminal aus:

emcc hello.c -s WASM=1 -o hello.html

Dieser Befehl ist wie das Einfügen unseres Briefes in eine magische Übersetzungsmaschine. Es erstellt drei Dateien:

  • hello.wasm: Die WebAssembly-Binärdatei
  • hello.js: JavaScript-Verknüpfungscode
  • hello.html: Eine HTML-Datei, um unser Programm auszuführen

Schritt 3: Führen Sie Ihr WebAssembly-Programm aus

Öffnen Sie die Datei hello.html in Ihrem Webbrowser. Sie sollten "Hallo, WebAssembly-Welt!" auf der Seite sehen. Gratulation! Sie haben gerade Ihr erstes WebAssembly-Programm ausgeführt!

Verständnis der Magie

Lassen Sie uns zusammenbrechen, was gerade passiert ist:

  1. Wir haben ein einfaches C-Programm geschrieben.
  2. Wir haben unseren C-Code mit Emscripten in WebAssembly kompiliert.
  3. Emscripten hat auch einige JavaScript-Code generiert, um unsere WebAssembly auszuführen.
  4. Der Browser hat unseren WebAssembly-Code ausgeführt und unsere Nachricht angezeigt.

Es ist, als hätten wir einen Brief in Englisch (C) geschrieben, ihn in eine universelle Sprache (WebAssembly) übersetzt und dann einen Dolmetscher (JavaScript) gehabt, der ihn laut vorliest, so dass jeder (der Browser) ihn verstehen kann.

Weitermachen: Ein einfacher Rechner

Nun, da wir unsere Füße nass gemacht haben, lassen Sie uns etwas interaktiveres versuchen. Wir werden einen einfachen Rechner erstellen, der zwei Zahlen addiert.

Schritt 1: Schreiben Sie den C-Code

Erstellen Sie eine neue Datei namens calculator.c:

#include <emscripten.h>

EMSCRIPTEN_KEEPALIVE
int add(int a, int b) {
return a + b;
}

Hier ist EMSCRIPTEN_KEEPALIVE wie das Aufkleben eines riesigen "WICHTIG"-Stempels auf unsere Funktion. Es tells Emscripten, diese Funktion verfügbar zu halten, damit JavaScript sie aufrufen kann.

Schritt 2: Kompilieren Sie in WebAssembly

Kompilieren Sie unseren Rechner:

emcc calculator.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_add"]' -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]' -o calculator.js

Dieser Befehl ist etwas komplexer, aber denken Sie daran als das Geben spezifischer Anweisungen an unsere Übersetzungsmaschine.

Schritt 3: Erstellen Sie die HTML-Oberfläche

Erstellen Sie eine Datei namens calculator.html:

<!DOCTYPE html>
<html>
<head>
<title>WebAssembly-Rechner</title>
</head>
<body>
<h1>WebAssembly-Rechner</h1>
<input type="number" id="num1" placeholder="Geben Sie die erste Zahl ein">
<input type="number" id="num2" placeholder="Geben Sie die zweite Zahl ein">
<button onclick="calculateSum()">Addieren</button>
<p>Ergebnis: <span id="result"></span></p>

<script src="calculator.js"></script>
<script>
Module.onRuntimeInitialized = function() {
window.add = Module.cwrap('add', 'number', ['number', 'number']);
}

function calculateSum() {
var num1 = parseInt(document.getElementById('num1').value);
var num2 = parseInt(document.getElementById('num2').value);
var sum = add(num1, num2);
document.getElementById('result').textContent = sum;
}
</script>
</body>
</html>

Diese HTML-Datei ist wie das Erstellen einer benutzerfreundlichen Oberfläche für unseren Rechner. Sie hat Eingabefelder für unsere Zahlen und einen Knopf, um die Berechnung auszulösen.

Schritt 4: Führen Sie Ihren WebAssembly-Rechner aus

Öffnen Sie die Datei calculator.html in Ihrem Browser. Sie sollten zwei Eingabefelder und einen "Addieren"-Knopf sehen. Geben Sie zwei Zahlen ein, klicken Sie auf "Addieren" und voilà! Ihr WebAssembly-Rechner in Aktion!

Schlussfolgerung

Und da haben Sie es, Leute! Wir haben unsere ersten Schritte in die aufregende Welt der WebAssembly gemacht. Wir haben unsere Entwicklungsumgebung eingerichtet, ein "Hallo, Welt!"-Programm erstellt und sogar einen einfachen Rechner gebaut.

Denken Sie daran, das Lernen von WebAssembly ist wie das Fahrradfahren. Es mag am Anfang wacklig sein, aber mit der Übung werden Sie schnell durch die Webentwicklungswelt rasen. Bleiben Sie experimentierfreudig, lernen Sie weiter und vor allem, haben Sie Spaß!

In unserer nächsten Lektion tauchen wir tiefer in die Fähigkeiten von WebAssembly ein und erkunden, wie man die Leistung optimiert. Bis dahin, viel Spaß beim Programmieren!

Methode Beschreibung
emcc Emscripten-Kompiler-Befehl
EMSCRIPTEN_KEEPALIVE Makro, um zu verhindern, dass die Funktion optimiert wird
Module.cwrap Erstellt eine Verknüpfung, um kompilierte C-Funktionen aufzurufen
Module.ccall Ruft eine kompilierte C-Funktion direkt auf

Credits: Image by storyset

 
Nächstes Tutorial:
WebAssembly - Überblick