Level up with WebAssembly

OSCON 2019 Robert Aboukhalil @RobAboukhalil What is WebAssembly? What is WebAssembly?

JavaScript WebAssembly

char * hello() { (module return "Hello OSCON 2019!"; (table 0 anyfunc) } (memory $0 1) (data (i32.const 16) "Hello OSCON 2019!\00") (export "memory" (memory $0)) (export "hello" (func $hello)) (func $hello (; 0 ;) (result i32) (i32.const 16) ) ) C++ WebAssembly Text (WAT)

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 outside the web Cloudflare Workers

� � � � 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 ① JavaScript 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 ① JavaScript 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 Controller WebWorker API

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-opmized 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 ① JavaScript 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 runme (Lucet) Ÿ Inializaon me = 50µs!

Approach 3 (Cloudflare Workers) Ÿ Use V8 isolates � Ÿ Inializaon me = 5ms!

Why is this a Big DealTM? Ÿ 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 applicaons to the web

Data Tools Ÿ Image processing (e.g. photo/video eding) Ÿ Data analysis (e.g. fastq.bio)

Educaonal Tools Ÿ Playgrounds for command-line ulies (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,awesome. but… assumemake YAGNI sure youuntil consider you can theprove tradeoffs otherwise. levelupwasm.com

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