{"id":22623,"date":"2022-03-30T00:00:00","date_gmt":"2022-03-29T22:00:00","guid":{"rendered":"https:\/\/blog.mi.hdm-stuttgart.de\/?p=22623"},"modified":"2023-08-06T21:39:23","modified_gmt":"2023-08-06T19:39:23","slug":"webassembly-das-neue-docker-und-noch-mehr","status":"publish","type":"post","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2022\/03\/30\/webassembly-das-neue-docker-und-noch-mehr\/","title":{"rendered":"WebAssembly: Das neue Docker und noch mehr?"},"content":{"rendered":"\n
\n

If WASM+WASI existed in 2008, we wouldn’t have needed to created Docker. That’s how important it is. Webassembly on the server is the future of computing. A standardized system interface was the missing link. Let’s hope WASI is up to the task!<\/p>\nTweet<\/a>, Solomon Hykes (Erfinder von Docker), 2019<\/cite><\/blockquote>\n\n\n\n

Dieser Tweet \u00fcber WebAssembly (WASM) des Docker-Erfinders gibt einen Hinweis auf die m\u00f6gliche Innovationskraft dieser Technologie. Der vorliegende Artikel vermittelt zun\u00e4chst die wichtigsten technischen Grundlagen von WebAssembly, welche zum weiteren Verst\u00e4ndnis notwendig sind. Anschlie\u00dfend wird der WASI-Standard n\u00e4her beleuchtet, welcher die Br\u00fccke zur Containervirtualisierung schl\u00e4gt. Schlie\u00dflich betrachten wir mit Krustlet (Kubernetes) und wasmCloud zwei existierende Cloud-Technologien, die zentral auf WebAssembly basieren.<\/p>\n\n\n\n\n\n\n\n

1. WebAssembly (WASM)<\/h2>\n\n\n\n

1.1. WebAssembly als Number Cruncher f\u00fcr JavaScript<\/h3>\n\n\n\n
\n

Any application that can be written in JavaScript, will eventually be written in JavaScript.<\/p>\nAtwood\u2019s Law<\/a>, Jeff Atwood (Mitgr\u00fcnder von StackOverflow)<\/cite><\/blockquote>\n\n\n\n

Die gestiegene Popularit\u00e4t und weite Verbreitung von JavaScript (JS) innerhalb der vergangenen Jahre dr\u00fcckt sich pointiert im Atwood’schen Gesetz<\/em> aus. Dieses besagt: Falls es m\u00f6glich ist, dass eine Anwendung in JavaScript implementiert werden kann, wird das auch irgendwann so geschehen.<\/p>\n\n\n\n

JavaScript Engines<\/a> wurden im Zuge des Erfolgs der Sprache und des Wettbewerbs zwischen den Browsern betr\u00e4chtlich performanter<\/a>. Da JavaScript aber letztlich eine Sprache mit dynamischer Typisierung ist, unterliegt die Optimierung der Performance gewissen Grenzen. Daher ergibt es wenig Sinn, rechenintensive Anwendungen damit zu realisieren.<\/p>\n\n\n\n

F\u00fcr rechenintensive Anwendungen soll WebAssembly (WASM)<\/a> Abhilfe schaffen. Bei der Technologie handelt es sich um ein Bytecode-Format f\u00fcr eine entsprechende virtuelle Maschine (VM). WASM wurde so konzipiert, dass performante Sprachen wie z.B. C\/C++, Rust, AssemblyScript oder TinyGo<\/a> [19] f\u00fcr diese VM kompiliert werden k\u00f6nnen. Am Ende erh\u00e4lt man eine wasm-Datei, die den Bytecode enth\u00e4lt und in JavaScript dann \u00fcber die WebAssembly API<\/a> des Browsers (bzw. der JS Engine) geladen und ausgef\u00fchrt werden kann. Das Minimalbeispiel im folgenden Kapitel soll den Workflow verdeutlichen.<\/p>\n\n\n\n

\"\"<\/a>
Abb: Verschiedenste Sprachen k\u00f6nnen zu WebAssembly Bytecode kompiliert werden. Zeichnung von Lin Clark<\/a> [18]<\/em><\/figcaption><\/figure>\n\n\n\n

1.2. Workflow \/ Beispielprojekt<\/h3>\n\n\n\n

Wir gehen von einem akademischen Beispiel aus, welches in der Quelltextdatei program.c<\/code> implementiert wurde:<\/p>\n\n\n\n

<em>\/\/ program.c<\/em>\n\nvoid external_number_printer(int number);\n\nint add(int a, int b) {\n    int result = a + b;\n    external_number_printer(result);\n    return result;\n}<\/code><\/pre>\n\n\n\n
Die Funktion add()<\/code> gibt das Ergebnis einer Addition zur\u00fcck. Zus\u00e4tzlich wird die Funktion external_number_printer()<\/code> mit dem Ergebnis aufgerufen. Diese wird erst zur Laufzeit durch JavaScript bereitgestellt und daher in C nur deklariert.<\/p>\n\n\n\n
\u00dcbersetzt wird der Quelltext mit einem Compiler, welcher WASM als Zielarchitektur unterst\u00fctzt. In diesem Beispiel mit Clang (LLVM Projekt)<\/a> [1]:<\/p>\n\n\n\n
clang --target=wasm32 --no-standard-libraries -Wl,--export-all -Wl,--no-entry -Wl,--allow-undefined -o program.wasm program.c<\/code><\/pre>\n\n\n\n
Ergebnis ist die Bytecode-Datei program.wasm<\/code>. Diese kann in JavaScript geladen werden, um die Funktion add()<\/code> auszuf\u00fchren. Die Funktion external_number_printer()<\/code> wird dabei per importObject<\/code> bereitgestellt.<\/p>\n\n\n\n
<em>\/\/ script.js<\/em>\nfunction js_number_printer(number) {\n    console.log('JS Number Printer: ' + number);\n}\n\nasync function main() {\n    const source = fetch('<strong>program.wasm<\/strong>');\n    const importObject = { env: { <strong>external_number_printer<\/strong>: js_number_printer } };\n    const { instance } = await WebAssembly.instantiateStreaming(source, importObject);\n\n    const result = instance.exports.<strong>add(40, 2)<\/strong>; <em>\/\/ call webassembly function<\/em>\n    console.log('Result: ' + result);\n}\nmain();<\/code><\/pre>\n\n\n\n
Die Konsolenausgabe von script.js<\/code>:<\/p>\n\n\n\n
> JS Number Printer: 42\n> Result: 42<\/code><\/pre>\n\n\n\n
Die erste Zeile wird von der Funktion js_number_printer()<\/code> erzeugt, welche von WASM aus aufgerufen wurde. Man spricht hier auch von einer Host-Funktion<\/em> oder einer importierten Funktion<\/em>. [4]<\/p>\n\n\n\n
1.3. Weitere Eigenschaften & Konzepte<\/h3>\n\n\n\n
\"\"<\/a>
Abb: Zusammenh\u00e4nge der wichtigsten Konzepte<\/em><\/figcaption><\/figure>\n\n\n\n