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.

687ac25540fe35fcb5e828f75c4a6079?s=128

Jimmy Moon

June 09, 2021
Tweet

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