Slide 1

Slide 1 text

WASM, WASI, WTF? WebAssembly 101 für .NET-Entwickler Christian Weyer @christianweyer CTO

Slide 2

Slide 2 text

§ 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 101 für .NET-Entwickler Christian Weyer Co-Founder & CTO @ Thinktecture AG 2

Slide 3

Slide 3 text

§ Intro § Web § Compute § .NET § Wrap-up WASM, WASI, WTF? WebAssembly 101 für .NET-Entwickler Agenda 3

Slide 4

Slide 4 text

WASM, WASI, WTF? WebAssembly 101 für .NET-Entwickler Intro 4

Slide 5

Slide 5 text

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 101 für .NET-Entwickler What is WebAssembly? 5

Slide 6

Slide 6 text

Server Server WASM, WASI, WTF? WebAssembly 101 für .NET-Entwickler Why WebAssembly? Everything, everywhere – securely 6 Origins Current developments Future Web Web Web Cloud Cloud Microcontroller Extensibility Extensibility Bare metal Edge

Slide 7

Slide 7 text

WASM, WASI, WTF? WebAssembly 101 für .NET-Entwickler Web 7

Slide 8

Slide 8 text

§ 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 101 für .NET-Entwickler Web as a platform for ubiquitous client applications 8

Slide 9

Slide 9 text

§ 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 101 für .NET-Entwickler WebAssembly in the browser 9

Slide 10

Slide 10 text

1. Migrate native code (like desktop applications) to the web 2. Augment or speed up web applications WASM, WASI, WTF? WebAssembly 101 für .NET-Entwickler Major scenarios for WebAssembly in the browser 10

Slide 11

Slide 11 text

WASM, WASI, WTF? WebAssembly 101 für .NET-Entwickler Migrating native code to the browser (large C++ codebase) 11

Slide 12

Slide 12 text

§ Video games § Music streaming § Video editing § 3D rendering § Encryption § Image recognition / processing § Running simulations WASM, WASI, WTF? WebAssembly 101 für .NET-Entwickler Calculation-intensive use cases 12

Slide 13

Slide 13 text

Offline Web-based AI with LLMs, WebGPU & Wasm WASM, WASI, WTF? WebAssembly 101 für .NET-Entwickler DEMO 13

Slide 14

Slide 14 text

WASM, WASI, WTF? WebAssembly 101 für .NET-Entwickler Compute 14

Slide 15

Slide 15 text

§ 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 101 für .NET-Entwickler WebAssembly outside the browser – ubiquitous compute 15

Slide 16

Slide 16 text

§ 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 101 für .NET-Entwickler WASI 16 https://twitter.com/solomonstre/status/1111004913222324225

Slide 17

Slide 17 text

§ 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 101 für .NET-Entwickler WASI runtimes 17

Slide 18

Slide 18 text

§ 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 101 für .NET-Entwickler Serverless WebAssembly with WASI 18

Slide 19

Slide 19 text

Serverless HTTP API with Spin & WASI WASM, WASI, WTF? WebAssembly 101 für .NET-Entwickler DEMO 19

Slide 20

Slide 20 text

WASM, WASI, WTF? WebAssembly 101 für .NET-Entwickler .NET 20

Slide 21

Slide 21 text

§ .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 101 für .NET-Entwickler .NET in 2023 21

Slide 22

Slide 22 text

§ .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 101 für .NET-Entwickler .NET & WebAssembly - browser 22

Slide 23

Slide 23 text

Blazor WebAssembly - File – New – Project… WASM, WASI, WTF? WebAssembly 101 für .NET-Entwickler DEMO 23

Slide 24

Slide 24 text

§ .NET team recognizes the need for first-class citizen support for Wasm & WASI § .NET WASI SDK § Relies on LLVM § Produces one single .wasm file § Experimental – being evolved & stabilized towards .NET 8 release as a workload § .NET NativeAOT-LLVM § NativeAOT can make .NET binaries smaller & faster § Future Wasm support could be based on NativeAOT, in addition to Mono - very experimental today WASM, WASI, WTF? WebAssembly 101 für .NET-Entwickler .NET & WebAssembly – beyond the browser 24

Slide 25

Slide 25 text

.NET WASI SDK § Hello Console app § ASP.NET Core app § Spin with .NET WASM, WASI, WTF? WebAssembly 101 für .NET-Entwickler DEMO 25

Slide 26

Slide 26 text

WASM, WASI, WTF? WebAssembly 101 für .NET-Entwickler Wrap-Up 26

Slide 27

Slide 27 text

§ Secure, fast, portable “write once, run anywhere” § A compiler target, in the end § Also for .NET developers § A lot of things are still moving, though § Specifications & standards § Technologies § Developer tooling § .NET embraces Wasm & WASI – make yourself familiar today & think about possibilities WASM, WASI, WTF? WebAssembly 101 für .NET-Entwickler Wasm & WASI will be big for ubiquitous computing 🙌 27 Server Future Web Cloud Microcontroller Extensibility Bare metal Edge

Slide 28

Slide 28 text

Thank you! Christian Weyer https://thinktecture.com/christian-weyer Demos: https://github.com/thinktecture-labs/dotnet-wasi-samples 28

Slide 29

Slide 29 text

§ 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 § .NET Form Factors § https://github.com/dotnet/designs/blob/main/accepted/2020/form-factors.md#webassembly § .NET WASI SDK § https://github.com/dotnet/dotnet-wasi-sdk § Wasmtime .NET § https://github.com/bytecodealliance/wasmtime-dotnet § Extism § https://github.com/extism/extism § Specifications, Standards § https://github.com/WebAssembly/proposals § https://webassembly.org/roadmap/ § https://github.com/WebAssembly/WASI/blob/main/Proposals.md WASM, WASI, WTF? WebAssembly 101 für .NET-Entwickler Links 29