Web assembly brings the web to a new era
0 likes431 views
WebAssembly (WASM) allows code written in languages like C/C++ to run natively in web browsers. WASM code compiles to a binary format that runs with similar performance to native machine code. It provides a compilation target for languages other than JavaScript to run on the web. WASM code runs in a secure sandbox and provides consistent, predictable performance across browsers. It enables code reuse between native and web environments.
Web assembly brings the web to a new era
- 1. WebAssembly brings the Web to a new era Boyan Mihaylov @bmihaylov
- 2. WebAssembly (WASM) is compiler target for programs on the Web @bmihaylov
- 3. function add(a, b) { return a + b; } @bmihaylov
- 4. @bmihaylov
- 5. @bmihaylov weak typing, implicit conversion …not really consistent string – string = number ? “+” is for concatenation “+ +” is for addition ?
- 6. @bmihaylov
- 7. JavaScript performance over the years 1995 2008 2017 Browser wars: the introduction of JIT ? Node.js @bmihaylov
- 8. Reusing code on the Web @bmihaylov
- 10. WebAssembly runs in a memory-safe sandboxed environment @bmihaylov
- 11. @bmihaylov VM JavaScript WebAssembly GC Compiler … APIs Rendering DOM + CSSOM WebGL WebSockets WebAudio IndexedDB ServiceWorkers … Resource <script> HTML, CSS, SVG, … Audio Storage Network Graphics … Sandbox, Same-origin policy, …
- 12. WebAssembly provides consistent, predictable performance @bmihaylov
- 14. WebAssembly enables code reusability between native andWeb @bmihaylov
- 16. Where is WebAssembly useful? @bmihaylov Gaming industry Unreal, Unity Multimedia AV1, FLIF, BPG Libraries OpenCV, Box2D, LibSass Platform simulation / emulation DOSBox, MAME, QEMU
- 19. How to produceWebAssembly? @bmihaylov .c C/C++ code .wasm .html WASM module HTML page Browser compilation loading with JavaScript execution
- 20. @bmihaylov Open Source LLVM to JavaScript compiler
- 21. emcc index.c –s WASM=1 –o index.js @bmihaylov
- 22. How compilers work @bmihaylov Source program Intermediate Representation (IR) Assembly or machine code Frontend Backend Static analysis Semantic analysis Code generation Code optimization
- 23. How Emscripten works @bmihaylov .c / .cpp LLVM IR .js clang Fastcomp (LLVM Backend)
- 24. asm.js is an extraordinarily optimizable, low-level subset of JavaScript @bmihaylov
- 25. asm.js @bmihaylov function () { “use asm”; function add(a, b) { a = a | 0; b = b | 0; return a + b | 0; } return { add: add }; }
- 26. asm.js performance @bmihaylov http://kripken.github.io/mloc_emscripten_talk/#/28
- 27. WebAssembly = asm.js done right @bmihaylov
- 28. From asm.js to WebAssembly @bmihaylov .c / .cpp LLVM IR asm.js clang Fastcomp WASM ?
- 29. Binaryen is a compiler and toolchain infrastructure library for WebAssembly rhymes withTargaryen (GoT) @bmihaylov
- 30. From asm.js to WebAssembly @bmihaylov .c / .cpp LLVM IR asm.js clang Fastcomp WASM asm2wasm
- 31. New WebAssembly Backend (unstable) @bmihaylov .c / .cpp LLVM IR .wasm clang LLVMWASM Backend
- 32. DEMO: From C toWebAssembly @bmihaylov
- 33. The distributable, loadable, and executable unit of code in WebAssembly is called a module. @bmihaylov https://github.com/WebAssembly/design/blob/master/Modules.md
- 35. WebAssembly modules are clonable @bmihaylov .wasm ArrayBuffer WASM module WASM instance IndexedDB store / load
- 36. (Future) integration with ES6 modules @bmihaylov <script type=“module”> import * as app from ‘app.wasm’; console.log(app.add(2, 3)); </script>
- 37. DEMO: WebAssembly JavaScript @bmihaylov
- 38. 10 00 0F 20 01 7F 03 80 7F 01 0F 80 80 00 01 0F 80 80 80 00 01 97 46 6C 0B 00 10 00 0F 20 01 7F 03 80 7F 01 0F 80 80 80 00 01 97 46 6C 0B 10 00 0F 20 01 7F 03 80 7F 01 0F 80 80 00 46 6C 0B 10 10 00 0F 20 01 7F 03 80 7F 46 6C 0B 10 10 00 0F @bmihaylov Binary can be a bit overwhelming
- 39. Textual representation @bmihaylov int add(int a, int b) { return a + b; } (module (export “add” (func $add)) (func $add (param $0 i32) (param $1 i32) (result i32) (i32.add (get_local $1) (get_local $0) ) ) ) .c .wast
- 43. Direct access toWebAPIs today everything goes through JavaScript @bmihaylov
- 44. Integration with browser’s garbage collection for better interop with JavaScript & WebAPIs @bmihaylov
- 45. Multi-threading low-level buildings blocks for shared memory between threads, atomics and futexes @bmihaylov
- 46. @bmihaylov “We think Swift should be everywhere and used by everyone.” Craig Federighi Apple’sWWDC 2015 https://media.wired.com/photos/593758ff5321273fc0f945e5/master/w_2666,c_limit/AppleEventTA-539935348.jpg
- 47. @bmihaylov
- 48. @bmihaylov “WebAssembly fills in the gaps that would be awkward to fill with JavaScript.” Eric Elliott https://jeremybutterfield.files.wordpress.com/2014/12/conclusion.jpg
- 49. @bmihaylov
- 50. WebAssembly makes the Web just a compiler target away Boyan Mihaylov / @bmihaylov / boyan.in
Editor's Notes
- #3: WebAssembly lets developers compile from C/C++ or other static-type programming languages in a format that can be loaded in the browser It lets us reuse code and build high-performance apps running in the browser
- #8: JavaScript is a dynamic language Parsing becomes the bottleneck
- #25: Started by Mozilla in 2013 Defines a subset of JavaScript Does only low-level, assembly-like computations
- #28: WebAssembly lets developers compile from C/C++ or other static-type programming languages in a format that can be loaded in the browser It lets us reuse code and create high-performance apps running in the browser
- #30: Compiler and toolchain infrastructure library for WebAssembly asm2wasm – an asm.js-to-WebAssembly compiler tool Integrated in Emscripten
- #32: - Not stable yet
- #33: Show basic compilation of a C program to WASM Which files are produced and what they are used for How to include it JavaScript Show basic hello world compilation with printf
- #38: Importing JavaScript functions Exporting WASM functions