WebAssembly: Native Bytecode for the Web

WebAssembly: Native Bytecode for the Web

Eine C++ Anwendung im Web, integriert in einer Single Page Application (SPA) - das geht? Ja, mit WebAssembly (WASM). Nativer Code im Web hat sinnvolle Anwendungszwecke für die unterschiedlichsten Szenarien. Durch die Möglichkeit, existierenden C++-Code speziell kompiliert in den Webbrowser zu laden, können komplexe Algorithmen und Berechnungen - wie sie etwa in Bild- und Videoverarbeitung vorkommen - Cross-Plattform auf nahezu allen Endgeräten ausgeführt werden. In diesem Vortrag zeigt Ihnen Martina Kraus zunächst die Grundlagen von WebAssembly anhand eines kleinen C++-Hello-World-Beispiels. Im Anschluss widmet sie sich dann der Frage, wie man eine existierende C++-Anwendung in eine Angular-basierte SPA integrieren kann, um das Beste aus beiden Welten zu nutzen. Dabei sollen typische Designpatterns und evtl. notwendige Umbauarbeiten an bestehendem Code ebenso beleuchtet werden wie die WASM Toolchain, mit der man zum Ziel einer nativ-angereichten modernen Web-App kommt.

E54070c941e73381a3473df8e2aab667?s=128

Martina Kraus

May 23, 2019
Tweet

Transcript

  1. WebAssembly: Native Bytecode for the Web C++ goes Web Martina

    Kraus Senior Software Engineer Martina Kraus
  2. Martina Kraus @MartinaKraus11 me@martina-kraus.io martina-kraus.io • • • • Martina

    Kraus
  3. Agenda Martina Kraus • WebAssembly: Native Bytecode for the Web

    • Emscripten and LLVM • C++ goes Web • Porting C++ into a Web application • Porting Guidelines • The Future of WebAssembly
  4. WebAssembly? Martina Kraus

  5. Why should I care about the web? Martina Kraus •

    The Browser as an application platform • Browser APIs (USB, Service Workers ...) and HTML5 evolving rapidly • Runs on almost every platform
  6. Status Quo Martina Kraus • Customers writing applications in C

    / C++
  7. WebAssembly (wasm) Martina Kraus • Low-Level Bytecode for the Web

    • V1 shipped as Minimum Viable Product • Fast, efficient, portable • Uses existing sandboxing tools • Standard and specification through W3C
  8. High level design goals Martina Kraus • No plug-ins needs

    to be installed (Native technology) • Implemented in all major browsers (2017+) • Idea: Bring all programming languages to the browser • Defining a portable size- and load-time efficient binary format
  9. WebAssembly (wasm) Martina Kraus • Re-use existing code, embedded in

    larger JavaScript / HTML application • Main application & logic in WebAssembly, UI in JavaScript / HTML / CSS • Entire code base in WebAssembly • With a tiny bit JavaScript for fetching • Only recommended for 3D rendering
  10. Can I use? Martina Kraus

  11. WebAssembly (wasm) Martina Kraus • Inside the web browser: •

    Rich-Media improvements (editing video, image recognition, music streaming) • Scientific visualization and simulation • Encryption • Outside the web browser: (wasmer) • Server-side compute of untrusted Code • Hybrid native apps on mobile devices
  12. LLVM and Emscripten The C++ Toolchain for WebAssembly Martina Kraus

  13. Emscripten Martina Kraus • Cross compiles C++ with LLVM to

    bytecode and then to WASM • Support standard C++-Libs (Import via build step) • SDL, GLUT, lib / libc, … • Maps OpenGL to WebGL for 3D rendering • Extends LLVM optimizations with JavaScript optimizations
  14. Toolchain Martina Kraus Clang / LLVM (Fastcomp) Emscripten Compiler Frontend

    (emcc) Emscripten SDK Manager (emsdk) .cpp .c .js .html .wasm Ports (WebGL) Build pipeline Emscripten-Tools Input / Output-Files
  15. Live Demo Keyfacts: Showcase Toolchain Interop C++ - JavaScript Martina

    Kraus
  16. Furthermore with CMake / Makefiles Martina Kraus • Makefiles are

    the C++ equivalent for MSBuild (.NET) Defining Makefile in CMakeLists.txt: • Configuration and compilation: if (${CMAKE_SYSTEM_NAME} MATCHES "Emscripten") set_target_properties(app PROPERTIES LINK_FLAGS "-o app.js") endif () C:\emscriptenDemo> emconfigure cmake . C:\emscriptenDemo> emmake make
  17. WebAssembly Porting Guidelines Martina Kraus

  18. Good help from Emscripten Martina Kraus • Many already ported

    C++ libs (GLUT, SDL …) • Own Emscripten-Library (emscripten.h)
  19. Migration: Multi-threading (no support yet) Martina Kraus • Compiler Flags:

    • Browser used SharedArrayBuffer for Memory and WebWorkers for Threading -s USE_PTHREADS = 1 -s PTHREAD_POOL_SIZE = <int> • BUT: January 2018 Browsers disabled SharedArrayBuffer • High vulnerability issues • There is an option to set a flag-option inside your browser (at your own risk)
  20. Migration: What needs to be rewritten Martina Kraus • Native

    Code: • Inline Assembly (Code that is scanning / manipulating registers or the stack) • Developing both options – portable and native • Detecting emscripten in preprocessor
  21. The future of WebAssembly Martina Kraus After v1 (the MVP),

    the consortium keeps working on new features • Garbage Collection • Direct DOM access • Multi-Threading • Many more …. • https://github.com/WebAssembly/design/blob/master/FutureFeature s.md
  22. Summary Martina Kraus • WebAssembly ships C++ to the web

    • Cross-compiled WebAssembly runs inside every modern web browser • And actually really fast: https://pspdfkit.com/webassembly-benchmark/ • And even beyond the browser: https://wasmer.io/ https://wapm.io/
  23. Thank you! I’m looking forward for your feedback! Martina Kraus

    Martina Kraus https://github.com/martinakraus/WASM_Examples
  24. Questions? Martina Kraus

  25. Further readings Martina Kraus Emscripten: https://emscripten.org/ WebAssembly: https://developer.mozilla.org/en-US/docs/WebAssembly Garden for

    Mozilla: https://s3.amazonaws.com/mozilla-games/ZenGarden/EpicZenGarden. html Articles: https://hacks.mozilla.org/category/webassembly/ WebAssembly Package Manager: https://wapm.io/ WebAssembly binary execution: https://wasmer.io/
  26. Already using Martina Kraus