Please Use The Fourth Language - WebAssembly

This presentation covers overviews of WebAssembly from the bottom to the new roadmap.

Transcript

1. Licensed http://clipart-library.com/clip-art/94-943337_star-wars-quotes-yoda-star-wars-humor-sea.htm
   

   View Slide

2. View Slide

3. New Language for the
   Web
   

   View Slide

4. HTML / CSS / JS
   Since 1996, HTML, CSS, and Javascript languages for the Web
   

   View Slide

5. HTML / CSS / JS / WASM
   Following HTML, CSS and JavaScript,
   WebAssembly becomes the fourth language for
   the Web which allows code to run in the browser
   in 2019
   

   View Slide

6. View Slide

7. View Slide

8. Low-Level Language
   

   View Slide

9. HTML / CSS / JS
   Structure Style Language
   

   View Slide

10. HTML
    Structure
    
    
    
    Web Application
    <br/>h1 {<br/>display: flex;<br/>width: 100%;<br/>font-size: 3em;<br/>color: red;<br/>}<br/>
    
    
    
    Hello World
    
    Say Hi
    <br/>WebAssembly.instantiateStreaming(<br/>fetch("add.wasm")<br/>).then(module => {<br/>const { add } = module.instance.exports;<br/>document<br/>.querySelector("button")<br/>.addEventListener("click", () => {<br/>alert(`10 + 10 = ${add(10, 10)}`)<br/>});<br/>});<br/>
    
    
    

    View Slide

11. CSS
    Style
    
    
    
    Web Application
    <br/>h1 {<br/>display: flex;<br/>width: 100%;<br/>font-size: 3em;<br/>color: red;<br/>}<br/>
    
    
    
    Hello World
    
    Say Hi
    <br/>WebAssembly.instantiateStreaming(<br/>fetch("add.wasm")<br/>).then(module => {<br/>const { add } = module.instance.exports;<br/>document<br/>.querySelector("button")<br/>.addEventListener("click", () => {<br/>alert(`10 + 10 = ${add(10, 10)}`)<br/>});<br/>});<br/>
    
    
    

    View Slide

12. Javascript
    High-level Language
    
    
    
    Web Application
    <br/>h1 {<br/>display: flex;<br/>width: 100%;<br/>font-size: 3em;<br/>color: red;<br/>}<br/>
    
    
    
    Hello World
    
    Say Hi
    <br/>WebAssembly.instantiateStreaming(<br/>fetch("add.wasm")<br/>).then(module => {<br/>const { add } = module.instance.exports;<br/>document<br/>.querySelector("button")<br/>.addEventListener("click", () => {<br/>alert(`10 + 10 = ${add(10, 10)}`)<br/>});<br/>});<br/>
    
    
    

    View Slide

13. HTML / CSS / JS / WASM
    Structure Style High
    Level
    Language
    Low
    Level
    Language
    

    View Slide

14. - https://www.youtube.com/watch?v=TGo3vJVTlyQ
    

    View Slide

15. - https://www.youtube.com/watch?v=TGo3vJVTlyQ
    

    View Slide

16. WASM
    Low-level Language
    
    
    
    Web Application
    <br/>h1 {<br/>display: flex;<br/>width: 100%;<br/>font-size: 3em;<br/>color: red;<br/>}<br/>
    
    
    
    Hello World
    
    Say Hi
    <br/>WebAssembly.instantiateStreaming(<br/>fetch("add.wasm")<br/>).then(module => {<br/>const { add } = module.instance.exports;<br/>document<br/>.querySelector("button")<br/>.addEventListener("click", () => {<br/>alert(`10 + 10 = ${add(10, 10)}`)<br/>});<br/>});<br/>
    
    
    

    View Slide

17. WASM
    Low-level Language
    // c
    int add(int x, int y) {
    return x + y;
    }
    // rust
    fn add (x: u32, y: u32) -> u32 {
    x + y
    }
    // AssemblyScript
    function add(x: i32, y: i32): i32 {
    return x + y;
    }
    

    View Slide

18. View Slide

19. View Slide

20. Run with near-native
    - Predictable performance
    - Optimized for fast load and
    execution
    - Efficient memory management
    - Use 'better' language to solve a
    certain problem
    

    View Slide

21. High-Level Low-Level
    - Less slow than
    - Runtime optimization
    - Loose memory management
    - Runtime error
    - Promised performance
    - Efficient memory management
    - Rooms for performance improvement
    - Reuse popular libraries
    - Easy to learn, low learning curve
    - No compile and build
    - No need for memory management
    👎
    👍 👍
    👎
    - Hard to learn
    - Compile and build to run
    - Difficult memory management
    - Poor programming productivity
    

    View Slide

22. Lin: "ݢ੷ Javascript ৬ WebAssembly प೯ غח җ੿ਸ ঌইࠁ੗"
    "ೞ੉"
    "п ߄ח যڃ ੘সਸ ೞח૑ ࠁৈ઻"
    https://hacks.mozilla.org/2017/02/what-makes-webassembly-fast/
    

    View Slide

23. Lin: "Javascript ূ૓੄ प೯ җ੿ ੉Ҋ"
    Lin: "WebAssembly ূ૓੄ प೯ җ੿"
    "ٯ ࠊب प೯ө૑ җ੿੉ рױೞ૑"
    https://hacks.mozilla.org/2017/02/what-makes-webassembly-fast/
    

    View Slide

24. WebAssembly: "դ ੉޷ Bytecode, ղ ௏٘ Ѥٜ૑݃"
    Javascript: "ݢ੷ ౵य೧ࢲ AST ٜ݅Ҋ, ੗.. ೙ਃೠѱ ޤջ ࠁ੗
    https://hacks.mozilla.org/2017/02/what-makes-webassembly-fast/
    

    View Slide

25. WebAssembly: "੉޷ प೯ী ೙ਃೠ Ѥ ળ࠺ ৮ܐ!"
    Javascript: "ࡅܰѱ प೯ ೞ۰ݶ ೙ਃೠ Ѣ ݢ੷"
    
    "ա઺ী ஹ౵ੌ, ୭੸ച ب ׮द׮द"
    https://hacks.mozilla.org/2017/02/what-makes-webassembly-fast/
    

    View Slide

26. WebAssembly: "੿੸ ఋੑ ࢎਊ, JIT ח ೡੌ੉ হਸѦ"
    Javascript: "ਃѢ ׮द ୭੸ച ೧ঠ ೡ ٠, Ӓ ఋੑ੉ ইפ֎"
    https://hacks.mozilla.org/2017/02/what-makes-webassembly-fast/
    

    View Slide

27. Javascript: "ש ௏٘ ಁఢҗ JIT ש ٮۄ प೯੉ ׳ۄ૗. ഷ"
    WebAssembly: "زੌ ߄੉ցܻ (Ѣ੄) زੌ ࢿמ"
    https://hacks.mozilla.org/2017/02/what-makes-webassembly-fast/
    

    View Slide

28. https://hacks.mozilla.org/2017/02/what-makes-webassembly-fast/
    Javascript: "୒ࣗ઺. प೯ ୹ੑ Ә૑"
    WebAssembly: "୒ࣗ? ই૒਷ ݽܴ"
    

    View Slide

29. View Slide

30. Javascript

    Source Code Ignition

    (JS Interpreter)
    TurboFan

    (Optimization Compiler)
    Optimized

    Machine

    Code
    Deoptimize
    Javascript Pipeline
    Parse
    Bytecode
    BlinkOn 6 Day 1 Talk 2: Ignition - an interpreter for V8 - YouTube / https://www.youtube.com/watch?v=r5OWCtuKiAk
    

    View Slide

31. https://mathiasbynens.be/notes/prototypes#tradeoffs
    Javascript Pipeline
    

    View Slide

32. Liftoff

    (WebAssembly baseline compiler)
    Hot Swap
    Execution

    Immediately
    WASM
    TurboFan

    (Optimization Compiler)
    Off-thread

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

    View Slide

33. 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

34. Using Implicit Caching
    https://www.youtube.com/watch?v=kZrl91SPSpc
    

    View Slide

35. View Slide

36. View Slide

37. View Slide

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

    View Slide

39. https://www.youtube.com/watch?v=Yo83yhRN_Ss
    

    View Slide

40. https://www.youtube.com/watch?v=Yo83yhRN_Ss
    

    View Slide

41. Javascript WebAssembly
    - Compiles, and builds to run
    - Optimized performance
    - Promised predictable performance
    - Efficient memory management
    - Easy to code and run
    - Less slow than
    - High cost for peak performance
    - Better experience in DOM/Web APIs
    - Make a small or simple code
    - Code and check the result often
    - Call a DOM, Web APIs frequently
    - Make a hot-path code
    

    View Slide

42. - Different to Grandma's VM
    - Virtual Instruction Set Architecture (V-ISA)
    - Written in a variety of languages, C/C++, Rust, Go,
    AssemblyScript, ...
    - Linear Memory, Implicit Stack, Some Instructions
    - No operation system access and built-in functions
    - Running on trusted runtimes, V8, SpiderMonkey,
    Wasmtime, Lucet, WAMR, Cranelift, ...
    Virtual Machine
    

    View Slide

43. (module
    (func $add
    (param $x i32) (param $y i32)
    (result i32)
    get_local $x
    get_local $y
    i32.add)
    (export "add" (func $add))
    )
    WebAssembly
    Instructions
    0 (i32, i32) -> (i32)
    1 (i64, i64) -> (i64)
    0 Type 0
    1 Type 1
    0 Code for Function 0
    1 Code for Function 1
    $add
    Export
    Type
    Function
    Code
    map memory 0 of 1
    i32.add
    get_local $y
    get_local $x
    0 1 3 4 5 6 8
    2 7
    ArrayBuffer
    Module
    9 0 2 3 4 5 7
    1 6 8
    Push
    Pop
    0 "$add", Function 0
    1 "$add64", Function 1
    Memory
    0 1 2 3 4 1 2 3
    i32.store
    i32.load
    

    View Slide

44. View Slide

45. https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/
    Host: "ݫݽܻ (ArrayBuffer) ખ ઱ࣁਃ"
    "࢜ WASM ੉ ৳যਃ" "ೞ੉ ژ աঠ"
    

    View Slide

46. WASM: "࢜۽ ৳ਵפ ੋࢎ ೧ঠ૑ Hello ܳ ࠁղ੗"
    https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/
    

    View Slide

47. WASM: "ղ ݫݽܻ 0 ߣ ࠗఠ 'H', 'e', 'l', ',l', 'o' ੸যঠ૑

    0 ী 01001000, 1 ী 01100101, 2 ী 01101100 ... "
    https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/
    

    View Slide

48. Host: "Hello ۄ... ੋࢎࢿ੉ જ֎, ݈਷ ૣҊ"
    https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/
    

    View Slide

49. WASM: "0 ~ 9 ө૑о ࠽ܽѢ"
    https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/
    

    View Slide

50. WASM: "աݠ૑ח դ ݽܴ"
    "੽Ӕೞ૑ ޅೣ"
    https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/
    

    View Slide

51. "WASM о աщਵפ ஖ਕঠ૑"
    Host: "Әߑ աщ֎"
    https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/
    

    View Slide

52. Taking advantages from
    Low-level languages
    - Multi-thread
    - SIMD
    - Multi-language
    - Reuse popular libraries wide
    spread
    

    View Slide

53. SharedArrayBuffer
    Worker1
    CPU Core
    WASM Instance
    Worker2
    CPU Core
    WASM Instance
    Worker3
    CPU Core
    WASM Instance
    https://www.youtube.com/watch?v=kZrl91SPSpc
    atomic.wait
    atomic.notify
    Thread
    Data1
    Data1
    Data1
    

    View Slide

54. View Slide

55. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

61. https://rustwasm.github.io/wasm-bindgen/exbuild/raytra
    

    View Slide

62. https://code.videolan.org/jbk/vlc.js
    vlc.js
    

    View Slide

63. View Slide

64. View Slide

65. View Slide

66. Single Instruction, Multiple Data
    

    View Slide

67. View Slide

68. https://github.com/google/mediapipe
    

    View Slide

69. View Slide

70. https://dannadori.medium.com/google-meet-virtual-background-with-amazon-chime-sdk-34656a625fed
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

76. Non-Web
    - WebAssembly System Interface
    (WASI)
    - WebAssembly Interface Types
    

    View Slide

77. View Slide

78. https://hacks.mozilla.org/2019/03/standardizing-wasi-a-webassembly-system-interface/
    WebAssembly System
    Interface (WASI)
    

    View Slide

79. https://hacks.mozilla.org/2019/08/webassembly-interface-types/
    WebAssembly Interface Type
    

    View Slide

80. WASI Software Architecture
    https://github.com/bytecodealliance/wasmtime/blob/main/docs/WASI-overview.md
    

    View Slide

81. Practice
    - Hello Wasm
    - WASI Demo
    

    View Slide

82. View Slide

83. View Slide

84. View Slide

85. View Slide

86. ˞
    ˝
    ˟
    

    View Slide

87. https://github.com/bytecodealliance/wasmtime/blob/main/docs/wasm-rust.md
    ˝
    ˞
    ˟
    ˠ
    

    View Slide

88. https://github.com/bytecodealliance/wasmtime/blob/main/docs/wasm-rust.md
    ˝
    ˞
    ˟
    ˠ
    

    View Slide

89. https://github.com/bytecodealliance/wasmtime/blob/main/docs/wasm-rust.md
    WARN
    

    View Slide

90. View Slide

91. https://github.com/ragingwind/wasm-helloworld/tree/master/rust-wasi-node
    

    View Slide

92. WAT Debugging
    

    View Slide

93. $ rustc -g --target wasm32-unknown-unknown -O ./src/lib.rs -o ./pkg/square.wasm
    Source map
    

    View Slide

94. Use case
    

    View Slide

95. https://webassembly.org/docs/use-cases/
    

    View Slide

96. View Slide

97. View Slide

98. View Slide

99. https://lichess.org/analysis
    

    View Slide

100. View Slide

101. View Slide

102. https://www.figma.com/blog/webassembly-cut-figmas-load-time-by-3x/
     

     View Slide

103. View Slide

104. View Slide

105. View Slide

106. View Slide

107. View Slide

108. View Slide

109. View Slide

110. Roadmap
     - MVP features released in 2017
     - Next proposal is ready to go
     

     View Slide

111. https://webassembly.org/roadmap/
     

     View Slide

112. Reference
     

     View Slide

113. View Slide

114. https://github.com/WebAssembly/proposals
     

     View Slide

115. View Slide