© Teguh Jati Prasetyo/Shutterstock.com
Die „alternative“ virtuelle Maschine WebAssembly ist auf dem Vormarsch

Die neue Hoffnung


WebAssembly soll sowohl die Ladezeiten als auch die Ausführung von Webanwendungen gegenüber JavaScript beschleunigen. Die großen Browseranbieter treiben das zukunftsträchtige Projekt bei der Entwicklung voran. Zeit, sich WebAssembly mit seinen Stärken und Schwächen einmal genauer anzuschauen.

Die Entwicklung des Web war in vielerlei Hinsicht eine Sache von „Bedarf treibt Standard“. Hätten Brendan Eich und seine Mitstreiter vorausgesehen, dass JavaScript einmal eine so große Verbreitung erreichen würde, hätten sie sich sicherlich für einen saubereren Sprachstandard samt härterer Syntax entschieden. Wie dem auch sei: JavaScript ist heute nicht nur eine Programmiersprache für so ziemlich alles, sondern dient auch als Kompilierziel für andere Sprachen. CoffeeScript, TypeScript und Co. werden in JavaScript umgewandelt, bevor sie in der Runtime des Browsers zur Ausführung gelangen. Da die Auseinandersetzungen zwischen Opera, Mozilla und Microsoft zu einer immer größeren Performancesteigerung führten, sahen sich Entwickler dazu genötigt, eine virtuelle Maschine für den Browser zu konstruieren. Mit einem als Emscripten bezeichneten Compiler konnte man C-Programme transpilieren und danach in der gleichnamigen virtuellen Maschine im Browser ausführen.

Emscripten mag mit kleineren Programmen problemlos funktionieren, stößt in der Praxis über kurz oder lang jedoch an Performancegrenzen. Das liegt daran, dass der Aufbau von JavaScript eher schlecht als recht für virtuelle Maschinen geeignet ist: Die Sprache muss geparst werden und vieles mehr. WebAssembly versucht dieses Problem durch Erweiterungen des Browsers zu umgehen. Es handelt sich dabei im Grunde genommen um eine alternative virtuelle Maschine, die im Browser neben der JavaScript-Umgebung ausgeführt wird und mit ihr interagiert. WebAssembly-Programme sind dann „High-Performance-Inseln“, die aus dem gewöhnlichen JavaScript-Code heraus aufgerufen werden können, wenn man die maximale Leistungsfähigkeit der zugrunde liegenden Hardware benötigt. Ähnlichkeiten mit dem in Palm OS 5 implementierten ARMlet-System sind rein zufällig, die Idee ist jedoch dieselbe.

Immer weitere Verbreitung

Als erste Versionen von Emscripten erschienen, betrachteten viele Entwickler das Produkt als Spielzeug. Im Fall von WebAssembly sieht die Situation jedoch anders aus – wer CanIUse nach Unterstützung für den Standard befragt, bekommt das in Abbildung 1 gezeigte und sehr befriedigende Ergebnis.

hanna_webassembly_1.tif_fmt1.jpgAbb. 1: Die Unterstützung von WebAssembly darf durchaus als breit bezeichnet werden (Quelle: [1])

Analog zur Entwicklung von Programmen für Microcontroller gilt auch in der Welt des WebAssembly, dass man Assemblercode nicht direkt von Hand erzeugt. Stattdessen kommen niedere Hochsprachen zum Einsatz, als Klassiker in besonderer Weise C.

Tipp: Wer bereits erfahren in Sachen Assemblerprogrammierung ist, findet unter [2] eine Einführung in die Assemblersprache der VM. Sie ist im Großen und Ganzen einfach und von der Handhabung her wesentlich komfortabler als X86- oder ARM-Assembly.

Die eigentliche Entstehung des Codes erfolgt über LLVM, der mit einem speziellen Profil für die WebAssembly-VM ausgestattet ist. Wir wollen in den folgenden Schritten unter Ubuntu für 14.04 LTS experimentieren – die meisten Linux-Versionen funktionieren analog, für macOS und Windows finden Sie im Internet alternative Einstiegsanweisungen. Die erste Amtshandlung besteht jedenfalls darin, den Emscripten-Compiler herunterzuladen und im zweiten Schritt bereitzustellen:

tamhan@tamhan-thinkpad:~/webasmspace$ git clone https://github.com/juj/emsdk.git . . . tamhan@tamhan-thinkpad:~/webasmspace$ cd emsdk tamhan@tamhan-thinkpad:~/webasmspace/emsdk$ ./emsdk install latest . . . Done installing tool 'emscripten-1.37.28'. Done installing SDK 'sdk-1.37.28-64bit'.

Wundern Sie sich nicht darüber, dass im Rahmen der Abarbeitung dieses Kommandos einige 100 MB an Informationen heruntergeladen werden: Emscripten ist und bleibt nun einmal eine vollwertige C-Programmierumgebung. Im nächsten Schritt müssen Sie den Compiler aktivieren:

tamhan@tamhan-thinkpad:~/webasmspace$ ./emsdk activate latest

Von besonderem Interesse ist hier nur die in Abbildung 2 gezeigte Ausgabe von Konfigurationsinformationen. emsdk ist in der Lage, zwischen verschiedenen Emscripten-Installationen zu makeln.

hanna_webassembly_2.tif_fmt1.jpgAbb. 2: Der Konfigurator legt diverse relevante Attribute fest

Wer – wie der Autor – die Path-Variable seiner Workstation nicht gerne anpasst, kann dies umgehen. Im Rahmen der Ausführung von activate legt das Werkzeug nämlich ein Skript an, das ein Shellfenster mit den notwendigen Umgebungsvariablen dotiert. Seine Aktivierung muss natürlich nach jedem Öffnen des Konsolenfensters erfolgen und sieht folgendermaßen aus:

tamhan@tamhan-thinkpad:~/webasmspace/emsdk$ source ./emsdk_env.sh

Im nächsten Schritt konstruieren wir ein kleines Hello-World-Beispiel, das jedem C-Programmierer bestens bekannt vorkommt:

#include <stdio.h>' int main(int argc, char ** argv) { printf("Hello, world!\n"); }

Die Kompilation erfolgt im Großen und Ganzen so, wie man es von GCC erwarten würde:

tamhan@tamhan-thinkpad:~/webasmspace/project1$ emcc helloworld.c -s WASM=1 -o hello.html

Wichtig ist das Übergeben des Flags -s WASM=1 – fehlt es, so generiert Emscripten stattdessen Code für das weniger performante Format Asm.JS. In manchen Fällen kommt es während der Kompilation zu einer Gruppe von Fehlern, die auf ein Problem in der LLVM-Umgebung hinweisen:

CRITICAL:root:Could not verify LLVM version: Command '['/home/tamhan/webasmspace/emsdk/clang/e1.37.28_64bit/clang++', '-v']' returned non-zero exit status 1

Das Ubuntu-Team ist dafür berüchtigt, Pakete langsam zu aktualisieren. Zur Behebung des Problems müssen wir im ersten Schritt cmake herunterladen – es handelt sich dabei um ein Kompilationswerkzeug, das die Erstellung von C-Code automatisiert:

sudo apt-get remove cmake wget http://www.cmake.org/files/v3.4/cmake-3.4.3.tar.gz tar -xvzf cmake-3.4.3.tar.gz cd cmake-3.4.3/ ./configure make -j 4 sudo make install

Danach folgt eine modifizierte Version des Downloadprozesses:

sudo ./emsdk install --build=Release sdk-incoming-64bit binaryen-master-64bit

Beachten Sie, dass diese Version des Befehls Herunterladen und Kompilieren nicht sequenziell ausführt – die Internetverbindung muss während des gesamten Deploymentprozesses weiterbestehen. Die eigentliche Kompilationsarbeit ist dabei nicht von schlechten Eltern – das zweikernige ThinkPad des Autors war gute zw...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang