[Boyan Mihaylov] How WebAssembly is changing the Web and what it means for you

Content level: Intermediate

JavaScript has become the de-facto language for the Web, but complex applications like games, CAD modelling and video streaming require more. WebAssembly is a new language allowing us to compile statically-typed languages and run them in the browser and hence reusing code over the Web. It fills the gaps, that are weird to fill in with JavaScript, but will definitely have influence on the monopoly of JavaScript on the Web.

Boyan Mihaylov
MP Pension / Denmark

Transcript

1. How WebAssembly is changing the Web and what it means for you Boyan Mihaylov @boyanio boyan.io
2. WebAssembly (WASM) is compiler target for programs on the Web @boyanio
3. @boyanio https://vimeo.com/272924131
4. Traditional multi-target compilation @boyanio .cpp Source code Windows MAC Linux x86 x64 x86 x64 x86 x64 ARM v8 ARM v7
5. Multi-target compilation with WebAssembly @boyanio .cpp Source code .wasm WebAssembly module
6. function add(a, b) { return a + b; } @boyanio
7. @boyanio
8. @boyanio weak typing, implicit conversion …not really consistent string – string = number ? “+” is for concatenation “+ +” is for addition ?
9. @boyanio
10. WebAssembly is a typed language It supports 32 and 64-bit integers (i32, i64) and floating points (f32, f64) @boyanio
11. Binary representation (.wasm) @boyanio 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
12. Textual representation (.wat) @boyanio (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) ) ) )
13. @boyanio Parse Compile + optimize Re- optimize Execute GC Fetch Decode Compile + optimize Execute Fetch Execute Fetch / Decode / Compile + optimize (streaming API)
14. WebAssembly provides consistent, predictable performance @boyanio
15. @boyanio 3D animation performance https://github.com/sessamekesh/wasm-3d-animation-demo
16. Performance comparison Average animation time (ms) @boyanio 98.3 91.3 111.7 6.8 4.6 7.5 Chrome Firefox Edge JavaScript WebAssembly https://www.lucidchart.com/techblog/2017/05/16/webassembly-overview-so-fast-so-fun-sorta-difficult/
17. @boyanio https://pspdfkit.com/blog/2018/a-real-world-webassembly-benchmark/ A real-world WebAssembly benchmark
18. Reusing code on the Web @boyanio
19. WebAssembly enables code reusability between native and Web @boyanio
20. What can we do with WebAssembly? @boyanio
21. @boyanio Windows 2000 in the browser https://bellard.org/jslinux/vm.html? url=https://bellard.org/jslinux/win2 k.cfg&mem=192&graphic=1&w=10 24&h=768
22. @boyanio Vim in the browser https://rhysd.github.io/vim.wasm/
23. @boyanio DOS games in the browser https://archive.org/details/msdos_Prince_of_Persia_1990
24. How to start with WebAssembly @boyanio
25. @boyanio Wasm Fiddle https://wasdk.github.io/WasmFiddle/
26. @boyanio Open Source LLVM to JavaScript compiler
27. emcc index.c –o index.js @boyanio
28. 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
29. Module imports & exports @boyanio const imports = { “name”: { “first”: “Anna”, “last”: “Nanna” }, “print”: function (what) { console.log(what); } }; const exports = module.exports; exports.printName(); exports.reverseName();
30. Linear memory @boyanio 0 1 2 3 4 5 00010011 6 00100100 7 10011100 8 11100011 9 00101111 10 00010000 11 01001110 12 13 14 15 16 17 18 19 0 1 2 3 4 5 6 const imports = { “env”: { “memory”: new WebAssembly.Memory({ initial: 10, maximum: 100}), … } };
31. @boyanio
32. Linear memory @boyanio 0 1 2 3 4 5 00010011 6 00100100 7 10011100 8 11100011 9 00101111 10 00010000 11 01001110 12 13 14 15 16 17 18 19 0 1 2 3 4 5 6 What WebAssembly sees What JavaScript sees
33. Working with strings @boyanio 00010011 00100100 10011100 11100011 00101111 // app.c char * hello(void) { return “Hello, there!”; } Encode // index.js let exp = wasmInst.exports; let result = exp.hello(); console.log(result); // 12 console.log(decode(result)); // Hello, there! Decode
34. Loading WebAssembly @boyanio fetch(‘app.wasm’) .then(result => result.arrayBuffer()) .then(buffer => WebAssembly.instantiate(buffer, imports)) .then(({ module, instance }) => { instance.exports.main(); }); // Traditional approach WebAssembly.instantiateStreaming(fetch(‘app.wasm’), imports) .then(({ module, instance }) => { instance.exports.main(); }); // Using the streaming API
35. @boyanio https://www.washingtonexaminer.com/cnn-nyt-reporters-aggressively-miss-the-point-with-nikki-haleys- reaction-to-the-grammys-stupid-fire-and-fury-reading
36. @boyanio “WebAssembly fills in the gaps that would be awkward to fill with JavaScript.” Eric Elliott https://jeremybutterfield.files.wordpress.com/2014/12/conclusion.jpg
37. @boyanio https://maas.museum/inside-the-collection/2010/03/17/see-you-round-like-a-monopoly-board/ WebAssembly will break the JavaScript monopoly
38. The Web of JavaScript frameworks @boyanio
39. @boyanio https://github.com/vuejs/vue/issues/8193 https://github.com/glimmerjs/glimmer-vm/pull/752
40. @boyanio Angular & WebAssembly https://boyan.io/angular-wasm/
41. The rise of non-JavaScript frameworks @boyanio
42. @boyanio Blazor https://blazor.net
43. @boyanio Blazor-inspired framework in Go https://github.com/bketelsen/wasmplay
44. How secure is WebAssembly? @boyanio
45. @boyanio
46. WebAssembly runs in a memory-safe sandboxed environment @boyanio
47. @boyanio http://caniuse.com/#search=WebAssembly
48. @boyanio WebAssembly enables different languages to work together on the Web https://boyan.io/wasm-wheel/
49. The future of Web belongs to those, who compile Boyan Mihaylov / @boyanio / boyan.io