WebAssembly: 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 der 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-angereicherten modernen Web-App kommt.

Transcript

1. WebAssembly: Native Bytecode for the web
   C++ goes Web
   Martina Kraus
   @MartinaKraus11
   Software Developer
   

   View Slide

2. WebAssembly: Native Bytecode for the Web
   C++ goes Web
   @MartinaKraus11
   me@martina-kraus.io
   @MartinaKraus11
   me@martina-kraus.io
   martina-kraus.io
   Martina Kraus
   • Software Developer
   • Focus:
   • Web applications with Angular
   • WebAssembly
   

   View Slide

3. WebAssembly: Native Bytecode for the Web
   C++ goes Web
   @MartinaKraus11
   me@martina-kraus.io
   • WebAssembly: Native Bytecode for the Web
   • Emscripten and LLVM
   • C++ goes Web
   • Porting C++ into a running Angular application
   • Porting Guidelines
   • The Future of WebAssembly
   Agenda
   

   View Slide

4. WebAssembly: Native Bytecode for the Web
   C++ goes Web
   @MartinaKraus11
   me@martina-kraus.io
   WebAssembly
   Native Bytecode for the Web
   

   View Slide

5. WebAssembly: Native Bytecode for the Web
   C++ goes Web
   @MartinaKraus11
   me@martina-kraus.io
   WebAssembly?
   

   View Slide

6. WebAssembly: Native Bytecode for the Web
   C++ goes Web
   @MartinaKraus11
   me@martina-kraus.io
   Why should I care about the Web?
   • The Browser as an application platform
   • Browser APIs (USB, Service Workers ...) and HTML5 evolving rapidly
   • Runs on almost every platform
   

   View Slide

7. WebAssembly: Native Bytecode for the Web
   C++ goes Web
   @MartinaKraus11
   me@martina-kraus.io
   The Challenge
   • Customers writing applications in C / C++
   https://www.tiobe.com/tiobe-index/
   

   View Slide

8. WebAssembly: Native Bytecode for the Web
   C++ goes Web
   @MartinaKraus11
   me@martina-kraus.io
   • Low-Level Bytecode for the Web
   • V1 shipped as Minimum Viable Product
   • Fast, efficient, portable
   • Uses existing sandboxing tools
   • Standard and specification through W3C
   WebAssembly (wasm)
   

   View Slide

9. WebAssembly: Native Bytecode for the Web
   C++ goes Web
   @MartinaKraus11
   me@martina-kraus.io
   • No plug-ins needs to be installed (Native technology)
   • Implemented in all major browsers (2017+)
   High level design goals
   • Idea: Bring all programming languages to the browser
   • Targeted languages such as C, C++ or Rust (= languages without
   garbage collection)
   • Defining a portable size- and load-time efficient binary format
   

   View Slide

10. WebAssembly: Native Bytecode for the Web
    C++ goes Web
    @MartinaKraus11
    me@martina-kraus.io
    • Re-use existing code, embedded in larger JavaScript / HTML
    application
    WebAssembly and JavaScript
    • 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

11. WebAssembly: Native Bytecode for the Web
    C++ goes Web
    @MartinaKraus11
    me@martina-kraus.io
    Can I use
    

    View Slide

12. WebAssembly: Native Bytecode for the Web
    C++ goes Web
    @MartinaKraus11
    me@martina-kraus.io
    • Inside the web browser:
    • Rich-Media improvements (editing video, image recognition, music
    streaming)
    • Scientific visualization and simulation
    • Encryption
    And what are the real-life Use-Cases?
    • Outside the web browser:
    • Server-side compute of untrusted Code / Server-side application
    • Hybrid native apps on mobile devices
    

    View Slide

13. WebAssembly: Native Bytecode for the Web
    C++ goes Web
    @MartinaKraus11
    me@martina-kraus.io
    Emscripten and LLVM:
    The C++ Toolchain for WebAssembly
    

    View Slide

14. WebAssembly: Native Bytecode for the Web
    C++ goes Web
    @MartinaKraus11
    me@martina-kraus.io
    C++ to WASM
    • C / C++ tools & compilers
    • Emscripten: LLVM-to-JavaScript-or-WASM compiler
    • LLVM: The modern C / C++ compiler toolchain
    

    View Slide

15. WebAssembly: Native Bytecode for the Web
    C++ goes Web
    @MartinaKraus11
    me@martina-kraus.io
    Emscripten
    • Cross compiles C++ with LLVM to bytecode and then to WASM
    • Support standard C++-Libs (Import via build step)
    • SDL, EGL, GLUT, …
    • Maps OpenGL to WebGL for 3D rendering
    • Extends LLVM optimizations with JavaScript optimizations
    

    View Slide

16. WebAssembly: Native Bytecode for the Web
    C++ goes Web
    @MartinaKraus11
    me@martina-kraus.io
    Toolchain
    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

17. WebAssembly: Native Bytecode for the Web
    C++ goes Web
    @MartinaKraus11
    me@martina-kraus.io
    DEMO
    The C++ Toolchain for WebAssembly
    

    View Slide

18. WebAssembly: Native Bytecode for the Web
    C++ goes Web
    @MartinaKraus11
    me@martina-kraus.io
    Furthermore with CMake / Makefiles
    • 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

19. WebAssembly: Native Bytecode for the Web
    C++ goes Web
    @MartinaKraus11
    me@martina-kraus.io
    DEMO
    Calling a C function with JavaScript
    

    View Slide

20. WebAssembly: Native Bytecode for the Web
    C++ goes Web
    @MartinaKraus11
    me@martina-kraus.io
    DEMO
    Integration of an C++ application inside a
    Single Page Application (Angular)
    

    View Slide

21. WebAssembly: Native Bytecode for the Web
    C++ goes Web
    @MartinaKraus11
    me@martina-kraus.io
    WebAssembly
    C++ Porting Guidelines
    

    View Slide

22. WebAssembly: Native Bytecode for the Web
    C++ goes Web
    @MartinaKraus11
    me@martina-kraus.io
    • Input support via GLFW / Multimedia support via SDL
    Good help from Emscripten ports
    • Own Emscripten-Library (emscripten.h)
    • OpenGL is provided different modes:
    • WebGL-friendly subset of OpenGL ES 2.0 / 3.0 (default)
    • https://github.com/emscripten-core/emscripten/tree/master/tests/glbook
    • OpenGL ES 2.0 / 3.0 emulation (features that can‘t be mapped to WebGL)
    

    View Slide

23. WebAssembly: Native Bytecode for the Web
    C++ goes Web
    @MartinaKraus11
    me@martina-kraus.io
    • Compiler Flags:
    • Browser used SharedArrayBuffer for Memory and WebWorkers for
    Threading
    Migration: Multithreading (not supported yet)
    -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

24. WebAssembly: Native Bytecode for the Web
    C++ goes Web
    @MartinaKraus11
    me@martina-kraus.io
    Migration: What is not supported / needs to be rewritten
    • Native Code:
    • Inline Assembly (Code that is scanning / manipulating registers or the
    stack)
    • Developing both options – portable and native
    • Detecting emscripten in preprocessor __EMSCRIPTEN__
    

    View Slide

25. WebAssembly: Native Bytecode for the Web
    C++ goes Web
    @MartinaKraus11
    me@martina-kraus.io
    The Future of WebAssembly
    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/FutureFeatures.
    md
    

    View Slide

26. WebAssembly: Native Bytecode for the Web
    C++ goes Web
    @MartinaKraus11
    me@martina-kraus.io
    Summary
    • WebAssembly ships C++ to the web
    • Cross-compiled WebAssembly runs inside every modern web
    browser
    • And actually really fast:
    https://github.com/guybedford/wasm-demo
    

    View Slide

27. WebAssembly: Native Bytecode for the Web
    C++ goes Web
    @MartinaKraus11
    me@martina-kraus.io
    Samples for CMake and Angular Integration:
    https://github.com/martinakraus/BastaSpring2019Samples
    

    View Slide

28. WebAssembly: Native Bytecode for the Web
    C++ goes Web
    @MartinaKraus11
    me@martina-kraus.io
    Links
    • Emscripten: https://emscripten.org/
    • WebAssembly:
    https://developer.mozilla.org/en-US/docs/WebAssembly
    • LLVM: https://llvm.org/
    • Doom 3 Demo: http://www.continuation-labs.com/projects/d3wasm/
    

    View Slide

29. @MartinaKraus11
    me@martina-kraus.io
    WebAssembly: Native Bytecode for the Web
    C++ goes Web
    Thank you
    For your kind attention!
    Slides:
    https://speakerdeck.com/martinakraus/webassembly-bytecode-for-the-web
    

    View Slide