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 Slide

  2. View Slide

  3. WebAssembly?

    View Slide

  4. aka, WASM [਋ই્]

    View Slide

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

    View Slide

  6. WebAssembly

    View Slide

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

    View Slide

  8. wasm-pack build
    WAT
    .wasm

    View Slide

  9. View Slide

  10. 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 Slide

  11. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  22. View Slide

  23. Javascript

    Source Code Ignition

    (JS Interpreter)
    TurboFan

    (Optimization Compiler)
    Deoptimize
    Optimize

    (Profile Data)
    Bytecode
    Optimized

    Code
    Collecting

    Information
    Profiling
    Data
    Javascript Pipeline

    View Slide

  24. Liftoff

    (WebAssembly baseline compiler)
    Hot Swap
    Execution

    Immediately
    WASM
    TurboFan

    (Optimization Compiler)
    Off-thread

    Optimization
    WebAssembly Pipeline

    View Slide

  25. View Slide

  26. View Slide

  27. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  31. WebAssembly
    Javascript

    View Slide

  32. WebAssembly
    ??

    View Slide

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

    View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. Demo

    View Slide

  38. WebAssembly

    View Slide

  39. 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 Slide

  40. 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 Slide

  41. Implicit Caching

    View Slide

  42. Implicit Caching
    WebAssembly
    HTTP Cache
    Keep your URLs stable

    View Slide

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

    View Slide

  44. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  51. ✅ ❌
    Threads

    View Slide

  52. SIMD
    Single Instruction, Multiple Data

    View Slide

  53. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  71. WAT Debugging

    View Slide

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

    View Slide

  73. WebAssembly

    View Slide

  74. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  78. WebAssembly

    View Slide