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

Please Use The Fourth Language - WebAssembly

Please Use The Fourth Language - WebAssembly

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

Jimmy Moon

June 09, 2021
Tweet

More Decks by Jimmy Moon

Other Decks in Programming

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