Deutsch

WebAssembly Tutorial

WebAssembly - Arbeit mit Node.js

Hallo da, ambitionierte Programmierer! Heute begeben wir uns auf eine aufregende Reise in die Welt von WebAssembly und Node.js. Keine Sorge, wenn diese Begriffe für dich wie aus einer fremden Sprache klingen - bis zum Ende dieses Tutorials wirst du sie fließend sprechen!

WebAssembly - Working with Nodejs

Was ist WebAssembly?

WebAssembly, oft abgekürzt als Wasm, ist wie ein Superheld in der Programmierwelt. Es ist ein binäres Anweisungsformat, das es ermöglicht, in Sprachen wie C, C++ und Rust geschriebenen Code in Webbrowsern mit nahezu nativer Geschwindigkeit auszuführen. Stell dir vor, komplexe 3D-Spiele direkt im Browser spielen zu können - das ist die Art von Leistung, die WebAssembly auf den Tisch bringt!

Warum Node.js?

Nun könnte man sich fragen, "Was hat Node.js mit all dem zu tun?" Nun, Node.js ist wie das Backstage-Team, das das zauberhafte Geschehen ermöglicht. Es ist eine JavaScript-Laufzeitumgebung, die es uns ermöglicht, JavaScript außerhalb eines Webbrowsers auszuführen. Wenn wir WebAssembly mit Node.js kombinieren, bekommen wir das Beste aus beiden Welten - die Geschwindigkeit von WebAssembly und die Vielseitigkeit von Node.js.

Einrichten unserer Arbeitsumgebung

Bevor wir uns in den Code stürzen, richten wir unsere Arbeitsumgebung ein. Keine Sorge, es ist einfacher als die Einrichtung eines neuen Handys!

  1. Installiere Node.js von der offiziellen Website (https://nodejs.org)
  2. Öffne deinen Terminal oder Kommandozeilen-Editor
  3. Erstelle ein neues Verzeichnis für unser Projekt:
    mkdir wasm-nodejs-tutorial
cd wasm-nodejs-tutorial
  4. Initialisiere ein neues Node.js-Projekt:
    npm init -y

Super! Jetzt sind wir bereit, mit dem Coden zu beginnen.

Dein erstes WebAssembly-Modul

Lass uns ein einfaches WebAssembly-Modul erstellen, das zwei Zahlen addiert. Wir schreiben es in C und kompilieren es zu WebAssembly.

Schritt 1: Schreibe den C-Code

Erstelle eine Datei namens add.c mit folgendem Inhalt:

#include <emscripten.h>

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

Keine Panik, wenn das wie Hieroglyphen aussieht! Lass uns das zusammenbrechen:

  • #include <emscripten.h> inkludiert die Emscripten-Bibliothek, die uns hilft, C in WebAssembly zu kompilieren.
  • EMSCRIPTEN_KEEPALIVE ist eine spezielle Direktive, die dem Compiler mitteilt, diese Funktion zugänglich zu halten.
  • int add(int a, int b) ist unsere Funktion, die zwei Integer annimmt und deren Summe zurückgibt.

Schritt 2: Kompilieren zu WebAssembly

Um diesen C-Code in WebAssembly zu kompilieren, müssen wir Emscripten installieren. Folge den Installationsanweisungen auf der Emscripten-Website (https://emscripten.org/docs/getting_started/downloads.html).

Once installed, run this command:

emcc add.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_add"]' -o add.js

Dieser Befehl kompiliert unseren C-Code in WebAssembly und erstellt zwei Dateien: add.wasm und add.js.

Verwenden von WebAssembly in Node.js

Jetzt kommt der aufregende Teil - die Verwendung unseres WebAssembly-Moduls in Node.js!

Erstelle eine Datei namens index.js mit folgendem Inhalt:

const fs = require('fs');
const path = require('path');

const wasmBuffer = fs.readFileSync(path.join(__dirname, 'add.wasm'));

WebAssembly.instantiate(wasmBuffer).then(wasmModule => {
const add = wasmModule.instance.exports._add;
console.log('5 + 3 =', add(5, 3));
});

Lass uns das zusammenbrechen:

  1. Wir importieren die notwendigen Node.js-Module: fs für Dateisystemoperationen und path für die Arbeit mit Dateipfaden.
  2. Wir lesen die WebAssembly-Datei in einen Puffer.
  3. Wir verwenden WebAssembly.instantiate() um unser WebAssembly-Modul zu laden und zu kompilieren.
  4. Sobald geladen, können wir unsere add-Funktion über wasmModule.instance.exports._add erreichen.
  5. Schließlich rufen wir unsere Funktion auf und protokollieren das Ergebnis.

Führe dieses Skript aus mit:

node index.js

Wenn alles korrekt funktioniert hat, solltest du sehen: 5 + 3 = 8

Glückwunsch! Du hast gerade dein erstes WebAssembly-Modul in Node.js ausgeführt!

Leistungsvergleich

Nun vergleichen wir die Leistung unserer WebAssembly-Funktion mit einer nativen JavaScript-Funktion.

Füge dies zu deinem index.js hinzu:

function jsAdd(a, b) {
return a + b;
}

const iterations = 1000000;

console.time('WebAssembly');
for (let i = 0; i < iterations; i++) {
add(5, 3);
}
console.timeEnd('WebAssembly');

console.time('JavaScript');
for (let i = 0; i < iterations; i++) {
jsAdd(5, 3);
}
console.timeEnd('JavaScript');

Dieser Code führt beide Versionen unserer add-Funktion eine Million Mal aus und misst, wie lange jede dauert.

Führe das Skript erneut aus, und du wirst wahrscheinlich sehen, dass die WebAssembly-Version schneller ist!

Schlussfolgerung

Wir haben nur die Oberfläche dessen angerissen, was mit WebAssembly und Node.js möglich ist. Stell dir die Möglichkeiten vor - du könntest komplexe Algorithmen in C oder Rust, Spiel-Engines oder sogar ganze Anwendungen verwenden, die alle mit nahezu nativer Geschwindigkeit in Node.js laufen!

Denke daran, das Lernen zu programmieren ist wie das Fahrradfahren zu lernen. Am Anfang mag es wacklig sein, aber mit Übung wirst du很快 davonfliegen. Weiter experimentieren, weiter lernen und vor allem: Spaß haben!

Hier ist eine Tabelle, die die Hauptmethoden zusammenfasst, die wir verwendet haben:

Methode Beschreibung
WebAssembly.instantiate() Kompiliert und instanziert ein WebAssembly-Modul
fs.readFileSync() Liest eine Datei synchron
path.join() Verbindet Pfadsegmente
console.time() Startet einen Timer
console.timeEnd() Beendet einen Timer und protokolliert die Dauer

Happy Coding, zukünftige WebAssembly-Zauberer!

Credits: Image by storyset

Vorheriges Tutorial:
WebAssembly - Arbeit mit Go