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?

WebAssembly = New language that runs in the browser

JavaScript WebAssembly

C++

char char * hello() { return return "Hello OSCON 2019!"; } (module module (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)

Can compile C/C++/Rust/… to WebAssembly

Why use WebAssembly?

①

Port desktop apps to the web

Doom 3 Google Earth AutoCAD

② Port command line tools to the web

sql.js jqkungfu.com PyIodide

③ Targeted approach to speed up web apps

1Password eBay fastq.bio

④ WebAssembly

• utside 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

Analysis

C/C++/Rust

💼

Browser Server UI

JavaScript

Analysis

C/C++/Rust

①

UI

JavaScript

②

Analysis

JavaScript

Pros: (1) No servers; (2) Works offline Cons: (1) Very slow; (2) Requires a rewrite

Analysis

C/C++/Rust

💼

Browser

☁

Server UI

JavaScript

①

UI

JavaScript

②

Analysis

JavaScript

③

UI

JavaScript

Analysis

C/C++/Rust → Wasm

Analysis

C/C++/Rust

Compiling C code to WebAssembly

./seqtk fqchk data.fastq Module.callMain(["fqchk", "data.fastq"])

github.com/lh3/seqtk $ emcc seqtk.c \

• O2 \
• o seqtk.js \
• lm \
• s USE_ZLIB=1 \
• s FORCE_FILESYSTEM=1

Emscripten: $ gcc seqtk.c \

• O2 \
• o seqtk \
• lm \

–lz Normally: Software: seqtk

WebWorker Browser

Architecture

app.js Plot results WebWorker Controller github.com/robertaboukhalil/fastq.bio github.com/robertaboukhalil/aioli npmjs.com/package/@robertaboukhalil/aioli Aioli WebWorker API

seqtk.wasm File System

v1 (JavaScript) v2 (WebAssembly)

fastq.bio

Performance

9X speedup 13X speedup 21X speedup

Caveat:

• Speedup not generalizable to all tools
• Baseline = semi-opNmized JS

Analysis

C/C++/Rust

💼

Browser

☁

Server UI

JavaScript

①

UI

JavaScript

②

Analysis

JavaScript

③

UI

JavaScript

Analysis

C/C++/Rust → Wasm

Pros: (1) No servers; (2) Works offline; (3) Speed; (4) Portability Cons: (1) Added complexity; (2) Unsupported browsers

Serverless WebAssembly

Analysis

C/C++/Rust

💼

Browser

☁

Server UI

JavaScript

①

UI

JavaScript

②

Analysis

JavaScript

③

UI

JavaScript

Analysis

C/C++/Rust → Wasm

UI

JavaScript

Analysis

C/C++/Rust → Wasm

④

Analysis

C/C++/Rust

🌩

Serverless

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!

Serverless WebAssembly: How?

Why is this a Big DealTM? Ÿ Sandbox ⇒ Fast initialization ⇒ No cold starts problem Ÿ Provider supports WebAssembly ⇒ Support C/C++/Rust/…

Cloudflare Worker Browser

app.js Plot results

rust-bio → .wasm

Serverless WebAssembly

workers.cloudflare.com github.com/cloudflare/wrangler

Serverless WebAssembly

Analysis

C/C++/Rust

💼

Browser

☁

Server UI

JavaScript

①

UI

JavaScript

②

Analysis

JavaScript

③

UI

JavaScript

Analysis

C/C++/Rust → Wasm

UI

JavaScript

Analysis

C/C++/Rust → Wasm

④

🌩

Serverless 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… assume YAGNI until you can prove otherwise. Rule of Thumb: WebAssembly is awesome. but… assume YAGNI until you can prove otherwise. Rule of Thumb: WebAssembly is awesome, but… assume YAGNI until you can prove otherwise. Rule of Thumb: WebAssembly is awesome, but… make sure you consider the tradeoffs

levelupwasm.com

COUPON CODE (15%):

OSCON2019 Please rate this session!