WebAssembly: C++ goes web

Porting an old C++ desktop app to a single page application without rewriting business logic?
That's possible with web assembly. Further running native embedded Code inside the browser comes without a performance penalty. This enables the developer to create also compute heavy tasks like video and image rendering. After small examples, aiming to show the compiler toolchain, Martina will deep dive into the question: How to port existing C++ Application to web assembly?

Transcript

1. WebAssembly: Native Bytecode for the web C++ goes Web Martina Kraus @MartinaKraus11 Software Developer
2. 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
3. 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
4. WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 me@martina-kraus.io WebAssembly Native Bytecode for the Web
5. 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)
6. 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
7. WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 me@martina-kraus.io The Toolchain for WebAssembly
8. 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)
9. WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 me@martina-kraus.io Demo time
10. WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 me@martina-kraus.io WebAssembly: Where are we right now?
11. 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)
12. WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 me@martina-kraus.io Already used
13. WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 me@martina-kraus.io Can I use
14. WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 me@martina-kraus.io The future of WebAssembly
15. 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
16. 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)
17. 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/
18. @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
19. 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/
20. @MartinaKraus11 me@martina-kraus.io WebAssembly: Native Bytecode for the Web C++ goes Web
21. 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