Please Use The Fourth Language - WebAssembly

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

New Language for the Web

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

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

Low-Level Language

HTML / CSS / JS Structure Style Language

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>

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>

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>

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

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

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>

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; }

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

High-Level Low-Level - Less slow than - Runtime optimization -
Loose memory management - Runtime error - Promised performance - Efﬁcient 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 - Difﬁcult memory management - Poor programming productivity

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

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

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

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

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

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

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

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

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

Liftoff  (WebAssembly baseline compiler) Hot Swap Execution  Immediately WASM TurboFan 
(Optimization Compiler) Off-thread  Optimization WebAssembly Pipeline https://www.youtube.com/watch?v=kZrl91SPSpc

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

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

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

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

Javascript WebAssembly - Compiles, and builds to run - Optimized
performance - Promised predictable performance - Efﬁcient 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

- 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

(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

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

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

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/

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

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

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

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

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

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

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

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

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

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

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

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

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

Single Instruction, Multiple Data

https://github.com/google/mediapipe

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

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

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

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

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

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

Practice - Hello Wasm - WASI Demo

˞ ˝ ˟

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

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

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

WAT Debugging

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

Use case

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

https://lichess.org/analysis

https://www.ﬁgma.com/blog/webassembly-cut-ﬁgmas-load-time-by-3x/

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

https://webassembly.org/roadmap/

Reference

https://github.com/WebAssembly/proposals

Please Use The Fourth Language - WebAssembly

Please Use The Fourth Language - WebAssembly

More Decks by Jimmy Moon

Other Decks in Programming

Featured

Transcript