SDD 2024 - WASM, WASI, WTF? WebAssembly everywhere 101 - for .NET aficionados

Buzzword bingo, FTW! No, this session is not about Blazor WebAssembly. Rather, Christian will discuss WebAssembly as a base technology and ubiquitous platform that enables many ever-dreamed-of scenarios in computing – in and beyond the web browser.
These scenarios include: running native code in the web, secure isolated execution environments, powerful instantiation & execution engines, and lightweight server-side & serverless runtime environments. All this is possible with almost every programming language and framework, including C# and .NET. Come by and get an idea of why, what, and how WebAssembly, WASI & co. will make a difference in a world in and also beyond the browser.
As a .NET developer, you should definitely know about the possibilities of one of the hottest base technologies in town. (Oh, and yes: we will also briefly talk about Blazor WebAssembly…)

Transcript

1. WASM, WASI, WTF? WebAssembly everywhere 101 – for .NET aficionados Christian Weyer Co-Founder & CTO @christianweyer
2. § Technology catalyst § AI-powered solutions § Pragmatic end-to-end architectures § Microsoft Regional Director § Microsoft MVP for Developer Technologies & Azure ASPInsider, AzureInsider § Google GDE for Web Technologies christian.weyer@thinktecture.com @christianweyer https://www.thinktecture.com WASM, WASI, WTF? WebAssembly everywhere 101 – for .NET aficionados Christian Weyer Co-Founder & CTO @ Thinktecture AG 2
3. WASM, WASI, WTF? WebAssembly everywhere 101 – for .NET aficionados Our journey today 3 Intro Web Compute Wrap-Up .NET
4. WASM, WASI, WTF? WebAssembly everywhere 101 – for .NET aficionados Intro 4
5. 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 everywhere 101 – for .NET aficionados What is WebAssembly? 5
6. Server Server WASM, WASI, WTF? WebAssembly everywhere 101 – for .NET aficionados Why WebAssembly? Everything, everywhere, by everyone – securely 6 Origins Current developments Future Web Web Web Cloud Cloud Microcontroller Extensibility Extensibility Bare metal Edge
7. WASM, WASI, WTF? WebAssembly everywhere 101 – for .NET aficionados Web 7
8. § 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 everywhere 101 – for .NET aficionados Web as a platform for ubiquitous client applications 8
9. § 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 everywhere 101 – for .NET aficionados WebAssembly in the browser 9
10. WASM, WASI, WTF? WebAssembly everywhere 101 – for .NET aficionados 10 https://caniuse.com/?search=WebAssembly
11. 11 WASM, WASI, WTF? WebAssembly everywhere 101 – for .NET aficionados Wasm & JS architecture (simplified) Compiler Parser JIT Web APIs (DOM, IndexedDb, File Storage etc.) Browser JavaScript (.js) HTML (.html) Inline JS JS Runtime WebAssembly (.wasm)
12. § Barebones § WebAssembly text Format (WAT) § WebAssembly Binary Toolkit § JS bridge § HTML page § Alternatives § Rust, FTW! § Many other programming languages WASM, WASI, WTF? WebAssembly everywhere 101 – for .NET aficionados “Hello Wasm!” in browser 12
13. Hello Wasm in browser - with WAT WASM, WASI, WTF? WebAssembly everywhere 101 – for .NET aficionados DEMO 13
14. WASM, WASI, WTF? WebAssembly everywhere 101 – for .NET aficionados Major scenarios for WebAssembly in the browser 14 Migrate native code (like desktop applications) to the web Augment or speed up web applications
15. WASM, WASI, WTF? WebAssembly everywhere 101 – for .NET aficionados Migrating native code to the browser (large C++ codebase) 15
16. § Video games § Music streaming § Video editing § 3D rendering § Encryption § Image recognition/ processing § Running simulations § Neural networks WASM, WASI, WTF? WebAssembly everywhere 101 – for .NET aficionados Calculation-intensive use cases 16
17. Wasm module with Rust in Angular SPA WASM, WASI, WTF? WebAssembly everywhere 101 – for .NET aficionados DEMO 17
18. Offline Web-based Generative AI with LLMs, WebGPU & Wasm WASM, WASI, WTF? WebAssembly everywhere 101 – for .NET aficionados DEMO 18
19. WASM, WASI, WTF? WebAssembly everywhere 101 – for .NET aficionados Compute 19
20. § 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 everywhere 101 – for .NET aficionados WebAssembly outside the browser – ubiquitous compute 20
21. § 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 everywhere 101 – for .NET aficionados WASI 21 https://twitter.com/solomonstre/status/1111004913222324225
22. § 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 everywhere 101 – for .NET aficionados WASI runtimes 22
23. Hello WASI with Rust and wasmtime WASM, WASI, WTF? WebAssembly everywhere 101 – for .NET aficionados DEMO 23
24. § 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 everywhere 101 – for .NET aficionados Serverless WebAssembly with WASI 24
25. Serverless HTTP API with Spin & WASI WASM, WASI, WTF? WebAssembly everywhere 101 – for .NET aficionados DEMO 25
26. § Current milestone (Jan 2024), based on § WIT IDL § Component Model § New APIs § wasi-cli § wasi-io § wasi-clocks § wasi-random § wasi-filesystem § wasi-sockets § wasi-http WASM, WASI, WTF? WebAssembly everywhere 101 – for .NET aficionados WASI Preview 2 – aka WASI 0.2 26
27. § Addresses lack of module composition § Interface types, canonical ABI (application binary interface), component linking mechanism § Package & reuse code without duplication & static linking § Enables inter-component & inter-module communication WASM, WASI, WTF? WebAssembly everywhere 101 – for .NET aficionados WebAssembly Component Model 27 https://raw.githubusercontent.com/WebAssembly/component-model/main/design/mvp/examples/images/shared-everything-dynamic-linking.svg
28. WASM, WASI, WTF? WebAssembly everywhere 101 – for .NET aficionados .NET 28
29. § .NET went live in 2002 § Desktop and single servers were dominating § .NET wants and needs to be ready for modern distributed Cloud-native software solutions § Original .NET Core was one step into that direction § .NET has different runtime form factors § Including WebAssembly – for ubiquitous execution WASM, WASI, WTF? WebAssembly everywhere 101 – for .NET aficionados .NET in 2024 29
30. § .NET’s current Wasm support builds on Mono § Relies on emscripten § Creates .NET assemblies & interprets them on .NET runtime compiled to Wasm § AOT mode enables ahead-of-time compilation § .NET-compiled Wasm & JS interop § Take your C# / .NET code into the browser § Integrate it with any JS code in the browser, e.g. JS SPA frameworks § Blazor WebAssembly § Build C#- / .NET-based SPAs with Razor components WASM, WASI, WTF? WebAssembly everywhere 101 – for .NET aficionados .NET & WebAssembly - browser 30
31. Blazor WebAssembly - File – New – Project… WASM, WASI, WTF? WebAssembly everywhere 101 – for .NET aficionados DEMO 31
32. § wasmtime-dotnet lets us use Wasm modules in .NET § .NET WASI SDK (experimental, archived) § Console and ASP.NET support § .NET 8 WASI experimental workload § Console support § .NET NativeAOT-LLVM (very experimental today) § NativeAOT can make .NET binaries smaller & faster § Future Wasm support could be based on NativeAOT, in addition to Mono WASM, WASI, WTF? WebAssembly everywhere 101 – for .NET aficionados .NET & WebAssembly – WASI 32
33. WASM, WASI, WTF? WebAssembly everywhere 101 – for .NET aficionados DEMO 33 WASI with .NET § Console app § ASP.NET Core app § Spin with .NET § [Something crazy]
34. § .NET code can run other .NET code in an isolated environment with WASI § Create IsolatedRuntime instances § Each is a WebAssembly sandbox built with dotnet-wasi-sdk and running on Wasmtime § Each has completely separate memory space, no direct access to the host machine's disk/network/OS/etc. § Make .NET calls into IsolatedRuntime instances § Either create IsolatedObject instances within those runtimes, then invoke their methods - or call lambda method directly § Pass/capture/return arbitrary values across boundary - will be serialized via MessagePack WASM, WASI, WTF? WebAssembly everywhere 101 – for .NET aficionados Isolating code in .NET 34
35. Isolating code in .NET with WASI WASM, WASI, WTF? WebAssembly everywhere 101 – for .NET aficionados DEMO 35
36. WASM, WASI, WTF? WebAssembly everywhere 101 – for .NET aficionados Wrap-Up 36
37. § Secure, fast, portable “write once, run anywhere” § A compiler target, in the end § Also, for .NET developers (but… ⌛) § A lot of things are still moving, though § Specifications & standards § Technologies § Developer tooling § .NET embraces Wasm & WASI (party experimental) – make yourself familiar today & think about possibilities WASM, WASI, WTF? WebAssembly everywhere 101 – for .NET aficionados Wasm & WASI will be big for ubiquitous computing 🙌 37 Server Future Web Cloud Microcontroller Extensibility Bare metal Edge
38. WASM, WASI, WTF? WebAssembly everywhere 101 – for .NET aficionados … one more thing … 38
39. Thank you! Christian Weyer https://thinktecture.com/christian-weyer Demos: https://github.com/thinktecture-labs/dotnet-wasm-wasi-samples 39
40. § Specifications, Standards § https://github.com/WebAssembly/proposals § https://webassembly.org/roadmap/ § https://github.com/WebAssembly/WASI/blob /main/Proposals.md § WebAssembly Binary Toolkit § https://github.com/WebAssembly/wabt § Web-LLM § https://mlc.ai/web-llm/ § WASI § https://wasi.dev/ § https://github.com/WebAssembly/WASI/blob /main/preview2/README.md § WebAssembly Component Model § https://component- model.bytecodealliance.org/ § Fermyon Spin § https://www.fermyon.com/spin § Wasmtime .NET § https://github.com/bytecodealliance/wasmti me-dotnet § .NET Form Factors § https://github.com/dotnet/designs/blob/main /accepted/2020/form- factors.md#webassembly § .NET WASI Workload § https://devblogs.microsoft.com/dotnet/exten ding-web-assembly-to-the-cloud/ § .NET WASI support tracking § https://github.com/dotnet/runtime/issues/65 895 WASM, WASI, WTF? WebAssembly everywhere 101 – for .NET aficionados Links 40