$30 off During Our Annual Pro Sale. View Details »

WASM, WASI, WTF? - .NET developer’s WebAssembly 101

WASM, WASI, WTF? - .NET developer’s WebAssembly 101

Buzzword bingo, FTW! No, this session is NOT about Blazor WebAssembly. Rather, Christian will discuss WebAssembly as a base technology and a ubiquitous platform that enables many always-dreamed-of scenarios in computing. These include safe & secure isolated execution environments, high-performance instantiation & execution engines, and lightweight server-side & serverless runtimes. And all this with almost any programming language & framework, including C# and .NET.
Come over and get a picture of why, what, and how WebAssembly in a world beyond the browser will make a difference. You as a .NET developer should definitely know about one of the hottest technologies in town.
(Oh, and yes: we will also briefly talk about Blazor WebAssembly...)

Christian Weyer
PRO

May 25, 2023
Tweet

More Decks by Christian Weyer

Other Decks in Programming

Transcript

  1. WASM, WASI, WTF?
    .NET developer‘s WebAssembly 101
    Christian Weyer

    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.wey[email protected] @christianweyer https://www.thinktecture.com
    WASM, WASI, WTF?
    .NET developer's WebAssembly 101
    Christian Weyer
    Co-Founder & CTO @ Thinktecture AG
    2

    View Slide

  3. § Intro
    § Web
    § Compute
    § .NET
    § Wrap-up
    WASM, WASI, WTF?
    .NET developer's WebAssembly 101
    Agenda
    3

    View Slide

  4. WASM, WASI, WTF?
    .NET developer's WebAssembly 101
    Intro
    4

    View Slide

  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?
    .NET developer's WebAssembly 101
    What is WebAssembly?
    5

    View Slide

  6. Server
    Server
    WASM, WASI, WTF?
    .NET developer's WebAssembly 101
    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?
    .NET developer's WebAssembly 101
    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?
    .NET developer's WebAssembly 101
    Web as a platform for ubiquitous client applications
    8

    View Slide

  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?
    .NET developer's WebAssembly 101
    WebAssembly in the browser
    9

    View Slide

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

    View Slide

  11. WASM, WASI, WTF?
    .NET developer's WebAssembly 101
    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?
    .NET developer's WebAssembly 101
    Calculation-intensive use cases
    12

    View Slide

  13. Offline Web-based AI with LLMs, WebGPU & Wasm
    WASM, WASI, WTF?
    .NET developer's WebAssembly 101
    DEMO
    13

    View Slide

  14. WASM, WASI, WTF?
    .NET developer's WebAssembly 101
    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 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?
    .NET developer's WebAssembly 101
    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?
    .NET developer's WebAssembly 101
    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?
    .NET developer's WebAssembly 101
    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
    § Spin & Fermyon Cloud
    § Microsoft is experimenting in Azure
    § Currently in AKS - not really serverless, yet
    WASM, WASI, WTF?
    .NET developer's WebAssembly 101
    Serverless WebAssembly with WASI
    18

    View Slide

  19. Serverless HTTP API with Spin & Wasm
    WASM, WASI, WTF?
    .NET developer's WebAssembly 101
    DEMO
    19

    View Slide

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

    View Slide

  23. Blazor WebAssembly - File – New – Project…
    WASM, WASI, WTF?
    .NET developer's WebAssembly 101
    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?
    .NET developer's WebAssembly 101
    .NET & WebAssembly – beyond the browser
    24

    View Slide

  25. .NET WASI SDK
    § Hello Console app
    § ASP.NET Core app
    § Spin with .NET
    WASM, WASI, WTF?
    .NET developer's WebAssembly 101
    DEMO
    25

    View Slide

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

    View Slide

  28. WASM, WASI, WTF?
    .NET developer's WebAssembly 101
    … one more
    thing …
    28

    View Slide

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

    View Slide

  30. § 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?
    .NET developer's WebAssembly 101
    Links
    30

    View Slide