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

Martina Kraus @MartinaKraus11 [email protected] martina-kraus.io • • • • Martina Kraus

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

WebAssembly? Martina Kraus

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

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

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

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

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

Can I use? Martina Kraus

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

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

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

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

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

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

WebAssembly Porting Guidelines Martina Kraus

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

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)

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

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

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/

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

Questions? Martina Kraus

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/

Already using Martina Kraus