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

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

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

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

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

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

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/

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)

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

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

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

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

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

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

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

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

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

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

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

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)

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

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)

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)

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__

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

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

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

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/

@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