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

Recap Modern WebAssembly in CDS 2019

Jimmy Moon
November 23, 2019

Recap Modern WebAssembly in CDS 2019

Recap Modern WebAssembly in CDS 2019

Jimmy Moon

November 23, 2019
Tweet

More Decks by Jimmy Moon

Other Decks in Programming

Transcript

  1. chrome://modern-webassembly

    View full-size slide

  2. WebAssembly?

    View full-size slide

  3. aka, WASM [਋ই્]

    View full-size slide

  4. https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71
    WebAssembly?
    - ਢীࢲ ز੘ೞח ࢜۽਍ ঱য
    - ׮ܲ ঱য۽ ࠗఠ ஹ౵ੌ
    - ୭੸ച غҊ ੌҙࢿ ੓ח ࢿמ
    - ੗߄झ௼݀౟ܳ ؀୓ ೞ૑ ঋ਺

    View full-size slide

  5. https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71
    WebAssembly?
    - ਢীࢲ ز੘ೞח ࢜۽਍ ঱য
    - ׮ܲ ঱য۽ ࠗఠ ஹ౵ੌ
    - ୭੸ച غҊ ੌҙࢿ ੓ח ࢿמ
    - ੗߄झ௼݀౟ܳ ؀୓ ೞ૑ ঋ਺

    View full-size slide

  6. wasm-pack build
    WAT
    .wasm

    View full-size slide

  7. WebAssembly
    Instructions
    Stack
    0
    0 (I32, i32) -> (i32)
    1 (I64, i64) -> ()
    0 Type 0
    1 Type 1
    0 Code for Func 0
    1 Code for Func 1
    1 3 4 5 6 8
    0 1 2 3 4
    $type0
    Memory
    Type
    Function
    Code
    $func0
    i32.store

    i32.load
    2 7
    ArrayBuffer
    i32.add

    get_local $p1

    get_local $p1
    pop
    push

    View full-size slide

  8. Value Types i32, i64, f32, f64
    Linear Memory Access ii32.load, i64.load, f32.load, f64.load, i64.store, f32.store, f64.store, and more
    Local, Global Variable get_local, set_local, tee_local, get_global, set_global
    Control constructs and
    instructions
    nop, block, loop, if, else, br, br_if, br_table, return, end
    Calls call, call_indirect
    Constants i32.const, i64.const, f32.const, f64.const,
    Operators i32.add, i32.sub, i32.mul, f32.add, f32.sub, f32.mul, f32.div, f32.abs, f64.add, f64.sub, and more

    View full-size slide

  9. https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/

    View full-size slide

  10. https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/

    View full-size slide

  11. https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/

    View full-size slide

  12. https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/

    View full-size slide

  13. https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/

    View full-size slide

  14. https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/

    View full-size slide

  15. https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/

    View full-size slide

  16. https://blog.logrocket.com/webassembly-how-and-why-559b7f96cd71
    WebAssembly?
    - ਢীࢲ ز੘ೞח ࢜۽਍ ঱য
    - ׮ܲ ঱য۽ ࠗఠ ஹ౵ੌ
    - ୭੸ച غҊ ੌҙࢿ ੓ח ࢿמ
    - ੗߄झ௼݀౟ܳ ؀୓ ೞ૑ ঋ਺

    View full-size slide

  17. https://www.youtube.com/watch?v=njt-Qzw0mVY

    View full-size slide

  18. https://www.youtube.com/watch?v=njt-Qzw0mVY

    View full-size slide

  19. Javascript

    Source Code Ignition

    (JS Interpreter)
    TurboFan

    (Optimization Compiler)
    Deoptimize
    Optimize

    (Profile Data)
    Bytecode
    Optimized

    Code
    Collecting

    Information
    Profiling
    Data
    Javascript Pipeline

    View full-size slide

  20. Liftoff

    (WebAssembly baseline compiler)
    Hot Swap
    Execution

    Immediately
    WASM
    TurboFan

    (Optimization Compiler)
    Off-thread

    Optimization
    WebAssembly Pipeline

    View full-size slide

  21. https://developers.google.com/web/updates/2019/02/hotpath-with-wasm

    View full-size slide

  22. https://developers.google.com/web/updates/2019/02/hotpath-with-wasm

    View full-size slide

  23. WebAssembly?
    - ਢীࢲ ز੘ೞח ࢜۽਍ ঱য
    - ׮ܲ ঱য۽ ࠗఠ ஹ౵ੌ
    - ୭੸ച غҊ ੌҙࢿ ੓ח ࢿמ
    - ੗߄झ௼݀౟ܳ ؀୓ ೞ૑ ঋ਺

    View full-size slide

  24. WebAssembly
    Javascript

    View full-size slide

  25. WebAssembly
    ??

    View full-size slide

  26. https://github.com/ragingwind/wasm-hnpwa

    View full-size slide

  27. Implicit Caching
    Liftoff

    (WebAssembly baseline compiler)
    Hot Swap
    Execution

    Immediately
    WASM
    TurboFan

    (Optimization Compiler)
    Off-thread

    Optimization
    https://www.youtube.com/watch?v=kZrl91SPSpc

    View full-size slide

  28. Implicit Caching
    Liftoff

    (WebAssembly baseline compiler)
    Hot Swap
    Execution

    Immediately
    WASM
    TurboFan

    (Optimization Compiler)
    Off-thread

    Optimization
    HTTP Cache
    Loads
    Optimized
    Module
    https://www.youtube.com/watch?v=kZrl91SPSpc
    New Session

    View full-size slide

  29. Implicit Caching

    View full-size slide

  30. Implicit Caching
    WebAssembly
    HTTP Cache
    Keep your URLs stable

    View full-size slide

  31. https://www.youtube.com/watch?v=kZrl91SPSpc
    Startup Time

    View full-size slide

  32. SharedArrayBuffer
    Threads
    Worker

    CPU Core
    WASM Instance
    Worker

    CPU Core
    WASM Instance
    Worker

    CPU Core
    WASM Instance
    https://www.youtube.com/watch?v=kZrl91SPSpc
    atomic.wait
    atomic.notify

    View full-size slide

  33. Threads in C
    https://github.com/ragingwind/wasm-hello-world/tree/master/clang-thread

    View full-size slide

  34. Threads in Rust
    https://github.com/ragingwind/wasm-hello-world/tree/master/rust-thread
    worker.js
    lib.rs

    View full-size slide

  35. Threads in Rust
    https://github.com/ragingwind/wasm-hello-world/tree/master/rust-thread

    View full-size slide

  36. https://medium.com/google-earth/performance-of-web-assembly-a-thread-on-threading-54f62fd50cf7
    Threads

    View full-size slide

  37. https://www.youtube.com/watch?v=kZrl91SPSpc
    Threads

    View full-size slide

  38. Threads
    https://www.youtube.com/watch?v=kZrl91SPSpc

    View full-size slide

  39. ✅ ❌
    Threads

    View full-size slide

  40. SIMD
    Single Instruction, Multiple Data

    View full-size slide

  41. https://github.com/google/mediapipe/blob/master/mediapipe/docs/web.md
    Chrome Canary with
    #enable-webassembly-simd

    View full-size slide

  42. https://www.youtube.com/watch?v=kZrl91SPSpc

    View full-size slide

  43. https://www.youtube.com/watch?v=kZrl91SPSpc

    View full-size slide

  44. https://www.youtube.com/watch?v=kZrl91SPSpc

    View full-size slide

  45. https://www.youtube.com/watch?v=kZrl91SPSpc

    View full-size slide

  46. https://www.youtube.com/watch?v=kZrl91SPSpc

    View full-size slide

  47. Tooling Updates
    - Native LLVM + WASM (clang +Binaryen)
    - Asyncify, Using asynchronous APIs
    - Debugging, WAT format, Source map, Native
    debugging

    View full-size slide

  48. Native LLVM Backend
    https://www.youtube.com/watch?v=kZrl91SPSpc

    View full-size slide

  49. Native LLVM Backend
    https://www.youtube.com/watch?v=kZrl91SPSpc

    View full-size slide

  50. https://dassur.ma/things/c-to-webassembly/

    View full-size slide

  51. Native LLVM Backend
    https://v8.dev/blog/emscripten-llvm-wasm

    View full-size slide

  52. Native LLVM Backend
    https://v8.dev/blog/emscripten-llvm-wasm

    View full-size slide

  53. Tooling Updates
    - Native LLVM + WASM (clang +Binaryen)
    - Asyncify, Using asynchronous APIs
    - Debugging, WAT format, Source map, Native
    debugging

    View full-size slide

  54. Asyncify
    https://www.youtube.com/watch?v=kZrl91SPSpc

    View full-size slide

  55. Asyncify
    https://www.youtube.com/watch?v=kZrl91SPSpc

    View full-size slide

  56. $ emcc example.c -O3 -o a.html -s ASYNCIFY -s 'ASYNCIFY_IMPORTS=["do_fetch"]'
    Asyncify

    View full-size slide

  57. Tooling Updates
    - Native LLVM + WASM (clang +Binaryen)
    - Asyncify, Using asynchronous APIs
    - Debugging, WAT format, Source map, Native
    debugging

    View full-size slide

  58. WAT Debugging

    View full-size slide

  59. Sourcemap, Native Debugging
    $ rustc -g --target wasm32-unknown-unknown -O ./src/lib.rs -o ./pkg/square.wasm

    View full-size slide

  60. https://hacks.mozilla.org/2019/11/announcing-the-bytecode-alliance/

    View full-size slide

  61. https://github.com/WebAssembly/interface-types/blob/master/proposals/interface-types/Explainer.md
    Interface Types

    View full-size slide

  62. https://hacks.mozilla.org/2019/08/webassembly-interface-types/

    View full-size slide