WASM, WASI, WTF? WebAssembly 101 – for .NET developers

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. These include - in conjunction with WASI - secure isolated execution environments, powerful instantiation & execution engines, and lightweight server-side & serverless runtime environments. And all this 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 beyond the browser. As a .NET developer, you should definitely know about one of the hottest technologies in town. (Oh, and yes: we will also briefly talk about Blazor WebAssembly...)

Transcript

1. WASM, WASI, WTF?:
   WebAssembly 101 - for .NET developers
   Christian Weyer
   Co-Founder & CTO
   @christianweyer
   

   View Slide

2. § 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
   christian.weyer@thinktecture.com @christianweyer https://www.thinktecture.com
   WASM, WASI, WTF?
   WebAssembly 101 for .NET developers
   Christian Weyer
   Co-Founder & CTO @ Thinktecture AG
   2
   

   View Slide

3. § Intro
   § Web
   § Compute
   § .NET
   § Wrap-up
   WASM, WASI, WTF?
   WebAssembly 101 for .NET developers
   Agenda
   3
   

   View Slide

4. WASM, WASI, WTF?
   WebAssembly 101 for .NET developers
   Intro
   4
   

   View Slide

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

   View Slide

6. Server
   Server
   WASM, WASI, WTF?
   WebAssembly 101 for .NET developers
   Why WebAssembly?
   Everything, everywhere - securely
   6
   Origins Current
   developments
   Future
   Web
   Web
   Web
   Cloud
   Cloud
   Microcontroller
   Extensibility
   Extensibility
   Bare
   metal
   Edge
   

   View Slide

7. WASM, WASI, WTF?
   WebAssembly 101 for .NET developers
   Web
   7
   

   View Slide

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 101 for .NET developers
   Web as a platform for ubiquitous client applications
   8
   

   View Slide

9. § Fast, efficient, and portable
   § Low-level bytecode for the web
   § Uses existing browser sandbox features
   § Use native code to run inside the browser, in a secure environment
   § Interoperability via JavaScript for accessing browser APIs
   § No plugins needed
   § Standards and specifications through W3C
   WASM, WASI, WTF?
   WebAssembly 101 for .NET developers
   WebAssembly in the browser
   9
   https://caniuse.com/?search=WebAssembly
   

   View Slide

10. § Migrate native code (like desktop applications)
    to the web
    § Augment or speed up web applications
    WASM, WASI, WTF?
    WebAssembly 101 for .NET developers
    Scenarios for WebAssembly in the browser
    10
    

    View Slide

11. WASM, WASI, WTF?
    WebAssembly 101 for .NET developers
    Migrating native code to the browser (large C++ codebase)
    11
    

    View Slide

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

    View Slide

13. Angular SPA with image processing powered by Wasm
    WASM, WASI, WTF?
    WebAssembly 101 for .NET developers
    DEMO
    13
    

    View Slide

14. WASM, WASI, WTF?
    WebAssembly 101 for .NET developers
    Compute
    14
    

    View Slide

15. § Size
    § Compared to other distributables (containers | VMs), Wasm is super small
    § Speed
    § Wasm modules are bootstrapped in “no time” and 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 for .NET developers
    WebAssembly outside the browser – ubiquitous compute
    15
    

    View Slide

16. § 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 for .NET developers
    WASI
    16
    https://twitter.com/solomonstre/status/1111004913222324225
    

    View Slide

17. § 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 for .NET developers
    WASI runtimes
    17
    

    View Slide

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

    View Slide

19. Serverless HTTP API powered by Wasm
    WASM, WASI, WTF?
    WebAssembly 101 for .NET developers
    DEMO
    19
    

    View Slide

20. WASM, WASI, WTF?
    WebAssembly 101 for .NET developers
    .NET
    20
    

    View Slide

21. § .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 for .NET developers
    .NET in 2023
    21
    

    View Slide

22. § .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 running in the browser, e.g. JS SPAs
    § Blazor WebAssembly
    § Build C#- / .NET-based SPAs with Razor components
    WASM, WASI, WTF?
    WebAssembly 101 for .NET developers
    .NET & WebAssembly - browser
    22
    

    View Slide

23. Blazor WebAssembly File – New – Project…
    WASM, WASI, WTF?
    WebAssembly 101 for .NET developers
    DEMO
    23
    

    View Slide

24. § .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
    § .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 for .NET developers
    .NET & WebAssembly – beyond the browser
    24
    

    View Slide

25. .NET WASI SDK
    § Hello Console app
    § ASP.NET Core app
    WASM, WASI, WTF?
    WebAssembly 101 for .NET developers
    DEMO
    25
    

    View Slide

26. WASM, WASI, WTF?
    WebAssembly 101 for .NET developers
    Wrap-Up
    26
    

    View Slide

27. § 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 WebAssembly & WASI –
    make yourself familiar today
    WASM, WASI, WTF?
    WebAssembly 101 for .NET developers
    Wasm & WASI will be big for ubiquitous computing 🙌
    27
    Server
    Future
    Web
    Cloud
    Microcontroller
    Extensibility
    Bare
    metal
    Edge
    

    View Slide

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

    View Slide

29. § Angular SPA with Rust image processing
    § https://github.com/martinakraus/ng-rust-demo
    § 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 for .NET developers
    Links
    29
    

    View Slide