WebAssembly - WASM: Ein Anfängerguide

Hallo da, zukünftiger Codingsuperstar! Ich freue mich sehr, dein Guide auf dieser aufregenden Reise in die Welt von WebAssembly, kurz WASM, zu sein. Mach dir keine Sorgen, wenn du vorher noch nie eine Zeile Code geschrieben hast – wir werden ganz am Anfang anfangen und gemeinsam aufsteigen. Also hole dir ein Getränk nach deinem Geschmack, setze dich bequem hin und tauchen wir ein!

Was ist WebAssembly?

WebAssembly ist wie eine geheime Sprache, die Webbrowser verstehen. Es ist darauf ausgelegt, Webanwendungen schneller und effizienter laufen zu lassen. Stell dir vor, du versuchst, ein komplexes Videospiel auf einer Webseite zu spielen. Ohne WebAssembly könnte es langsam und unhandlich sein. Aber mit WebAssembly kann es flüssig laufen, fast so, als ob du es auf einer Spielkonsole spielst!

Eine kurze Geschichte

WebAssembly wurde aus dem Wunsch geboren, Webanwendungen leistungsfähiger zu machen. Es wurde erstmals 2015 angekündigt und wird seit 2017 von allen großen Webbrowsern unterstützt. Das ist ziemlich schnell in der Tech-Welt – ein bisschen so, wie schnell deine Lieblings-Sozialen-Medien-App mit neuen Funktionen aktualisiert wird!

Das Stack-Maschinen-Modell

Nun, lassen wir uns über etwas unterhalten, das etwas technisch klingt, aber eigentlich quite einfach ist, wenn man es herunterbricht: das Stack-Maschinen-Modell. Das ist das Herzstück dessen, wie WebAssembly funktioniert.

Was ist eine Stapel?

Stell dir einen Stapel von Tellern vor. Du kannst nur Teller hinzufügen oder von der Oberseite des Stapels entfernen. In Computerterminologie nennen wir das Hinzufügen zum Stapel "pushen" und das Entfernen vom Stapel "popsen".

Wie WebAssembly den Stapel verwendet

WebAssembly nutzt diese Stapelidee, um Operationen durchzuführen. Es ist wie ein sehr effizienter Koch in einer Küche, der immer genau weiß, welchesIngredient (oder welche Zahl, in unserem Fall) als nächstes verwendet werden soll.

Schauen wir uns ein einfaches Beispiel an:

(module
(func $add (param $a i32) (param $b i32) (result i32)
local.get $a
local.get $b
i32.add)
(export "add" (func $add))
)

Keine Panik! Ich weiß, das sieht jetzt wie eine Alien-Sprache aus, aber lassen wir es auseinandernehmen:

1. (module): Das ist so, als ob man sagt "Hier ist ein neues Kochbuch".
2. (func $add ...): Wir definieren eine neue Funktion (oder ein neues Rezept) namens "add".
3. (param $a i32) (param $b i32): Unsere Funktion nimmt zwei Zutaten (Parameter), beide 32-Bit-Ganzzahlen.
4. (result i32): Das Ergebnis wird ebenfalls eine 32-Bit-Ganzzahl sein.
5. local.get $a: Lege die erste Zahl auf die Oberseite unseres Tellers Stapels.
6. local.get $b: Lege die zweite Zahl auf die Oberseite des ersten.
7. i32.add: Addiere die beiden obersten Zahlen und ersetze sie mit dem Ergebnis.

Wenn wir diese Funktion mit 5 und 3 aufrufen, sähe unser Stapel so aus:

1. Beginne mit einem leeren Stapel: []
2. Nach local.get $a: [5]
3. Nach local.get $b: [5, 3]
4. Nach i32.add: [8]

Und voilà! Wir haben zwei Zahlen mit WebAssemblys Stapelmaschinenmodell addiert.

Warum WebAssembly verwenden?

Du könntest dir fragen, "Das klingt kompliziert. Warum nicht einfach JavaScript verwenden?" Eine großartige Frage! WebAssembly hat einige Superkräfte, die es besonders machen:

1. Geschwindigkeit: WebAssembly kann für bestimmte Aufgaben viel schneller als JavaScript laufen.
2. Effizienz: Es verwendet weniger Speicher und verbraucht weniger Leistung.
3. Sprachflexibilität: Du kannst in Sprachen wie C++ oder Rust codieren und es in WebAssembly umwandeln.

Stell dir vor, du baust ein Sandkasten. JavaScript ist wie das Benutzen deiner Hände – flexibel und einfach zu beginnen. WebAssembly ist wie das Besitzen eines Satz von spezialisierten Werkzeugen – es könnte mehr Setup erfordern, aber du kannst viel komplexere und robustere Burgen bauen!

Dein erstes WebAssembly-Programm

Lass uns ein einfaches Programm schreiben, das zwei Zahlen addiert. Wir verwenden eine Sprache namens WAT (WebAssembly Text Format), die eine menschenlesbare Version von WebAssembly ist.

(module
(func $add (param $left i32) (param $right i32) (result i32)
local.get $left
local.get $right
i32.add)
(export "add" (func $add))
)

Das sieht vielleicht vertraut aus – es ist sehr ähnlich zu unserem früheren Beispiel! Hier ist, was es macht:

1. Definiert ein Modul (unser Programm).
2. Erstellt eine Funktion namens $add, die zwei 32-Bit-Ganzzahlen nimmt und eine zurückgibt.
3. Holt die erste Zahl ($left) und legt sie auf den Stapel.
4. Holt die zweite Zahl ($right) und legt sie auf die Oberseite des Ersten.
5. Addiert die beiden Zahlen auf dem Stapel.
6. Exportiert die Funktion, damit wir sie aus JavaScript verwenden können.

Um dies in einer Webseite zu verwenden, brauchen wir etwas JavaScript:

fetch('add.wasm')
.then(response => response.arrayBuffer())
.then(bytes => WebAssembly.instantiate(bytes))
.then(results => {
const add = results.instance.exports.add;
console.log(add(5, 3));  // Ausgabe: 8
});

Dieser Code lädt unser WebAssembly-Modul, erstellt eine Instanz davon und ruft unsere add-Funktion mit den Zahlen 5 und 3 auf.

Fazit

Glückwunsch! Du hast gerade deine ersten Schritte in die Welt von WebAssembly gemacht. Wir haben besprochen, was WebAssembly ist, wie es ein Stapelmaschinenmodell verwendet und sogar unser erstes WebAssembly-Programm geschrieben.

Denke daran, das Lernen von Code ist wie das Lernen einer neuen Sprache oder eines Instruments – es erfordert Übung und Geduld. Lass dich nicht entmutigen, wenn nicht alles sofort klar wird. Halte experimentierfreudig, bleibe neugierig und bevor du es merkst, wirst du erstaunliche Dinge mit WebAssembly bauen!

In unserer nächsten Lektion tauchen wir tiefer in komplexere WebAssembly-Konzepte ein und fangen an, wirklich coole Projekte zu bauen. Bis dahin, viel Spaß beim Coden!

Credits: Image by storyset