It’s #FrontendFriday – WebAssembly: die Zukunft der Webapps?
Vielleicht haben Sie schon von WebAssembly (kurz: Wasm) gehört, denn immerhin gibt es zumindest die WebAssembly Community Group (W3C) schon seit April 2015. Inzwischen ist Wasm in der Version 1.0 verfügbar.
Doch was ist Wasm genau und wofür braucht man das? In diesem Blogbeitrag erfahren Sie alles dazu!
Was ist WebAssembly?
WebAssembly is a binary instruction format for a stack-based virtual machine.
Wasm is designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications.
Kurz gesagt: WebAssembly ist ein neuer Typ Code. Er ermöglicht es Webanwendungen in C/C++ oder Rust zu implementieren und diese (fast – in einer Sandbox) nativ im Browser auszuführen. Dabei kann es auch in Kombination mit HTML/CSS verwendet werden [1].
Warum möchte man Webapps in einer maschinennahen Sprache implementieren und ausführen?
Gute Frage! Denn um Logik auf Webseiten zu implementieren, gibt es doch schon JavaScript? Wie wir aber alle wissen, ist JavaScript vergleichsweise leider sehr langsam. Das macht sich vor allem bei komplexen Webanwendungen wie z.B. bei der 3D Visualisierung im Browser bemerkbar.
Deshalb sind vor allem folgende Gründe dafür verantwortlich, dass es Wasm gibt:
In folgender Demoanwendung kann man sehr gut selbst den Unterschied sehen, spüren und ausprobieren: WebAssembly VS JavaScript
- Link öffnen und oben rechts auf den Debug-Monitor klicken, bis die blaue FPS-Anzeige zu sehen ist
- Über das DropDown oben rechts kann zwischen Wasm und JS gewechselt werden
- Darunter kann die Anzahl der animierten Menschen erhöht/verringert werden
Im aktuellen Google Chrome Canary (Version 72.0.3610.0) erhalte ich z.B. bei 20 Menschen mit JS gerade mal ~13 FPS, mit Wasm ~30 FPS. Das sind mehr als 100% Performance-Steigerung!
Wie funktioniert WebAssembly im Browser?
Um den geschriebenen C/C++ Code zu WebAssembly zu kompilieren, gibt es emscripten. Mit emscripten kann über folgenden Befehl der Code zu Wasm kompiliert werden:
emcc hello.c -s WASM=1 -o hello.html
Um das ganze im Browser auszuführen, muss die jeweilige Browserengine auch Wasm unterstützen. In Chrome übernimmt das Ausführen von Wasm beispielsweise der Chrome Native Client in einer Sandbox.
Wer noch tiefer einsteigen möchte: https://hacks.mozilla.org/2017/02/creating-and-working-with-webassembly-modules/
Welche Browser bzw. Browserengines unterstützen WebAssembly?
Man mag es kaum glauben, aber da sind sich alle (wichtigen) Browser (nicht Internet Explorer) einig: https://caniuse.com/#feat=wasm
Wird WebAssembly der Nachfolger von JavaScript?
Nein. Wasm ist als „schnelle Ergänzung“ für JavaScript gedacht [4].
Wasm wird in Zukunft parallel existieren und voraussichtlich nur bei besonders komplexen Webanwendungen zum Einsatz kommen (Rechenintensive Anwendungen, 3D, etc.).
Quellen:
[1] https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71
[2] https://www.lucidchart.com/techblog/2017/05/16/webassembly-overview-so-fast-so-fun-sorta-difficult/
[3] https://medium.com/samsung-internet-dev/performance-testing-web-assembly-vs-javascript-e07506fd5875
