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. HTML / CSS / JS Since 1996, HTML, CSS, and

    Javascript languages for the Web
  2. 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
  3. 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>
  4. 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>
  5. 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>
  6. HTML / CSS / JS / WASM Structure Style High

    Level Language Low Level Language
  7. 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>
  8. 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; }
  9. Run with near-native - Predictable performance - Optimized for fast

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

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

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

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

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

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

    WebAssembly: "زੌ ߄੉ցܻ (Ѣ੄) زੌ ࢿמ" https://hacks.mozilla.org/2017/02/what-makes-webassembly-fast/
  17. 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
  18. Liftoff
 (WebAssembly baseline compiler) Hot Swap Execution
 Immediately WASM TurboFan


    (Optimization Compiler) Off-thread
 Optimization WebAssembly Pipeline https://www.youtube.com/watch?v=kZrl91SPSpc
  19. 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
  20. 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
  21. - 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
  22. (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
  23. 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/
  24. Taking advantages from Low-level languages - Multi-thread - SIMD -

    Multi-language - Reuse popular libraries wide spread
  25. 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