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 full-size slide

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

    View full-size slide

  3. hello-rust.show

    View full-size slide

  4. Ritchie Thompson Kernighan

    View full-size slide

  5. " UNIX is very simple.

    It just takes a genius

    to understand its simplicity. "
    -- Dennis Ritchie

    View full-size slide

  6. " C is what made

    Unix portable "
    -- Dennis Ritchie

    View full-size slide



  7. WWW


    Hello, World!


    View full-size slide

  8. 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 full-size slide

  9. •Performance differences
    between browsers
    •Still requires 

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

    View full-size slide

  10. Enter WASM
    (Webassembly)

    View full-size slide

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

    View full-size slide

  12. Wasm is . . . 

    neither web nor assembly

    View full-size slide

  13. Decoding
    Validation
    Execution

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. // JavaScript

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

    View full-size slide

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

    )

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. (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 full-size slide

  24. wasm2wat
    wat2wasm

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. https://squoosh.app/editor

    View full-size slide

  30. " Serverless "

    View full-size slide

  31. https://wapm.io/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  34. Thanks!
    endler.dev/talks

    View full-size slide