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.

Transcript

1. WebAssembly: Native Bytecode for
   the Web
   C++ goes Web
   Martina Kraus
   Senior Software Engineer
   Martina Kraus
   

   View Slide

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

   View Slide

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
   

   View Slide

4. WebAssembly?
   Martina Kraus
   

   View Slide

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
   

   View Slide

6. Status Quo
   Martina Kraus
   • Customers writing applications in C / C++
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

10. Can I use?
    Martina Kraus
    

    View Slide

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
    

    View Slide

12. LLVM and Emscripten
    The C++ Toolchain for WebAssembly
    Martina Kraus
    

    View Slide

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
    

    View Slide

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
    

    View Slide

15. Live Demo
    Keyfacts:
    Showcase Toolchain
    Interop C++ - JavaScript
    Martina Kraus
    

    View Slide

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
    

    View Slide

17. WebAssembly
    Porting Guidelines
    Martina Kraus
    

    View Slide

18. Good help from Emscripten
    Martina Kraus
    • Many already ported C++ libs (GLUT, SDL …)
    • Own Emscripten-Library (emscripten.h)
    

    View Slide

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 =
    • 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)
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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/
    

    View Slide

23. Thank you!
    I’m looking forward for your
    feedback!
    Martina Kraus
    Martina Kraus
    https://github.com/martinakraus/WASM_Examples
    

    View Slide

24. Questions?
    Martina Kraus
    

    View Slide

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/
    

    View Slide

26. Already using
    Martina Kraus
    

    View Slide