Deutsch

WebAssembly Tutorial

WebAssembly - Werkzeuge zur Kompilierung in WASM

Hallo da draußen, ambitionierte Programmierer! Ich freue mich sehr, euch durch die aufregende Welt von WebAssembly (WASM) und den Werkzeugen, die wir zur Kompilierung von Code in dieses leistungsstarke Format verwenden, zu führen. Als euer freundlicher Nachbarschaftsinformatiklehrer habe ich unzählige Schüler gesehen, die aufleuchten, wenn sie diese Konzepte begreifen, und ich bin sicher, dass ihr kein Unterschied werdet. Lassen wir gemeinsam diese Reise antreten!

WebAssembly - Tools to Compile to WASM

Was ist WebAssembly?

Bevor wir uns den Werkzeugen zuwenden, lassen Sie uns einen Moment darauf verwenden, zu verstehen, was WebAssembly ist. Stellt euch vor, ihr baut ein Sandkasten. HTML, CSS und JavaScript sind wie der Eimer, die Schaufel und die Sandformen, die ihr verwendet, um eine grundlegende Struktur zu erstellen. WebAssembly? Das ist wie ein hochleistungsfähiges Sandskulpteur-Set, das euch ermöglicht, feine, effiziente Designs zu erstellen, die zuvor auf dem Strand unmöglich waren!

WebAssembly ist ein binäres Instruktionsformat, das es ermöglicht, Code in Sprachen wie C, C++ oder Rust direkt in Webbrowsern mit annähernder_Native-Geschwindigkeit auszuführen. Es ist so, als würde man euren Webanwendungen Superkräfte verleihen!

Nun lassen uns die Werkzeuge erkunden, die uns diese Kraft verleihen.

WebAssembly.studio

Was ist WebAssembly.studio?

WebAssembly.studio ist wie ein Spielplatz für die WebAssembly-Entwicklung. Es ist eine Online-Integrated Development Environment (IDE), die es euch ermöglicht, WebAssembly-Code direkt in eurem Browser zu schreiben, zu kompilieren und auszuführen. Ihr müsst nichts auf eurem Computer installieren!

Wie man WebAssembly.studio verwendet

  1. Öffnet euren Webbrowser und navigiert zu WebAssembly.studio.
  2. Wählt ein Projekttemplate (C, Rust oder AssemblyScript).
  3. Schreibt euren Code im Editor.
  4. Klickt auf die Schaltfläche "Build", um euren Code in WebAssembly zu kompilieren.
  5. Klickt auf "Run", um euren Code in Aktion zu sehen!

Hier ist ein einfaches Beispiel in C:

#include <stdio.h>

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

Nach dem Kompilieren und Ausführen werdet ihr "Hallo, WebAssembly!" in der Konsole sehen. Es ist so einfach!

WebAssembly Explorer

Was ist WebAssembly Explorer?

WebAssembly Explorer ist wie ein magischer Übersetzer für euren Code. Er nimmt C/C++-Code und zeigt euch genau, wie er in WebAssembly umgewandelt aussieht. Es ist perfekt, um zu verstehen, wie euer hoch-Level-Code in WASM-Instruktionen übersetzt wird.

Wie man WebAssembly Explorer verwendet

  1. Besucht WebAssembly Explorer.
  2. Schreibt euren C/C++-Code in der linken Leiste.
  3. Klickt auf "Compile", um die WebAssembly-Ausgabe auf der rechten Seite zu sehen.

Probieren wir ein einfaches Beispiel:

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

Nach dem Kompilieren werdet ihr die WebAssembly-Textformat (WAT) auf der rechten Seite sehen. Es mag zunächst einschüchternd aussehen, aber mit Übung werdet ihr diese niedrigen Level-Anweisungen verstehen!

WASMFiddle

Was ist WASMFiddle?

WASMFiddle ist wie ein Schweizer Army Knife für WebAssembly-Experimente. Es ermöglicht euch, WebAssembly-Code zu schreiben, zu kompilieren und auszuführen und auch zu sehen, wie er mit JavaScript interagiert.

Wie man WASMFiddle verwendet

  1. Geht zu WASMFiddle.
  2. Schreibt euren C-Code in der oberen linken Leiste.
  3. Klickt auf "Build", um in WebAssembly zu kompilieren.
  4. Schreibt JavaScript-Code in der unteren linken Leiste, um mit eurem WASM zu interagieren.
  5. Klickt auf "Run", um die Ergebnisse zu sehen.

Hier ist ein spaßiges Beispiel:

// C-Code
int factorial(int n) {
if (n <= 1) return 1;
return n * factorial(n - 1);
}
// JavaScript-Code
Module.onRuntimeInitialized = () => {
const result = Module._factorial(5);
console.log(`Fakultät von 5 ist: ${result}`);
};

Dies berechnet die Fakultät von 5 mit WebAssembly und zeigt das Ergebnis mit JavaScript an. Cool, oder?

WASM zu WAT

Was ist WASM zu WAT?

WASM zu WAT ist wie ein Entschlüsselungsring für WebAssembly. Es nimmt das binäre WASM-Format und wandelt es in das menschenlesbare WebAssembly-Textformat (WAT) um.

Wie man WASM zu WAT verwendet

Es gibt mehrere Online-Tools für diese Konvertierung. Eine beliebte Option ist das WebAssembly Binary Toolkit (WABT).

  1. Besucht WABT-Demo.
  2. Ladet eure .wasm-Datei hoch oder kopiert den binären Inhalt.
  3. Klickt auf "Convert", um die WAT-Ausgabe zu sehen.

Dies ist äußerst nützlich für das Verständnis und Debuggen von WebAssembly-Code.

WAT zu WASM

Was ist WAT zu WASM?

WAT zu WASM ist der umgekehrte Prozess von WASM zu WAT. Es nimmt das menschenlesbare WAT-Format und wandelt es zurück in das binäre WASM-Format um, das Browser ausführen können.

Wie man WAT zu WASM verwendet

Again, wir können die WABT-Demo dafür verwenden:

  1. Geht zu WABT-Demo.
  2. Schreibt oder kopiert euren WAT-Code.
  3. Klickt auf "Convert", um die WASM-Binärdatei zu generieren.

Hier ist ein einfaches WAT-Beispiel:

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

Dies definiert ein Modul mit einer add-Funktion, die zwei 32-Bit-Integer annimmt und deren Summe zurückgibt.

Vergleich der Werkzeuge

Hier ist ein schneller Vergleich der Werkzeuge, die wir besprochen haben:

Werkzeug Hauptzweck Eingabe Ausgabe Bester für
WebAssembly.studio Entwicklung C, Rust, AssemblyScript WASM Anfänger, schnelle Experimente
WebAssembly Explorer Exploration C/C++ WAT Verständnis der WASM-Generierung
WASMFiddle Experimentation C WASM, JavaScript-Interaktion Testen von WASM-JS-Interaktion
WASM zu WAT Konvertierung WASM WAT Debugging, Verständnis von WASM
WAT zu WASM Konvertierung WAT WASM Erstellung von WASM von Grund auf

Und das war's, Leute! Wir haben die Landschaft der WebAssembly-Werkzeuge durchquert, von Spielplätzen bis hin zu Konvertern. Denkt daran, dass das Erlernen jeder neuen Fähigkeit Zeit und Übung erfordert. Aber mit diesen Werkzeugen an eurer Seite seid ihr gut gerüstet, um eure WebAssembly-Abenteuer zu beginnen.

Also experimentiert mit diesen Werkzeugen, brecht Dinge, repariert sie und vor allem: Habt Spaß! Wer weiß? Die nächste revolutionäre Webanwendung könnte nur ein paar WASM-Anweisungen entfernt sein. Frohes Coden und mögen eure Webanwendungen blitzschnell sein!

Credits: Image by storyset

Vorheriges Tutorial:
WebAssembly - Installation
Nächstes Tutorial:
WebAssembly - Programmstruktur