WebAssembly: C++ goes web

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?

E54070c941e73381a3473df8e2aab667?s=128

Martina Kraus

April 25, 2019
Tweet

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