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

  2. None
  3. New Language for the Web

  4. HTML / CSS / JS Since 1996, HTML, CSS, and

    Javascript languages for the Web
  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
  6. None
  7. None
  8. Low-Level Language

  9. HTML / CSS / JS Structure Style Language

  10. HTML Structure <!DOCTYPE html> <html lang="en"> <head> <title>Web Application </title>

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

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

    </title> <style> h1 { display: flex; width: 100%; font-size: 3em; color: red; } </style> </head> <body> <h1> Hello World </h1> <button>Say Hi </button> <script> WebAssembly.instantiateStreaming( fetch("add.wasm") ).then(module => { const { add } = module.instance.exports; document .querySelector("button") .addEventListener("click", () => { alert(`10 + 10 = ${add(10, 10)}`) }); }); </script> </body> </html>
  13. HTML / CSS / JS / WASM Structure Style High

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

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

  16. WASM Low-level Language <!DOCTYPE html> <html lang="en"> <head> <title>Web Application

    </title> <style> h1 { display: flex; width: 100%; font-size: 3em; color: red; } </style> </head> <body> <h1> Hello World </h1> <button>Say Hi </button> <script> WebAssembly.instantiateStreaming( fetch("add.wasm") ).then(module => { const { add } = module.instance.exports; document .querySelector("button") .addEventListener("click", () => { alert(`10 + 10 = ${add(10, 10)}`) }); }); </script> </body> </html>
  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; }
  18. None
  19. None
  20. Run with near-native - Predictable performance - Optimized for fast

    load and execution - Efficient memory management - Use 'better' language to solve a certain problem
  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
  22. Lin: "ݢ੷ Javascript ৬ WebAssembly प೯ غח җ੿ਸ ঌইࠁ੗" "ೞ੉"

    "п ߄ח যڃ ੘সਸ ೞח૑ ࠁৈ઻" https://hacks.mozilla.org/2017/02/what-makes-webassembly-fast/
  23. Lin: "Javascript ূ૓੄ प೯ җ੿ ੉Ҋ" Lin: "WebAssembly ূ૓੄ प೯

    җ੿" "ٯ ࠊب प೯ө૑ җ੿੉ рױೞ૑" https://hacks.mozilla.org/2017/02/what-makes-webassembly-fast/
  24. WebAssembly: "դ ੉޷ Bytecode, ղ ௏٘ Ѥٜ૑݃" Javascript: "ݢ੷ ౵य೧ࢲ

    AST ٜ݅Ҋ, ੗.. ೙ਃೠѱ ޤջ ࠁ੗ https://hacks.mozilla.org/2017/02/what-makes-webassembly-fast/
  25. WebAssembly: "੉޷ प೯ী ೙ਃೠ Ѥ ળ࠺ ৮ܐ!" Javascript: "ࡅܰѱ प೯

    ೞ۰ݶ ೙ਃೠ Ѣ ݢ੷" "ա઺ী ஹ౵ੌ, ୭੸ച ب ׮द׮द" https://hacks.mozilla.org/2017/02/what-makes-webassembly-fast/
  26. WebAssembly: "੿੸ ఋੑ ࢎਊ, JIT ח ೡੌ੉ হਸѦ" Javascript: "ਃѢ

    ׮द ୭੸ച ೧ঠ ೡ ٠, Ӓ ఋੑ੉ ইפ֎" https://hacks.mozilla.org/2017/02/what-makes-webassembly-fast/
  27. Javascript: "ש ௏٘ ಁఢҗ JIT ש ٮۄ प೯੉ ׳ۄ૗. ഷ"

    WebAssembly: "زੌ ߄੉ցܻ (Ѣ੄) زੌ ࢿמ" https://hacks.mozilla.org/2017/02/what-makes-webassembly-fast/
  28. https://hacks.mozilla.org/2017/02/what-makes-webassembly-fast/ Javascript: "୒ࣗ઺. प೯ ୹ੑ Ә૑" WebAssembly: "୒ࣗ? ই૒਷ ݽܴ"

  29. None
  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
  31. https://mathiasbynens.be/notes/prototypes#tradeoffs Javascript Pipeline

  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
  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
  34. Using Implicit Caching https://www.youtube.com/watch?v=kZrl91SPSpc

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

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

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

  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
  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
  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
  44. None
  45. https://hacks.mozilla.org/2017/07/memory-in-webassembly-and-why-its-safer-than-you-think/ Host: "ݫݽܻ (ArrayBuffer) ખ ઱ࣁਃ" "࢜ WASM ੉ ৳যਃ"

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

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

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

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

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

  52. Taking advantages from Low-level languages - Multi-thread - SIMD -

    Multi-language - Reuse popular libraries wide spread
  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
  54. None
  55. None
  56. https://github.com/ragingwind/wasm-hello-world/tree/master/clang-thread Threads in C

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

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

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

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

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

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

  63. None
  64. None
  65. None
  66. Single Instruction, Multiple Data

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

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

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

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

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

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

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

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

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

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

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

  81. Practice - Hello Wasm - WASI Demo

  82. None
  83. None
  84. None
  85. None
  86. ˞ ˝ ˟

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

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

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

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

  92. WAT Debugging

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

    map
  94. Use case

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

  96. None
  97. None
  98. None
  99. https://lichess.org/analysis

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

  103. None
  104. None
  105. None
  106. None
  107. None
  108. None
  109. None
  110. Roadmap - MVP features released in 2017 - Next proposal

    is ready to go
  111. https://webassembly.org/roadmap/

  112. Reference

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

  115. None