Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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 also 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...)

Christian Weyer

October 10, 2023
Tweet

More Decks by Christian Weyer

Other Decks in Programming

Transcript

  1. WASM, WASI, WTF?
    WebAssembly 101 –
    for .NET developers
    Christian Weyer
    @christianweyer
    CTO, Technology Catalyst

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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?
    WebAssembly 101 - for .NET developers
    What is WebAssembly?
    5

    View full-size 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 full-size slide

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

    View full-size 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 full-size 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?
    WebAssembly 101 - for .NET developers
    WebAssembly in the browser
    9

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. Offline Web-based Generative AI with
    LLMs, WebGPU & Wasm
    WASM, WASI, WTF?
    WebAssembly 101 - for .NET developers
    DEMO
    13

    View full-size slide

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

    View full-size 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?
    WebAssembly 101 - for .NET developers
    WebAssembly outside the browser – ubiquitous compute
    15

    View full-size 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 full-size 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 full-size 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?
    WebAssembly 101 - for .NET developers
    Serverless WebAssembly with WASI
    18

    View full-size slide

  19. Serverless HTTP API with Spin & WASI
    WASM, WASI, WTF?
    WebAssembly 101 - for .NET developers
    DEMO
    19

    View full-size slide

  20. § 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 101 - for .NET developers
    Next Step: WebAssembly Component Model
    20
    https://raw.githubusercontent.com/WebAssembly/component-model/main/design/mvp/examples/images/shared-everything-dynamic-linking.svg

    View full-size slide

  21. WASM, WASI, WTF?
    WebAssembly 101 - for .NET developers
    .NET
    21

    View full-size slide

  22. § .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
    22

    View full-size slide

  23. § .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 - for .NET developers
    .NET & WebAssembly - browser
    23

    View full-size slide

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

    View full-size slide

  25. § .NET team sees need for first-class citizen support for Wasm & WASI
    § .NET WASI SDK (experimental)
    § Relies on LLVM
    § Produces one single .wasm file
    § .NET 8 WASI workload
    § Still not feature complete in RC1
    § .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 101 - for .NET developers
    .NET & WebAssembly – beyond the browser
    25

    View full-size slide

  26. WASI with .NET
    § Hello Console app
    § ASP.NET Core app
    WASM, WASI, WTF?
    WebAssembly 101 - for .NET developers
    DEMO
    26
    § Spin with .NET
    § [Something crazy]

    View full-size slide

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

    View full-size slide

  28. § 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 - for .NET developers
    Wasm & WASI will be big for ubiquitous computing 🙌
    28
    Server
    Future
    Web
    Cloud
    Microcontroller
    Extensibility
    Bare
    metal
    Edge

    View full-size slide

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

    View full-size 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 support tracking
    § https://github.com/dotnet/runtime/issues/65895
    § .NET WASI SDK
    § https://github.com/dotnet/dotnet-wasi-sdk
    § Wasmtime .NET
    § https://github.com/bytecodealliance/wasmtime-dotnet
    § 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
    30

    View full-size slide