Level up with WebAssembly OSCON 2019 Robert Aboukhalil - PowerPoint PPT Presentation

Level up with WebAssembly OSCON 2019 Robert Aboukhalil @RobAboukhalil

What is WebAssembly?

What is WebAssembly? JavaScript WebAssembly char char * hello() { ( module module return return "Hello OSCON 2019!"; ( table table 0 anyfunc) } ( memory memory $0 1) ( data data (i32.const 16) "Hello OSCON 2019!\00") ( export export "memory" (memory $0)) ( export export "hello" (func $hello)) ( func func $hello (; 0 ;) (result i32) (i32.const 16) ) ) WebAssembly Text (WAT) C++ WebAssembly = New language that runs in the browser Can compile C/C++/Rust/… to WebAssembly

Why use WebAssembly?

① Port desktop apps Doom 3 to the web Google Earth AutoCAD

② Port command line sql.js tools to the web jqkungfu.com PyIodide

③ Targeted approach 1Password to speed up web apps eBay fastq.bio

④ WebAssembly Cloudflare Workers outside the web 🐎 💏 🐺 🐙 wasmer.io wasi.dev

Why use WebAssembly? 💼 Portability Speed 📧 Sandbox

Case Study Web app to analyze DNA sequencing data

fastq.bio github.com/robertaboukhalil/fastq.bio

Anatomy of a web app

Browser Server 💼 UI Analysis Analysis ① JavaScript C/C++/Rust C/C++/Rust UI Analysis ② JavaScript JavaScript Pros: (1) No servers; (2) Works offline Cons: (1) Very slow; (2) Requires a rewrite

Browser Server 💼 ☁ UI Analysis Analysis ① JavaScript C/C++/Rust C/C++/Rust UI Analysis ② JavaScript JavaScript UI Analysis ③ JavaScript C/C++/Rust → Wasm

Compiling C code to WebAssembly Software: seqtk Normally: Emscripten: $ gcc seqtk.c \ $ emcc seqtk.c \ -O2 \ -O2 \ -o seqtk \ -o seqtk.js \ -lm \ -lm \ –lz -s USE_ZLIB=1 \ -s FORCE_FILESYSTEM=1 ./seqtk fqchk data.fastq Module.callMain(["fqchk", "data.fastq"]) github.com/lh3/seqtk

Architecture Aioli WebWorker WebWorker API Controller app.js seqtk.wasm File System Plot results WebWorker Browser github.com/robertaboukhalil/fastq.bio github.com/robertaboukhalil/aioli npmjs.com/package/@robertaboukhalil/aioli

fastq.bio v1 (JavaScript) v2 (WebAssembly)

Performance Caveat: 9X speedup 13X speedup 21X speedup • Speedup not generalizable to all tools • Baseline = semi-opNmized JS

Browser Server 💼 ☁ UI Analysis ① JavaScript C/C++/Rust UI Analysis ② JavaScript JavaScript UI Analysis ③ JavaScript C/C++/Rust → Wasm Pros: (1) No servers; (2) Works offline; (3) Speed; (4) Portability Cons: (1) Added complexity; (2) Unsupported browsers

Serverless WebAssembly

Browser Server Serverless 💼 ☁ 🌩 UI Analysis Analysis ① JavaScript C/C++/Rust C/C++/Rust UI Analysis ② JavaScript JavaScript UI Analysis ③ JavaScript C/C++/Rust → Wasm UI Analysis ④ JavaScript C/C++/Rust → Wasm

Serverless WebAssembly: How? Approach 1 (AWS/GCP/Azure) Ÿ Use Node.js to execute WebAssembly Approach 2 (Fastly) Ÿ Use a WebAssembly runNme (Lucet) Ÿ IniNalizaNon Nme = 50µs! Approach 3 (Cloudflare Workers) Ÿ Use V8 isolates 🥬 Ÿ IniNalizaNon Nme = 5ms! Why is this a Big Deal TM ? Ÿ Sandbox ⇒ Fast initialization ⇒ No cold starts problem Ÿ Provider supports WebAssembly ⇒ Support C/C++/Rust/…

Serverless WebAssembly app.js rust-bio → .wasm Cloudflare Worker Plot results Browser workers.cloudflare.com github.com/cloudflare/wrangler

Serverless WebAssembly

Browser Server Serverless 💼 ☁ 🌩 UI Analysis ① JavaScript C/C++/Rust UI Analysis ② JavaScript JavaScript UI Analysis ③ JavaScript C/C++/Rust → Wasm UI Analysis ④ JavaScript C/C++/Rust → Wasm Pros: (1) No servers; (2) Speed; (3) Portability; (4) Lightweight; (5) Process more data Cons: (1) Added complexity; (2) Cost of API calls; (3) Doesn’t work offline

When to use WebAssembly

When to use WebAssembly Graphics Ÿ Port games and desktop applicaNons to the web Data Tools Ÿ Image processing (e.g. photo/video ediNng) Ÿ Data analysis (e.g. fastq.bio) EducaSonal Tools Ÿ Playgrounds for command-line uNliNes (e.g. sqlite, jq) WebAssembly outside the web Ÿ WebAssembly + WASI Ÿ Serverless WebAssembly

When not to use WebAssembly Ÿ Require lot of communication between JS & WASM Ÿ Need to analyze entire (large) file at once Ÿ Need large reference files loaded in memory Rule of Thumb: WebAssembly is awesome, but… Rule of Thumb: WebAssembly is awesome. but… Rule of Thumb: WebAssembly is awesome, but… Rule of Thumb: WebAssembly is awesome, but… assume YAGNI until you can prove otherwise. assume YAGNI until you can prove otherwise. assume YAGNI until you can prove otherwise. make sure you consider the tradeoffs

levelupwasm.com COUPON CODE (15%): Please rate this session! OSCON2019