Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] • 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

Slide 4

Slide 4 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] WebAssembly Native Bytecode for the Web

Slide 5

Slide 5 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] WebAssembly?

Slide 6

Slide 6 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] 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

Slide 7

Slide 7 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] The Challenge • Customers writing applications in C / C++ https://www.tiobe.com/tiobe-index/

Slide 8

Slide 8 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] • 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)

Slide 9

Slide 9 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] • 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

Slide 10

Slide 10 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] • 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

Slide 11

Slide 11 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] Can I use

Slide 12

Slide 12 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] • 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

Slide 13

Slide 13 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] Emscripten and LLVM: The C++ Toolchain for WebAssembly

Slide 14

Slide 14 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] C++ to WASM • C / C++ tools & compilers • Emscripten: LLVM-to-JavaScript-or-WASM compiler • LLVM: The modern C / C++ compiler toolchain

Slide 15

Slide 15 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] 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

Slide 16

Slide 16 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] 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

Slide 17

Slide 17 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] DEMO The C++ Toolchain for WebAssembly

Slide 18

Slide 18 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] 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

Slide 19

Slide 19 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] DEMO Calling a C function with JavaScript

Slide 20

Slide 20 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] DEMO Integration of an C++ application inside a Single Page Application (Angular)

Slide 21

Slide 21 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] WebAssembly C++ Porting Guidelines

Slide 22

Slide 22 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] • 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)

Slide 23

Slide 23 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] • 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)

Slide 24

Slide 24 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] 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__

Slide 25

Slide 25 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] 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

Slide 26

Slide 26 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] 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

Slide 27

Slide 27 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] Samples for CMake and Angular Integration: https://github.com/martinakraus/BastaSpring2019Samples

Slide 28

Slide 28 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] 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/

Slide 29

Slide 29 text

@MartinaKraus11 [email protected] 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