Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

WebAssembly? Martina Kraus

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Can I use? Martina Kraus

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

WebAssembly Porting Guidelines Martina Kraus

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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)

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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/

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Questions? Martina Kraus

Slide 25

Slide 25 text

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/

Slide 26

Slide 26 text

Already using Martina Kraus