Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] @MartinaKraus11 [email protected] martina-kraus.io Martina Kraus • Software Developer@inovex GmbH • Focus: • Web applications with Angular • WebAssembly

Slide 3

Slide 3 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] • WebAssembly: Native Bytecode for the Web • Tooling • C++ goes Web • The Future of WebAssembly Agenda

Slide 4

Slide 4 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] WebAssembly Native Bytecode for the Web

Slide 5

Slide 5 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] • 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)

Slide 6

Slide 6 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] “WebAssembly is designed to complement JavaScript not replace it” WebAssembly and JavaScript

Slide 7

Slide 7 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] The Toolchain for WebAssembly

Slide 8

Slide 8 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] Emscripten Emscripten Compiler Frontend (emcc) .cpp .c .js .html .wasm Clang / LLVM (Fastcomp)

Slide 9

Slide 9 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] Demo time

Slide 10

Slide 10 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] WebAssembly: Where are we right now?

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] Already used

Slide 13

Slide 13 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] Can I use

Slide 14

Slide 14 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] The future of WebAssembly

Slide 15

Slide 15 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] 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

Slide 16

Slide 16 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] 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)

Slide 17

Slide 17 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] 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/

Slide 18

Slide 18 text

@MartinaKraus11 [email protected] 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

Slide 19

Slide 19 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] 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/

Slide 20

Slide 20 text

@MartinaKraus11 [email protected] WebAssembly: Native Bytecode for the Web C++ goes Web

Slide 21

Slide 21 text

WebAssembly: Native Bytecode for the Web C++ goes Web @MartinaKraus11 [email protected] 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