WebAssembly Tutorial – In 5 Minuten jede JavaScript Webseite schlagen!

Du brauchst ein WebAssembly Tutorial?

Dieser Beitrag soll Dir eine Übersicht für WebAssembly mit einem Tutorial geben.

Ich erkläre Dir, wo WebAssembly Dir bei Deinem Projekt weiterhelfen kann.

Beginnen wir!

Was ist WebAssembly?

WebAssembly ist ein sicheres, portables und maschinennahes Code-Format, welches für die schnelle und effiziente Ausführung auf dem Computer geeignet ist.

Der Code von WebAssembly führt sich direkt auf der Maschine des Nutzers aus.

Steffen Lippke

Die Programmiersprachen wie Java, JavaScript oder Python nutzen einen Zwischenschritt, um den Code zu kompilieren. Das macht die Ausführung langsamer als es notwendig ist.

Java nutzt den Java-Byte Code bevor die Software in Maschinensprache übersetzt wird. Dieser Schritt erhöht die Portabilität der Software, aber verlangsamt die Ausführung.

Neue Möglichkeiten mit Web Assembly?

WebAssembly ist die erste Client-seitige Programmiersprache, die rechenaufwendige Anwendungen ermöglicht. WebAssembly lässt Online-Games und Video-Schnitt aufblühen. Ein Videoschnittprogramm kann den Export des Films maschinennah und mit Multi-Threading erledigen.

WebAssembly ist seit 2017 eine standardisierte Sprache in allen großen Browser-Engines. Das W3C-Konsortium arbeitet an der Verbesserung von WebAssembly, um in neuen Generationen noch mehr Geschwindigkeit zu ermöglichen.

WebAssembly Beispiele

WebAssembly ist nicht nur ein theoretischer Wunsch, sondern einige Entwickler haben WebAssembly in verschiedenen Projekten eingesetzt:

Eine Sammlung von WebAssembly Projekten findest Du unter https://github.com/mbasso/awesome-wasm/

  • Probiere diesen Online Video Encoder aus, um ein Video in ein neues Format umzuwandeln. Du musst keine Software installieren, sondern kannst gleich mit dem Laden der Webseite und Deiner lokalen Rechenpower Videos umwandeln.
  • Etwas Lust aufs Gaming? Du kannst in wenigen Sekunden ein ganzes 3D-Game mit „schicker“ Grafik und Ton auf Deinem Rechner ausführen, ohne 100te von Gigabyte an Daten herunterzuladen.
  • Mozilla hostet einen First Person Shooter, der veranschaulicht, was mit WebAssembly alles möglich ist –
  • Du hast ein Bild, welches zu groß ist? Nutze den Resizer, um Deine Bilder zu verkleinern. Wähle eines der modernen (verlustfreien) Kompressionen aus, um die Dateigröße zu optimieren:

Warum ist WebAssembly schneller als JavaScript?

Ladezeit: Die Wasm-Dateien weisen eine geringe Dateigröße auf, weil dies in Maschinencode geschrieben sind. Die kleiner Dateigröße reduziert die Ladezeit von WebAssembly, was die Ladeperformance der gesamten Webseite verbessert.

Ausführungszeit: Die Ausführungszeit von Wasm entspricht der nativen Ausführungszeit von Maschinencode -20% für die Kapselungen (Sicherheit). WebAssembly berücksichtigt, dass der erstellte Maschinencode sicher ausgeführt wird. Der Overhead reduziert die Leistung um 20%. Ein Parser muss JavaScript erst parsen, dann überprüft ein Compiler, ob ein Routine den generierten Maschinencode noch optimieren kann (TurboFan).

Multi-Threading: JavaScript braucht für die Ausführung des Codes 1 Kern. Dein Computer kann nur 1 Statement gleichzeitig ausführen. Im Gegensatz zu JavaScript, kannst Du mit Wasm die volle Power von Multi-Threading nutzen.

Wann ist WebAssembly eine gute Wahl?

WebAssembly ist kein Wundermittel und auch nicht der beste Ersatz für JavaScript. WebAssembly ist nicht 100 % optimiert, um das HTML Document Object Model (DOM) zu verändern. Der Anwendungsschwerpunkt von Wasm liegt bei anspruchsvollen und rechenintensiven Aufgaben, wie der Bildermanipulation und -generierung.

JavaScript ist notwendig, um Wasm-Funktionen aufzurufen. Einfache Änderungen an der Nutzeroberfläche sollte JavaScript machen, weil die Programmiersprache ursprünglich für diese Anwendung designt wurde.

Tutorial WebAssembly

  1. Installiere Dir den Emsscipten SDK.
  2. Erstelle C-Code mit ein paar Besonderheiten, um diese später in WebAssembly wiederverwenden zu können.
  3. Compiliere den C-Code in das Wasm-Format über den Emsscript SDK.
  4. Erstelle das HTML-Grundgerüst mit einer JavaScript-Funktion, die das Wasm-Format aufruft.
  5. Nutze ein JavaScript-Funktionsaufruf, der den Maschinencode aufruft.

WebAssembley IDE

Zum Testen und Ausprobieren eignet sich das WebAssemby.Studio.

Auf dieser Webseite kannst Du Dir ein HelloWorld Vorlage konfigurieren und kompilieren. Du musst nichts einrichten und kannst direkt mit dem Programmieren beginnen. Die Online-IDE ermöglicht es Dir, den C Code zu schreiben, zu kompilieren und die Webseite anzuzeigen.

Diese Tutorial erweitert das Hello World Projekt mit etwas mehr Code

Dein C-Projekt im Browser

1. Erstelle eine Hello World Vorlage auf https://webAssembly.studio

00 Start- WebAssembly Tutorial Coding Lab Steffen Lippke
00 Start- WebAssembly Tutorial Coding Lab Steffen Lippke

2. Ändere den Programmiercode:

In der Main.c

#include <stdio.h>
#include <sys/uio.h>
#include <math.h>

#define WASM_EXPORT __attribute__((visibility("default")))

/* WASM_EXPORT ist der Marker für JavaScript, sodass dieser diese die Funktion wiederfindet */
WASM_EXPORT
int powerer(int a, int b) {
  /*Du kannnst die volle Power von C in den Funktionen nutzen */
  return pow(a,b);
}


/* Noch eine Funktion für einen JavaScript-Aufruf */
WASM_EXPORT
int squareroot(int a) {
  return sqrt(a);
}


/* Funktion inde JavaScript zu finden ist*/
extern void putc_js(char c);

/* WASM Call - bitte nicht ändenr */ 
WASM_EXPORT
size_t writev_c(int fd, const struct iovec *iov, int iovcnt) {
  size_t cnt = 0;
  for (int i = 0; i < iovcnt; i++) {
    for (int j = 0; j < iov[i].iov_len; j++) {
      putc_js(((char *)iov[i].iov_base)[j]);
    }
    cnt += iov[i].iov_len;
  }
  return cnt;
}

JavaScript:

let x = '../out/main.wasm';

let instance = null;
let memoryStates = new WeakMap();

function syscall(instance, n, args) {
  switch (n) {
    default:
      // console.log("Syscall " + n + " NYI.");
      break;
    case /* brk */ 45: return 0;
    case /* writev */ 146:
      return instance.exports.writev_c(args[0], args[1], args[2]);
    case /* mmap2 */ 192:
      debugger;
      const memory = instance.exports.memory;
      let memoryState = memoryStates.get(instance);
      const requested = args[1];
      if (!memoryState) {
        memoryState = {
          object: memory,
          currentPosition: memory.buffer.byteLength,
        };
        memoryStates.set(instance, memoryState);
      }
      let cur = memoryState.currentPosition;
      if (cur + requested > memory.buffer.byteLength) {
        const need = Math.ceil((cur + requested - memory.buffer.byteLength) / 65536);
        memory.grow(need);
      }
      memoryState.currentPosition += requested;
      return cur;
  }
}

let s = "";
fetch(x).then(response =>
  response.arrayBuffer()
).then(bytes =>
  WebAssembly.instantiate(bytes, {
    env: {
      __syscall0: function __syscall0(n) { return syscall(instance, n, []); },
      __syscall1: function __syscall1(n, a) { return syscall(instance, n, [a]); },
      __syscall2: function __syscall2(n, a, b) { return syscall(instance, n, [a, b]); },
      __syscall3: function __syscall3(n, a, b, c) { return syscall(instance, n, [a, b, c]); },
      __syscall4: function __syscall4(n, a, b, c, d) { return syscall(instance, n, [a, b, c, d]); },
      __syscall5: function __syscall5(n, a, b, c, d, e) { return syscall(instance, n, [a, b, c, d, e]); },
      __syscall6: function __syscall6(n, a, b, c, d, e, f) { return syscall(instance, n, [a, b, c, d, e, f]); },
      putc_js: function (c) {
        c = String.fromCharCode(c);
        if (c == "\n") {
          console.log(s);
          s = "";
        } else {
          s += c;
        }
      }
    }
  })
).then(results => {
  instance = results.instance;

  /* Hier wird der Auruf von JavaScript in den C-Code gemacht*/
  document.getElementById("container").textContent = instance.exports.powerer(3,4);
}).catch(console.error);

3. Lasse den Code laufen

03 Build and run- WebAssembly Tutorial Coding Lab Steffen Lippke
03 Build and run – WebAssembly Tutorial Coding Lab Steffen Lippke

4. Und sehe die Ausgabe (Hier für das Hello World Projekt):

02 Ausgabe- WebAssembly Tutorial Coding Lab Steffen Lippke
02 Ausgabe – WebAssembly Tutorial Coding Lab Steffen Lippke

Alternativen für WebAssembly

Die bekannteste Alternative für WebAssembly ist JavaScript. Die Programmierung mit JavaScript zeigt ein paar Geschwindigkeitsnachteile, aber diese Programmiersprache unterstützt fast jeder Browser.

Bei JavaScript hören die Alternativen auf. Du kannst die folgenden Schein-Alternativen in Betracht ziehen, weil der Programmierer in einer anderen Sprache programmiert, aber der Code wieder zu JavaScript im Hintergrund kompiliert wird. Der Entwickler hat ein anderes Entwicklungserlebnis, aber das Produkt ist das gleiche.

TypeScript ist das bessere JavaScript. Typisierungen, Funktionen und Klassen ermöglichen eine Java ähnliche Programmierung. Die Typisierungen helfen bei der Orientierung und die Klassenstruktur schafft Übersicht im Projekt.


Danke fürs Lesen. Erhalte weitere Tutorials in meinem belieben Newsletter*.
Jeden Monat teile ich mit Dir 4 neue praxisnahe Tutorials.
Über 162.403 sind abonniert. Trage Deine Mail ein und werde Teil von uns.



Quellenangabe Bilder: Icons und SVG-Grafiken im Titelbild von Microsoft PowerPoint 2019, frei verfügbar nach EULA
*) Mit dem Abonnement des Newsletters erklären Sie sich mit der Analyse des Newsletters durch individuelle Messung, Speicherung und Analyse von Öffnungsraten und der Klickraten in Profilen zu Zwecken der Gestaltung künftig besserer Newsletter einverstanden. Sie können die Einwilligung in den Empfang des Newsletters und die Messung mit Wirkung für die Zukunft widerrufen. Der Versand erfolgt mit MailChimp. Mehr in der Datenschutzerklärung.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.