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@inovex GmbH • 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 • Tooling • C++ goes Web • 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 • Low-Level Bytecode for the Web • V1 shipped as Minimum Viable Product • Fast, efficient, portable • Uses existing sandboxing tools • No Plugin needed • Standard and specification through W3C WebAssembly (wasm)

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 me@martina-kraus.io “WebAssembly is designed to complement JavaScript not replace it” WebAssembly and JavaScript

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

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 me@martina-kraus.io Emscripten Emscripten Compiler Frontend (emcc) .cpp .c .js .html .wasm Clang / LLVM (Fastcomp)

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

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 me@martina-kraus.io WebAssembly: Where are we right now?

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 me@martina-kraus.io + Many already ported C++ libs (GLUT, SDL …) Migration - Native Code: • Inline Assember (Code that is scanning / manipulating registers or the stack)

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

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 The future of WebAssembly

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 me@martina-kraus.io Roadmap 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 What project fits to WebAssembly • Requires a lot of computations (simulations, physic engines) • Big C / C++ code base with already ported libs Usage Scenarios for the web: • Using existing C libraries in browser • Reuse algorithm from server side (and secure them)

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 me@martina-kraus.io Summary • WebAssembly ships C++ to the web ... • … any many other languages like Rust, Go, C#, TypeScript... • Cross-compiled WebAssembly runs inside every modern web browser • And actually really fast: https://github.com/guybedford/wasm-demo https://pspdfkit.com/webassembly-benchmark/

@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-c-plus-plus-goes-web Repository: https://github.com/martinakraus/WASM_Examples

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 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/

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

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