WASM, WASI, WTF? WebAssembly (auch) jenseits des Browsers Christian Weyer @christianweyer CTO

§ Cloud-native & serverless architectures § Pragmatic end-to-end solutions § Mobile & web-based application architectures § Microsoft Regional Director § Microsoft MVP for Developer Technologies & Azure ASPInsider, AzureInsider § Google GDE for Web Technologies [email protected] @christianweyer https://www.thinktecture.com WASM, WASI, WTF? WebAssembly (auch) jenseits des Browsers Christian Weyer Co-Founder & CTO @ Thinktecture AG 2

§ Intro § Web § Compute § JavaScript § Wrap-up WASM, WASI, WTF? WebAssembly (auch) jenseits des Browsers Agenda 3

WASM, WASI, WTF? WebAssembly (auch) jenseits des Browsers Intro 4

WebAssembly (Wasm) is a § secure § fast § portable stack-based execution environment (aka virtual machine), for running applications by executing low-level sandboxed bytecode. WASM, WASI, WTF? WebAssembly (auch) jenseits des Browsers What is WebAssembly? 5

Server Server WASM, WASI, WTF? WebAssembly (auch) jenseits des Browsers Why WebAssembly? Everything, everywhere – securely Origins Current developments Future Web Web Web Cloud Cloud Microcontroller Extensibility Extensibility Bare metal Edge 6

WASM, WASI, WTF? WebAssembly (auch) jenseits des Browsers Web 7

§ The browser evolved to a smart client application platform § Browser APIs (file system access, clipboard, sharing data etc.) § Runs on (almost) every platform § Handling updates is easy (and cheap) § Download new version from the server WASM, WASI, WTF? WebAssembly (auch) jenseits des Browsers Web as a platform for ubiquitous client applications 8

§ Native code - fast, efficient, and portable § Low-level bytecode for the web § No plugins needed § Standards and specifications through W3C § Uses existing browser sandbox features § Use native code to run inside the browser, in a secure environment § Interoperability via JavaScript for accessing browser APIs WASM, WASI, WTF? WebAssembly (auch) jenseits des Browsers WebAssembly in the browser 9

1. Migrate native code (like desktop applications) to the web 2. Augment or speed up web applications WASM, WASI, WTF? WebAssembly (auch) jenseits des Browsers Major scenarios for WebAssembly in the browser 10

WASM, WASI, WTF? WebAssembly (auch) jenseits des Browsers Migrating native code to the browser (large C++ codebase) 11

§ Video games § Music streaming § Video editing § 3D rendering § Encryption § Image recognition / processing § Running simulations WASM, WASI, WTF? WebAssembly (auch) jenseits des Browsers Calculation-intensive use cases 12

Offline Web-based AI with LLMs, WebGPU & Wasm WASM, WASI, WTF? WebAssembly (auch) jenseits des Browsers DEMO 13

WASM, WASI, WTF? WebAssembly (auch) jenseits des Browsers Compute 14

§ Size § Compared to other distributables (containers | VMs), Wasm is super small § Speed § Wasm modules are bootstrapped in “no time” and are fast at runtime § Resource utilization § With same compute power, more applications can be executed § Security § Wasm modules are isolated and every module can have dedicated permissions WASM, WASI, WTF? WebAssembly (auch) jenseits des Browsers WebAssembly outside the browser – ubiquitous compute 15

§ Enabling Wasm in a Cloud-native world § WASI (WebAssembly System Interface) provides standardized system calls to sandboxed Wasm code § WASI offers capability-based isolation § WASI is platform-agnostic: run Wasm applications on any WASI-compliant platform (device, OS, CPU arch) § WASI offers containerization on the next level WASM, WASI, WTF? WebAssembly (auch) jenseits des Browsers WASI https://twitter.com/solomonstre/status/1111004913222324225 16

§ Host infrastructure for executing Wasm applications leveraging APIs specified and provided by WASI § Handle system calls made by Wasm modules and delegate them to the underlying platform, e.g.: § File access § Network access § Environment variables § WASI runtime examples § wasmtime § wasmer § WebAssembly Micro Runtime (WAMR) WASM, WASI, WTF? WebAssembly (auch) jenseits des Browsers WASI runtimes 17

§ No infrastructure management § Speed of Wasm allows scale-down to 0 § No impact on request performance § Notable Serverless Wasm platforms today § Fermyon § Spin & Fermyon Cloud § Microsoft is experimenting in Azure § Currently in AKS - not really serverless, yet WASM, WASI, WTF? WebAssembly (auch) jenseits des Browsers Serverless WebAssembly with WASI 18

Serverless HTTP API with Spin & WASI WASM, WASI, WTF? WebAssembly (auch) jenseits des Browsers DEMO 19

WASM, WASI, WTF? WebAssembly (auch) jenseits des Browsers Extensibility 20

§ Plugins for everyone, by everyone, everywhere § Leverage secure Wasm sandbox (with WASI) § Write plugins in any code § Use plugins in any code § E.g. Extism § Plugins written in any language § Hosts written in any language § Common application interfaces § Provide value-add services & features without need for dedicated language / platform SDKs (with WASI) § E.g. SpiderLightning § Abstract away distributed application capabilities, such as state management, pub/sub, event driven programming § Also see wasi-cloud-core WASM, WASI, WTF? WebAssembly (auch) jenseits des Browsers Secure extensibility 21 Past | Present | Future

WASM, WASI, WTF? WebAssembly (auch) jenseits des Browsers 22 Past | Present | Future WASI plugins with Extism Spiderlightning application APIs with WASI DEMO

WASM, WASI, WTF? WebAssembly (auch) jenseits des Browsers JavaScript 23

§ Ubiquitous execution: running JS code anywhere, in any host environment, securely § javy: toolchain that compiles a JS VM to Wasm and embeds your JS in the Wasm module § Relies on QuickJS, small JavaScript VM (fully ES2020 compliant) § Available as CLI application and Wasm library § Javy-generated modules § By design WASI-only § Follow the command pattern: Any input must be passed via stdin, any output will be placed in stdout WASM, WASI, WTF? WebAssembly (auch) jenseits des Browsers “Compiling” JavaSscript to Wasm/WASI 24

§ node.js has experimental native WASI support § Host any WASI-compliant modules in node.js scripts WASM, WASI, WTF? WebAssembly (auch) jenseits des Browsers Hosting WASI modules in node.js 25

Compiling JavaScript to Wasm/WASI WASI in Node.js WASM, WASI, WTF? WebAssembly (auch) jenseits des Browsers DEMO 26

WASM, WASI, WTF? WebAssembly (auch) jenseits des Browsers Wrap-Up 27

§ Secure, fast, portable “write once, run anywhere” § A compiler target, in the end § Also for JS/TS developers § A lot of things are still moving, though § Specifications & standards § Technologies § Developer tooling § JavaScript embraces Wasm & WASI – make yourself familiar today & think about possibilities WASM, WASI, WTF? WebAssembly (auch) jenseits des Browsers Wasm & WASI will be big for ubiquitous computing 🙌 Server Future Web Cloud Microcontroller Extensibility Bare metal Edge 28

Thank you! Christian Weyer https://thinktecture.com/christian-weyer 29

§ CanIUse.com § https://caniuse.com/?search=WebAssembly § Web-LLM § https://mlc.ai/web-llm/ § WASI § https://wasi.dev/ § Fermyon Spin § https://www.fermyon.com/spin § Extism § https://github.com/extism/extism § Javy § https://github.com/bytecodealliance/javy § node.js & WASI § https://nodejs.org/api/wasi.html § SpiderLightning § https://deislabs.github.io/spiderlightning/ § wasi-cloud-core § https://github.com/WebAssembly/wasi-cloud-core § Specifications, Standards § https://github.com/WebAssembly/proposals § https://webassembly.org/roadmap/ § https://github.com/WebAssembly/WASI/blob/main/Proposals.md WASM, WASI, WTF? WebAssembly (auch) jenseits des Browsers Links 30