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

[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

3a6de6bc902de7f75c0e753b3202ed52?s=128

Google Developers Group Lviv

October 13, 2018
Tweet

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