Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Wonderful WebAssembly

Wonderful WebAssembly

WebAssembly is neither "web" nor "assembly" - but 100% amazing. It is our one chance to build a fast, safe, and universal compilation target for all languages and all platforms.

Let me show you why this is cool and how to get started with WebAssembly in Go, C, and Rust.

We will also learn about up and coming features of WebAssembly (like WASI) that will make it even faster and more versatile. Let's change the way we write software forever!

Matthias Endler

November 07, 2019
Tweet

More Decks by Matthias Endler

Other Decks in Programming

Transcript

  1. ...and the future of computing
    Webassembly
    Wonderful
    !

    View Slide

  2. Matthias Endler
    ...works at trivago
    ...mostly Backend
    ...afraid of Frontend
    ...Python/Golang/Rust
    ...Runs "Hello Rust"
    https://endler.dev

    View Slide

  3. hello-rust.show

    View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. ? ? ?

    View Slide

  9. Ritchie Thompson Kernighan

    View Slide

  10. View Slide

  11. View Slide

  12. " UNIX is very simple.

    It just takes a genius

    to understand its simplicity. "
    -- Dennis Ritchie

    View Slide

  13. View Slide

  14. " C is what made

    Unix portable "
    -- Dennis Ritchie

    View Slide

  15. View Slide

  16. View Slide



  17. WWW


    Hello, World!


    View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. function Vb(d) {
    d = d | 0;
    var e = 0, f = 0, h = 0, j = 0, k = 0, l = 0, m = 0, n = 0,
    o = 0, p = 0, q = 0, r = 0, s = 0;
    e = i;
    i = i + 12 | 0;
    f = e | 0;
    [l + 4 >> 2] = 0;
    l = (c[1384465] | 0) + 3 | 0;
    do {
    if (l >>> 0 < 26) {
    if ((c[1356579] | 0) > 0) {
    m = d + 4 | 0;
    n = 0;
    while (1) {
    o = c[(c[1356577] | 0) + (n << 2) >> 2] | 0;
    do {
    if (a[o + 22 | 0] << 24 >> 24 == 24) {
    if (!(Vp(d, o | 0) | 0)) {
    break
    }
    p = (c[m >> 2] | 0) + (((c[h >> 2] | 0) - 1 | 0) * 40 & -1) + 12 | 0;
    q = o + 28 | 0;
    c[p >> 2] = c[q >> 2] | 0;
    c[p + 4 >> 2] = c[q + 4 >> 2] | 0;
    c[p + 8 >> 2] = c[q + 8 >> 2] | 0;
    c[p + 12 >> 2] = c[q + 12 >> 2] | 0;
    c[p + 16 >> 2] = c[q + 16 >> 2] | 0;
    asm.js

    View Slide

  25. [Source]

    View Slide

  26. •Performance differences
    between browsers
    •Still requires 

    parsing, compiling,
    optimising
    •No specification
    Disadvantages of asm.js

    View Slide

  27. Enter WASM
    (Webassembly)

    View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. View Slide

  34. •Fast
    •Safe
    •Well defined
    •Language-independent
    •Streamable
    •Parallelizable
    Wasm is . . .

    View Slide

  35. Wasm is . . . 

    neither web nor assembly

    View Slide

  36. Decoding
    Validation
    Execution

    View Slide

  37. https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71/

    View Slide

  38. i32, i64, f32, f64
    that's it.
    Datatypes!

    View Slide

  39. 1
    5
    3

    View Slide

  40. 1
    5
    3
    0

    View Slide

  41. 5
    3

    View Slide

  42. View Slide

  43. View Slide

  44. (module)

    View Slide

  45. 0000000: 0061 736d ; WASM_BINARY_MAGIC
    0000004: 0100 0000 ; WASM_BINARY_VERSION

    View Slide

  46. ( func )

    View Slide

  47. // JavaScript

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

    View Slide

  48. (func (param i32) (param i32) (result f64)

    )

    View Slide

  49. (func (param i32) (param f32) (local f64)
    get_local 0
    get_local 1
    get_local 2
    )

    View Slide

  50. (func (param $foo i32) (param $bar f32) (local $baz f64)
    get_local $foo
    get_local $bar
    get_local $baz
    )

    View Slide

  51. (module
    (
    func (param $a i32) (param $b i32) (result i32)
    get_local $a
    get_local $b
    i32.add
    )
    )

    View Slide

  52. (module
    (func $add (param $a i32) (param $b i32) (result i32)
    get_local $a
    get_local $b
    i32.add)
    (export "add" (func $add))
    )

    View Slide

  53. (module
    (type $type0 (func (result i32)))
    (table 0 anyfunc)
    (memory 1)
    (export "memory" memory)
    (export "hello" $func0)
    (func $func0 (result i32)
    i32.const 16
    )
    (data (i32.const 16)
    "Hello World\00"
    )
    )

    View Slide

  54. View Slide

  55. wasm2wat
    wat2wasm

    View Slide

  56. View Slide

  57. View Slide

  58. View Slide

  59. View Slide

  60. View Slide

  61. View Slide

  62. 0
    750
    1500
    2250
    3000
    Go C Rust
    How big is " Hello World " (in KB)?
    40k 1k

    View Slide

  63. View Slide

  64. 0
    750
    1500
    2250
    3000
    Go C Rust
    "Hello World" unoptimized (KB)
    40k 1k

    View Slide

  65. 0
    750
    1500
    2250
    3000
    Go C Rust
    "Hello World" unoptimized (KB)
    20k 400 bytes

    View Slide

  66. Examples!

    View Slide

  67. Wasm!

    View Slide

  68. https://endler.dev/2019/tinysearch

    View Slide

  69. https://squoosh.app/editor

    View Slide

  70. View Slide

  71. " Serverless "

    View Slide

  72. View Slide

  73. View Slide

  74. View Slide

  75. View Slide

  76. View Slide

  77. View Slide

  78. View Slide

  79. https://wapm.io/

    View Slide

  80. https://hacks.mozilla.org/2019/03/standardizing-wasi-a-webassembly-system-interface/

    View Slide

  81. View Slide

  82. https://www.youtube.com/watch?v=QKTh5Xj60pI

    View Slide

  83. Thanks!
    endler.dev/talks

    View Slide