Recap Modern WebAssembly in CDS 2019

Recap Modern WebAssembly in CDS 2019

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