with WebAssembly Boyan Mihaylov @boyanio boyan.io - PowerPoint PPT Presentation

In-depth hands-on experience with WebAssembly Boyan Mihaylov @boyanio boyan.io

https://github.com/boyanio/wasm-class/ @boyanio

WebAssembly ( WASM ) is compiler target for programs on the Web @boyanio

function add(a, b) { return a + b; } @boyanio

JavaScript performance over the years ? Node.js Browser wars: the introduction of JIT 1995 2008 2017 @boyanio

WebAssembly is a typed language It supports 32 and 64-bit integers (i32, i64) and floating points (f32, f64) @boyanio

Binary representation (.wasm) 0061 736d 0100 0000 0187 8080 8000 0160 027f 7f01 7f03 8280 8080 0001 0004 8480 8080 0001 7000 0005 8380 8080 0001 0001 0681 8080 8000 0007 9080 8080 0002 066d 656d 6f72 7902 0003 6164 6400 000a 8d80 8080 0001 8780 8080 0000 2001 2000 6a0b @boyanio

Textual representation (.wat) (module (table 0 anyfunc) (memory $0 1) (export “memory” (memory $0)) (export “add” ( func $add)) (func $add (; 0 ;) (param $0 i32) (param $1 i32) (result i32) (i32.add (get_local $1) (get_local $0) ) ) ) @boyanio

Compile Re- Fetch Parse + Execute GC optimize optimize Compile Fetch Decode + Execute optimize Fetch / Decode / Compile + optimize Execute (streaming API) @boyanio

WebAssembly provides consistent, predictable performance @boyanio

WebAssembly enables code reusability between native and Web @boyanio

Traditional multi-target compilation x64 Windows x86 x64 .cpp MAC x86 Source code x64 ARM v7 Linux x86 ARM v8 @boyanio

Multi-target compilation with WebAssembly .cpp .wasm Source code WebAssembly module @boyanio

Where is WebAssembly useful? Gaming industry Libraries Unreal, Unity OpenCV, Box2D, LibSass Multimedia Platform simulation / emulation AV1, FLIF, BPG DOSBox, MAME, QEMU @boyanio

How to produce WebAssembly load with execute compile JavaScript .cpp .wasm .html Source WASM module HTML page Browser @boyanio

WasmFiddle https://wasdk.github.io/WasmFiddle/ @boyanio

Open Source LLVM to JavaScript compiler https://kripken.github.io/emscripten-site/ @boyanio

emcc index.c – s WASM=1 – o index.js @boyanio

How compilers work Frontend Backend Source Intermediate Assembly or program Representation (IR) machine code Static analysis Code generation Semantic analysis Code optimization @boyanio

How Emscripten works Fastcomp clang (LLVM Backend) C / C++ LLVM IR JavaScript @boyanio

asm.js is an extraordinarily optimizable, low-level subset of JavaScript @boyanio

asm.js function () { “use asm ”; function add(a, b) { a = a | 0; b = b | 0; return a + b | 0; } return { add: add }; } @boyanio

asm.js performance @boyanio http://kripken.github.io/mloc_emscripten_talk/#/28

WebAssembly = asm.js done right @boyanio

From asm.js to WebAssembly clang Fastcomp asm2wasm C / C++ LLVM IR asm.js WASM @boyanio

New WebAssembly Backend (unstable) LLVM WASM clang Backend C / C++ LLVM IR WASM @boyanio

The distributable, loadable, and executable unit of code in WebAssembly is called a module . @boyanio https://github.com/WebAssembly/design/blob/master/Modules.md https://github.com/WebAssembly/design/blob/master/Modules.md

Module imports & exports const imports = { const exports = module.exports; “name”: { exports.printName(); “first”: “Anna”, exports.reverseName(); “last”: “Nanna” }, “print”: function (what) { console.log(what); } }; @boyanio

Linear memory const imports = { “ env ”: { “memory”: new WebAssembly.Memory({ initial: 10, maximum: 100}), … } }; 0 1 2 3 4 5 6 00010011 00100100 10011100 11100011 00101111 00010000 01001110 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 @boyanio

Linear memory What WebAssembly sees 0 1 2 3 4 5 6 00010011 00100100 10011100 11100011 00101111 00010000 01001110 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 What JavaScript sees @boyanio

Loading WebAssembly // Traditional approach fetch(‘ app.wasm ’) .then(result => result.arrayBuffer()) .then(buffer => WebAssembly.instantiate(buffer, imports)) .then(({ module, instance }) => { instance.exports.main(); }); // Using the streaming API WebAssembly.instantiateStreaming (fetch(‘ app.wasm ’), imports) .then(({ module, instance }) => { instance.exports.main(); }); @boyanio

How secure is WebAssembly? @boyanio

WebAssembly runs in a memory-safe sandboxed environment @boyanio

Resource <script> HTML, CSS, SVG, … VM APIs JavaScript WebAssembly Rendering DOM + CSSOM WebAudio WebGL IndexedDB GC Compiler … WebSockets Service Workers … Sandbox, Same- origin policy, … Network Audio … Storage Graphics @boyanio

@boyanio http://caniuse.com/#search=WebAssembly

What about browsers not supporting WebAssembly? Fallback to asm.js @boyanio

From version 1.0 to next @boyanio

Direct access to WebAPIs today everything goes through JavaScript @boyanio

Integration with browser’s garbage collection for better interop with JavaScript & WebAPIs @boyanio

Multi-threading ??? low-level buildings blocks for shared memory between threads, atomics and futexes @boyanio

What languages can be compiled to WebAssembly? https://boyan.io/wasm-wheel/ @boyanio