231 lines
59 KiB
HTML
231 lines
59 KiB
HTML
|
<div><img src="https://blog.jetbrains.com/wp-content/uploads/2021/06/avatar-0.5x-200x200.png" alt="Khalid Abuhakmeh" loading="lazy"/><p>
|
|||
|
|
You’ve likely heard about <a href="https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor">Blazor</a>, .NET’s frontend framework for writing web applications. Blazor lets you use your existing C# skills to build full-stack applications, from client to server. One way to construct Blazor applications is to compile your frontend into a WebAssembly (WASM) file and deploy and run your app in a web browser. The Blazor WASM approach can help you build client experiences similar to native desktop applications with a native performance profile.
|
|||
|
|
</p><p>
|
|||
|
|
But what about WebAssembly on the server? In this post, we’ll see the benefits of using WASM outside the browser and its potential as a transformative technology on the server.
|
|||
|
|
</p><h2>
|
|||
|
|
What is WebAssembly?
|
|||
|
|
</h2><p>
|
|||
|
|
WebAssembly is a low-level assembly-like language with a binary format that runs in modern web browsers. As a result, WebAssembly programs can perform at near-native speeds allowing for new and exciting applications for web clients from desktop-like apps, emulators, high-performance video games, photo editors, and more. The additional benefit of WebAssembly is it can be run either as an extra add-on via service workers, enhancing or replacing the existing JavaScript experience on the client.
|
|||
|
|
</p><p>
|
|||
|
|
The designers of WebAssembly always meant it to run alongside the current web model. Developers unfamiliar with JavaScript can choose from a wide range of languages to write WebAssembly, including C, C++, C#, Go, Python and Rust, with many more languages looking at targeting WASM as an artifact of compilation. For .NET developers, you can think of the <code>.wasm</code> file extension as a <code>.dll</code> or <code>.exe</code> format. The file format is a standard, and WebAssembly System Interface (WASI) compliant runtime will be able to consume them.
|
|||
|
|
</p><p>
|
|||
|
|
One such runtime we’ll be exploring in this post is <strong><a href="https://wasmtime.dev/">Wasmtime</a></strong>.
|
|||
|
|
</p><h2>
|
|||
|
|
What is Wasmtime?
|
|||
|
|
</h2><p>
|
|||
|
|
Developed by the <a href="https://bytecodealliance.org/">Bytecode Alliance</a>, <a href="https://wasmtime.dev/">Wasmtime is a runtime for WebAssembly</a>, allowing you to consume <code>.wasm</code> files and run them on Windows, macOS, or Linux systems outside a web client. Wasmtime is a fast, secure, and standards-compliant runtime for WebAssembly, and supports the <a href="https://wasi.dev/">WebAssembly System Interface (WASI)</a>.
|
|||
|
|
</p><p>
|
|||
|
|
The most crucial feature of Wasmtime is its ability to interact with the native operating system, allowing for configurable access to system resources. Resources include disk access, TCP listeners, hardware input interfaces, and more.
|
|||
|
|
</p><p>
|
|||
|
|
In addition to running standalone <code>.wasm</code> files, you can use Wasmtime inside your applications to consume third-party dependencies. The portability of the WASM format opens up a world where you can have native interop with a standard format across all languages.
|
|||
|
|
</p><p>
|
|||
|
|
Wasmtime also supports debugging using popular native debugging tools like GDB or LLDB, which many of the IntelliJ-family products already support. The debugging experience depends on your technology stack’s build tools.
|
|||
|
|
</p><p>
|
|||
|
|
Speaking of build tools, let’s build our first WASM server application, but first, let’s install Wasmtime.
|
|||
|
|
</p><h2>
|
|||
|
|
Installing Wasmtime
|
|||
|
|
</h2><p>
|
|||
|
|
Wasmtime is a CLI executable, so it’s straightforward to install on any environment. The first step is to visit the <a href="https://wasmtime.dev/">official Bytecode Alliance website</a>. You can also just run the following command.
|
|||
|
|
</p><img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2246px%22%20height%3D%2246px%22%20viewBox%3D%220%200%2046%2046%22%20enable-background%3D%22new%200%200%2046%2046%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cg%3E%0D%0A%09%3Cpath%20d%3D%22M19.436%2C36.875L6.568%2C25.002v-3.863L19.436%2C9.267v5.041l-9.583%2C8.668v0.188l9.583%2C8.669V36.875z%22%2F%3E%0D%0A%09%3Cpath%20d%3D%22M26.343%2C36.875v-5.041l9.583-8.669v-0.188l-9.583-8.668V9.267l12.868%2C11.872v3.863L26.343%2C36.875z%22%2F%3E%0D%0A%3C%2Fg%3E%0D%0A%3C%2Fsvg%3E%0D%0A"/><img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2246px%22%20height%3D%2246px%22%20viewBox%3D%220%200%2046%2046%22%20enable-background%3D%22new%200%200%2046%2046%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%2253.75%22%20y1%3D%2239.353%22%20x2%3D%2286.375%22%20y2%3D%2239.353%22%2F%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%2251.711%22%20y1%3D%2230.534%22%20x2%3D%2284.336%22%20y2%3D%2230.534%22%2F%3E%0D%0A%3Crect%20x%3D%228.932%22%20y%3D%227.334%22%20fill%3D%22%23FFFFFF%22%20stroke%3D%22%23000000%22%20stroke-width%3D%223%22%20stroke-miterlimit%3D%2210%22%20width%3D%2221.097%22%20height%3D%2224.952%22%2F%3E%0D%0A%3Crect%20x%3D%2218.942%22%20y%3D%2215.424%22%20fill%3D%22%23FFFFFF%22%20stroke%3D%22%23000000%22%20stroke-width%3D%223%22%20stroke-miterlimit%3D%2210%22%20width%3D%2221.096%22%20height%3D%2224.953%22%2F%3E%0D%0A%3C%2Fsvg%3E%0D%0A"/><img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2246px%22%20height%3D%2246px%22%20viewBox%3D%220%200%2046%2046%22%20enable-background%3D%22new%200%200%2046%2046%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%227.125%22%20y1%3D%229.25%22%20x2%3D%2239.75%22%20y2%3D%229.25%22%2F%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%227.125%22%20y1%3D%2218.167%22%20x2%3D%2239.75%22%20y2%3D%2218.167%22%2F%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%227.125%22%20y1%3D%2227.083%22%20x2%3D%2239.75%22%20y2%3D%2227.083%22%2F%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%227.125%22%20y1%3D%2236%22%20x2%3D%2229.809%22%20y2%3D%2236%22%2F%3E%0D%0A%3C%2Fsvg%3E%0D%0A"/><img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics
|
|||
|
|
<span>curl https:</span><span>//wasmtime.dev/install.sh -sSf | bash</span>
|
|||
|
|
</div><div>
|
|||
|
|
curl https://wasmtime.dev/install.sh -sSf | bash
|
|||
|
|
</div><pre>curl https://wasmtime.dev/install.sh -sSf | bash</pre><p>
|
|||
|
|
Windows users can do the same using the Windows Subsystem for Linux (WSL), or <a href="https://github.com/bytecodealliance/wasmtime/releases">grab the installer from the Wasmtime releases</a> page.
|
|||
|
|
</p><p>
|
|||
|
|
You can check you’ve successfully installed Wasmtime by running the command <code>wasmtime –version</code> from the command line.
|
|||
|
|
</p><img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2246px%22%20height%3D%2246px%22%20viewBox%3D%220%200%2046%2046%22%20enable-background%3D%22new%200%200%2046%2046%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cg%3E%0D%0A%09%3Cpath%20d%3D%22M19.436%2C36.875L6.568%2C25.002v-3.863L19.436%2C9.267v5.041l-9.583%2C8.668v0.188l9.583%2C8.669V36.875z%22%2F%3E%0D%0A%09%3Cpath%20d%3D%22M26.343%2C36.875v-5.041l9.583-8.669v-0.188l-9.583-8.668V9.267l12.868%2C11.872v3.863L26.343%2C36.875z%22%2F%3E%0D%0A%3C%2Fg%3E%0D%0A%3C%2Fsvg%3E%0D%0A"/><img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2246px%22%20height%3D%2246px%22%20viewBox%3D%220%200%2046%2046%22%20enable-background%3D%22new%200%200%2046%2046%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%2253.75%22%20y1%3D%2239.353%22%20x2%3D%2286.375%22%20y2%3D%2239.353%22%2F%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%2251.711%22%20y1%3D%2230.534%22%20x2%3D%2284.336%22%20y2%3D%2230.534%22%2F%3E%0D%0A%3Crect%20x%3D%228.932%22%20y%3D%227.334%22%20fill%3D%22%23FFFFFF%22%20stroke%3D%22%23000000%22%20stroke-width%3D%223%22%20stroke-miterlimit%3D%2210%22%20width%3D%2221.097%22%20height%3D%2224.952%22%2F%3E%0D%0A%3Crect%20x%3D%2218.942%22%20y%3D%2215.424%22%20fill%3D%22%23FFFFFF%22%20stroke%3D%22%23000000%22%20stroke-width%3D%223%22%20stroke-miterlimit%3D%2210%22%20width%3D%2221.096%22%20height%3D%2224.953%22%2F%3E%0D%0A%3C%2Fsvg%3E%0D%0A"/><img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2246px%22%20height%3D%2246px%22%20viewBox%3D%220%200%2046%2046%22%20enable-background%3D%22new%200%200%2046%2046%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%227.125%22%20y1%3D%229.25%22%20x2%3D%2239.75%22%20y2%3D%229.25%22%2F%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%227.125%22%20y1%3D%2218.167%22%20x2%3D%2239.75%22%20y2%3D%2218.167%22%2F%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%227.125%22%20y1%3D%2227.083%22%20x2%3D%2239.75%22%20y2%3D%2227.083%22%2F%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%227.125%22%20y1%3D%2236%22%20x2%3D%2229.809%22%20y2%3D%2236%22%2F%3E%0D%0A%3C%2Fsvg%3E%0D%0A"/><img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics
|
|||
|
|
<span>></span> <span>wasmtime --version</span>
|
|||
|
|
</div><div>
|
|||
|
|
<span>wasmtime-cli</span> <span>1.0</span><span>.</span><span>1</span>
|
|||
|
|
</div><pre>> wasmtime --version
|
|||
|
|
wasmtime-cli 1.0.1</pre><h2>
|
|||
|
|
Compiling a WASM .NET application
|
|||
|
|
</h2><p>
|
|||
|
|
<strong>Note: You’ll need the latest version of .NET 7 SDK installed</strong>
|
|||
|
|
</p><p>
|
|||
|
|
Our goal in this section is to take a C# Console application and compile it to a <code>.wasm</code> file. The solution will be a self-contained application that won’t need unique WASI resources like TCP listeners, file access, or environment variables.
|
|||
|
|
</p><p>
|
|||
|
|
First, let’s start with a brand new Console Application project. From JetBrains Rider’s new solution window, select the <strong><em>“Console Application”</em></strong> template and call it <em><strong>“HelloWasm”</strong></em> or whatever you’d like.
|
|||
|
|
</p><figure><img src="https://blog.jetbrains.com/wp-content/uploads/2022/10/image.png" alt=""/></figure><p>
|
|||
|
|
Once the solution is ready, you’ll need to add the “<strong>Wasi.Sdk”</strong> NuGet package to your console project. If you don’t see the package, be sure that you have the <strong>Prerelease</strong> checkbox checked.
|
|||
|
|
</p><figure><img loading="lazy" src="https://blog.jetbrains.com/wp-content/uploads/2022/10/image-1.png" alt=""/><figcaption>Wasi.Sdk Nuget package in JetBrains Rider’s NuGet tool window</figcaption></figure><p>
|
|||
|
|
You’re ready to compile the console application into a <code>.wasm</code> artifact. Before doing so, change the line in <code>Program.cs</code> to the following:
|
|||
|
|
</p><img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2246px%22%20height%3D%2246px%22%20viewBox%3D%220%200%2046%2046%22%20enable-background%3D%22new%200%200%2046%2046%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cg%3E%0D%0A%09%3Cpath%20d%3D%22M19.436%2C36.875L6.568%2C25.002v-3.863L19.436%2C9.267v5.041l-9.583%2C8.668v0.188l9.583%2C8.669V36.875z%22%2F%3E%0D%0A%09%3Cpath%20d%3D%22M26.343%2C36.875v-5.041l9.583-8.669v-0.188l-9.583-8.668V9.267l12.868%2C11.872v3.863L26.343%2C36.875z%22%2F%3E%0D%0A%3C%2Fg%3E%0D%0A%3C%2Fsvg%3E%0D%0A"/><img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2246px%22%20height%3D%2246px%22%20viewBox%3D%220%200%2046%2046%22%20enable-background%3D%22new%200%200%2046%2046%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%2253.75%22%20y1%3D%2239.353%22%20x2%3D%2286.375%22%20y2%3D%2239.353%22%2F%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%2251.711%22%20y1%3D%2230.534%22%20x2%3D%2284.336%22%20y2%3D%2230.534%22%2F%3E%0D%0A%3Crect%20x%3D%228.932%22%20y%3D%227.334%22%20fill%3D%22%23FFFFFF%22%20stroke%3D%22%23000000%22%20stroke-width%3D%223%22%20stroke-miterlimit%3D%2210%22%20width%3D%2221.097%22%20height%3D%2224.952%22%2F%3E%0D%0A%3Crect%20x%3D%2218.942%22%20y%3D%2215.424%22%20fill%3D%22%23FFFFFF%22%20stroke%3D%22%23000000%22%20stroke-width%3D%223%22%20stroke-miterlimit%3D%2210%22%20width%3D%2221.096%22%20height%3D%2224.953%22%2F%3E%0D%0A%3C%2Fsvg%3E%0D%0A"/><img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2246px%22%20height%3D%2246px%22%20viewBox%3D%220%200%2046%2046%22%20enable-background%3D%22new%200%200%2046%2046%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%227.125%22%20y1%3D%229.25%22%20x2%3D%2239.75%22%20y2%3D%229.25%22%2F%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%227.125%22%20y1%3D%2218.167%22%20x2%3D%2239.75%22%20y2%3D%2218.167%22%2F%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%227.125%22%20y1%3D%2227.083%22%20x2%3D%2239.75%22%20y2%3D%2227.083%22%2F%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%227.125%22%20y1%3D%2236%22%20x2%3D%2229.809%22%20y2%3D%2236%22%2F%3E%0D%0A%3C%2Fsvg%3E%0D%0A"/><img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics
|
|||
|
|
<span>Console.</span><span>WriteLine</span><span>(</span><span>"Hello, Wasmtime!"</span><span>)</span><span>;</span>
|
|||
|
|
</div><div>
|
|||
|
|
Console.WriteLine("Hello, Wasmtime!");
|
|||
|
|
</div><pre>Console.WriteLine("Hello, Wasmtime!");</pre><p>
|
|||
|
|
Building your project, you will see references to bundling System libraries commonly used in .NET applications. Remember that WASM is native byte code. The .NET runtime must be packaged and shipped as part of your artifact. This is not any different than Blazor WASM deployments for a web client.
|
|||
|
|
</p><figure><img loading="lazy" src="https://blog.jetbrains.com/wp-content/uploads/2022/10/image-2.png" alt=""/><figcaption>Building a Wasi.Sdk-powered. NET project inside of JetBrains Rider</figcaption></figure><p>
|
|||
|
|
Now, let’s run our WASM file using Wasmtime. In Rider, you’ll use the <strong>Run Anything</strong> dialog (Ctrl+Ctrl) to run the following command:
|
|||
|
|
</p><img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2246px%22%20height%3D%2246px%22%20viewBox%3D%220%200%2046%2046%22%20enable-background%3D%22new%200%200%2046%2046%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cg%3E%0D%0A%09%3Cpath%20d%3D%22M19.436%2C36.875L6.568%2C25.002v-3.863L19.436%2C9.267v5.041l-9.583%2C8.668v0.188l9.583%2C8.669V36.875z%22%2F%3E%0D%0A%09%3Cpath%20d%3D%22M26.343%2C36.875v-5.041l9.583-8.669v-0.188l-9.583-8.668V9.267l12.868%2C11.872v3.863L26.343%2C36.875z%22%2F%3E%0D%0A%3C%2Fg%3E%0D%0A%3C%2Fsvg%3E%0D%0A"/><img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2246px%22%20height%3D%2246px%22%20viewBox%3D%220%200%2046%2046%22%20enable-background%3D%22new%200%200%2046%2046%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%2253.75%22%20y1%3D%2239.353%22%20x2%3D%2286.375%22%20y2%3D%2239.353%22%2F%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%2251.711%22%20y1%3D%2230.534%22%20x2%3D%2284.336%22%20y2%3D%2230.534%22%2F%3E%0D%0A%3Crect%20x%3D%228.932%22%20y%3D%227.334%22%20fill%3D%22%23FFFFFF%22%20stroke%3D%22%23000000%22%20stroke-width%3D%223%22%20stroke-miterlimit%3D%2210%22%20width%3D%2221.097%22%20height%3D%2224.952%22%2F%3E%0D%0A%3Crect%20x%3D%2218.942%22%20y%3D%2215.424%22%20fill%3D%22%23FFFFFF%22%20stroke%3D%22%23000000%22%20stroke-width%3D%223%22%20stroke-miterlimit%3D%2210%22%20width%3D%2221.096%22%20height%3D%2224.953%22%2F%3E%0D%0A%3C%2Fsvg%3E%0D%0A"/><img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2246px%22%20height%3D%2246px%22%20viewBox%3D%220%200%2046%2046%22%20enable-background%3D%22new%200%200%2046%2046%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%227.125%22%20y1%3D%229.25%22%20x2%3D%2239.75%22%20y2%3D%229.25%22%2F%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%227.125%22%20y1%3D%2218.167%22%20x2%3D%2239.75%22%20y2%3D%2218.167%22%2F%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%227.125%22%20y1%3D%2227.083%22%20x2%3D%2239.75%22%20y2%3D%2227.083%22%2F%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%227.125%22%20y1%3D%2236%22%20x2%3D%2229.809%22%20y2%3D%2236%22%2F%3E%0D%0A%3C%2Fsvg%3E%0D%0A"/><img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics
|
|||
|
|
<span>wasmtime ./HelloWasm/bin/Debug/net7.</span><span>0</span><span>/HelloWasm.</span><span>wasm</span>
|
|||
|
|
</div><div>
|
|||
|
|
wasmtime ./HelloWasm/bin/Debug/net7.0/HelloWasm.wasm
|
|||
|
|
</div><pre>wasmtime ./HelloWasm/bin/Debug/net7.0/HelloWasm.wasm</pre><p>
|
|||
|
|
When successful, you should see your Console application’s output.
|
|||
|
|
</p><figure><img loading="lazy" src="https://blog.jetbrains.com/wp-content/uploads/2022/10/image-3.png" alt=""/><figcaption>Successful output in JetBrains Rider’s “Run Anything” tool window</figcaption></figure><p>
|
|||
|
|
Awesome! You just wrote your first WASM-targeted .NET application. Now you could deploy the <code>.wasm</code> file to any host that supports WebAssmebly.
|
|||
|
|
</p><h2>
|
|||
|
|
Consuming WASM and WAT modules from .NET
|
|||
|
|
</h2><p>
|
|||
|
|
While it’s certainly possible to consume a <code>.wasm</code> file in .NET, it is a bit more tedious than the plug-and-play experience of a NuGet package. Currently, there is a <strong><em>Wasmruntime</em></strong> NuGet package that contains low-level APIs for dealing with the elements of a host. These elements include an <code>Engine</code>, <code>Module</code>, <code>Linker</code>, <code>Store</code>, and more. They allow you to define your custom host, including low-level system calls and what calling them may do on a WASI-compliant system. For more information, I recommend reading excellent <a href="https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts#webassembly_goals">Mozilla documentation to understand how WASM interfaces with a host</a>.
|
|||
|
|
</p><p>
|
|||
|
|
I would not recommend most developers attempt to write their host; instead, the community should wait for the Byte Code Alliance to create a safe-by-default host.
|
|||
|
|
</p><p>
|
|||
|
|
Let’s look at an example where we use the WebAssembly Text (WAT) format to link a C# function to WebAssembly. WAT is a human-readable and editable format representing the WASM binary format.
|
|||
|
|
</p><img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2246px%22%20height%3D%2246px%22%20viewBox%3D%220%200%2046%2046%22%20enable-background%3D%22new%200%200%2046%2046%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cg%3E%0D%0A%09%3Cpath%20d%3D%22M19.436%2C36.875L6.568%2C25.002v-3.863L19.436%2C9.267v5.041l-9.583%2C8.668v0.188l9.583%2C8.669V36.875z%22%2F%3E%0D%0A%09%3Cpath%20d%3D%22M26.343%2C36.875v-5.041l9.583-8.669v-0.188l-9.583-8.668V9.267l12.868%2C11.872v3.863L26.343%2C36.875z%22%2F%3E%0D%0A%3C%2Fg%3E%0D%0A%3C%2Fsvg%3E%0D%0A"/><img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2246px%22%20height%3D%2246px%22%20viewBox%3D%220%200%2046%2046%22%20enable-background%3D%22new%200%200%2046%2046%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%2253.75%22%20y1%3D%2239.353%22%20x2%3D%2286.375%22%20y2%3D%2239.353%22%2F%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%2251.711%22%20y1%3D%2230.534%22%20x2%3D%2284.336%22%20y2%3D%2230.534%22%2F%3E%0D%0A%3Crect%20x%3D%228.932%22%20y%3D%227.334%22%20fill%3D%22%23FFFFFF%22%20stroke%3D%22%23000000%22%20stroke-width%3D%223%22%20stroke-miterlimit%3D%2210%22%20width%3D%2221.097%22%20height%3D%2224.952%22%2F%3E%0D%0A%3Crect%20x%3D%2218.942%22%20y%3D%2215.424%22%20fill%3D%22%23FFFFFF%22%20stroke%3D%22%23000000%22%20stroke-width%3D%223%22%20stroke-miterlimit%3D%2210%22%20width%3D%2221.096%22%20height%3D%2224.953%22%2F%3E%0D%0A%3C%2Fsvg%3E%0D%0A"/><img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2246px%22%20height%3D%2246px%22%20viewBox%3D%220%200%2046%2046%22%20enable-background%3D%22new%200%200%2046%2046%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%227.125%22%20y1%3D%229.25%22%20x2%3D%2239.75%22%20y2%3D%229.25%22%2F%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%227.125%22%20y1%3D%2218.167%22%20x2%3D%2239.75%22%20y2%3D%2218.167%22%2F%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%227.125%22%20y1%3D%2227.083%22%20x2%3D%2239.75%22%20y2%3D%2227.083%22%2F%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%227.125%22%20y1%3D%2236%22%20x2%3D%2229.809%22%20y2%3D%2236%22%2F%3E%0D%0A%3C%2Fsvg%3E%0D%0A"/><img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics
|
|||
|
|
<span>using</span> <span>Wasmtime;</span>
|
|||
|
|
</div><div>
|
|||
|
|
<span>using</span> <span>var</span> <span>engine =</span> <span>new</span> <span>Engine</span><span>()</span><span>;</span>
|
|||
|
|
</div><div>
|
|||
|
|
<span>using</span> <span>var</span> <span>module = Module.</span><span>FromText</span><span>(</span>
|
|||
|
|
</div><div>
|
|||
|
|
<span>engine,</span>
|
|||
|
|
</div><div>
|
|||
|
|
<span>"hello"</span><span>,</span>
|
|||
|
|
</div><div>
|
|||
|
|
<span>"(module (func $hello (import \"\" \"hello\")) (func (export \"run\") (call $hello)))"</span>
|
|||
|
|
</div><div>
|
|||
|
|
<span>)</span><span>;</span>
|
|||
|
|
</div><div>
|
|||
|
|
<span>using</span> <span>var</span> <span>linker =</span> <span>new</span> <span>Linker</span><span>(</span><span>engine</span><span>)</span><span>;</span>
|
|||
|
|
</div><div>
|
|||
|
|
<span>using</span> <span>var</span> <span>store =</span> <span>new</span> <span>Store</span><span>(</span><span>engine</span><span>)</span><span>;</span>
|
|||
|
|
</div><div>
|
|||
|
|
<span>linker.</span><span>Define</span><span>(</span>
|
|||
|
|
</div><div>
|
|||
|
|
<span>""</span><span>,</span>
|
|||
|
|
</div><div>
|
|||
|
|
<span>"hello"</span><span>,</span>
|
|||
|
|
</div><div>
|
|||
|
|
<span>Function.</span><span>FromCallback</span><span>(</span><span>store,</span> <span>()</span> <span>=</span><span>></span> <span>Console.</span><span>WriteLine</span><span>(</span><span>"Hello from C#!"</span><span>))</span>
|
|||
|
|
</div><div>
|
|||
|
|
<span>)</span><span>;</span>
|
|||
|
|
</div><div>
|
|||
|
|
<span>var</span> <span>instance = linker.</span><span>Instantiate</span><span>(</span><span>store, module</span><span>)</span><span>;</span>
|
|||
|
|
</div><div>
|
|||
|
|
<span>var</span> <span>run = instance.</span><span>GetAction</span><span>(</span><span>"run"</span><span>)</span><span>!;</span>
|
|||
|
|
</div><div>
|
|||
|
|
<span>run</span><span>()</span><span>;</span>
|
|||
|
|
</div><div>
|
|||
|
|
using Wasmtime; using var engine = new Engine(); using var module = Module.FromText( engine, "hello", "(module (func $hello (import \"\" \"hello\")) (func (export \"run\") (call $hello)))" ); using var linker = new Linker(engine); using var store = new Store(engine); linker.Define( "", "hello", Function.FromCallback(store, () => Console.WriteLine("Hello from C#!")) ); var instance = linker.Instantiate(store, module); var run = instance.GetAction("run")!; run();
|
|||
|
|
</div><pre>using Wasmtime;
|
|||
|
|
|
|||
|
|
using var engine = new Engine();
|
|||
|
|
|
|||
|
|
using var module = Module.FromText(
|
|||
|
|
engine,
|
|||
|
|
"hello",
|
|||
|
|
"(module (func $hello (import \"\" \"hello\")) (func (export \"run\") (call $hello)))"
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
using var linker = new Linker(engine);
|
|||
|
|
using var store = new Store(engine);
|
|||
|
|
|
|||
|
|
linker.Define(
|
|||
|
|
"",
|
|||
|
|
"hello",
|
|||
|
|
Function.FromCallback(store, () => Console.WriteLine("Hello from C#!"))
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
var instance = linker.Instantiate(store, module);
|
|||
|
|
var run = instance.GetAction("run")!;
|
|||
|
|
run();</pre><p>
|
|||
|
|
The critical thing to note in this example is that our WebAssembly module uses a reference to <code>$hello</code>. Since our C# application manages our WebAssembly context, we can create a definition for <code>$hello</code> using the method <code>Function.FromCallback</code>. In C#, we ask the linker, which now contains both our <code>.wat</code> definition and our new implementation of <code>$hello</code> for the <code>run</code> method. All that’s left is to invoke our <code>Action</code> and see the results.
|
|||
|
|
</p><img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2246px%22%20height%3D%2246px%22%20viewBox%3D%220%200%2046%2046%22%20enable-background%3D%22new%200%200%2046%2046%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cg%3E%0D%0A%09%3Cpath%20d%3D%22M19.436%2C36.875L6.568%2C25.002v-3.863L19.436%2C9.267v5.041l-9.583%2C8.668v0.188l9.583%2C8.669V36.875z%22%2F%3E%0D%0A%09%3Cpath%20d%3D%22M26.343%2C36.875v-5.041l9.583-8.669v-0.188l-9.583-8.668V9.267l12.868%2C11.872v3.863L26.343%2C36.875z%22%2F%3E%0D%0A%3C%2Fg%3E%0D%0A%3C%2Fsvg%3E%0D%0A"/><img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2246px%22%20height%3D%2246px%22%20viewBox%3D%220%200%2046%2046%22%20enable-background%3D%22new%200%200%2046%2046%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%2253.75%22%20y1%3D%2239.353%22%20x2%3D%2286.375%22%20y2%3D%2239.353%22%2F%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%2251.711%22%20y1%3D%2230.534%22%20x2%3D%2284.336%22%20y2%3D%2230.534%22%2F%3E%0D%0A%3Crect%20x%3D%228.932%22%20y%3D%227.334%22%20fill%3D%22%23FFFFFF%22%20stroke%3D%22%23000000%22%20stroke-width%3D%223%22%20stroke-miterlimit%3D%2210%22%20width%3D%2221.097%22%20height%3D%2224.952%22%2F%3E%0D%0A%3Crect%20x%3D%2218.942%22%20y%3D%2215.424%22%20fill%3D%22%23FFFFFF%22%20stroke%3D%22%23000000%22%20stroke-width%3D%223%22%20stroke-miterlimit%3D%2210%22%20width%3D%2221.096%22%20height%3D%2224.953%22%2F%3E%0D%0A%3C%2Fsvg%3E%0D%0A"/><img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2246px%22%20height%3D%2246px%22%20viewBox%3D%220%200%2046%2046%22%20enable-background%3D%22new%200%200%2046%2046%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%227.125%22%20y1%3D%229.25%22%20x2%3D%2239.75%22%20y2%3D%229.25%22%2F%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%227.125%22%20y1%3D%2218.167%22%20x2%3D%2239.75%22%20y2%3D%2218.167%22%2F%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%227.125%22%20y1%3D%2227.083%22%20x2%3D%2239.75%22%20y2%3D%2227.083%22%2F%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%227.125%22%20y1%3D%2236%22%20x2%3D%2229.809%22%20y2%3D%2236%22%2F%3E%0D%0A%3C%2Fsvg%3E%0D%0A"/><img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics
|
|||
|
|
<span>Hello from C</span><span>#!</span>
|
|||
|
|
</div><div>
|
|||
|
|
Hello from C#!
|
|||
|
|
</div><pre>Hello from C#!</pre><p>
|
|||
|
|
While it may seem trivial, we’ll be able to run and consume WASM in our .NET applications. That opens up possibilities for solving problems using solutions from other ecosystems.
|
|||
|
|
</p><h2>
|
|||
|
|
The current reality of WASM on the server
|
|||
|
|
</h2><p>
|
|||
|
|
While this post has been relatively optimistic about the prospect of WASM, there are limitations to the technology that folks should be aware of, and they will vary based on the WASM host.
|
|||
|
|
</p><p>
|
|||
|
|
The first significant limitation is threading. So far, with my testing, Wasmtime only has access to a single thread for execution. Thread limits are not entirely a deal-breaker, but you’ll need to rewrite some of your solutions to reduce the need for threading. This limitation becomes apparent when using an API that involves <code>Thread</code> or <code>Task.Delay</code>, which will halt your running process or terminate it catastrophically. However, threading may not be an issue in the near future as <a href="https://github.com/dotnet/runtime/issues/68162">.NET adds multi-threaded support to WASM</a>. Wasmtime also enables multiple threads with an experimental flag, but your technology stack will need to take advantage of that feature.
|
|||
|
|
</p><p>
|
|||
|
|
The .NET runtime targeting WASM is the same as Blazor WASM, which is to say it has limits. APIs will not work based on a lack of support from the current WASM host. Missing APIs could limit your ability to solve specific problems. The APIs are still in active development and could change based on features added to Wasmtime and other WASI runtimes.
|
|||
|
|
</p><p>
|
|||
|
|
Another issue I’ve found is there is currently no outward socket support. Lack of socket support limits a WASM application’s ability to communicate with dependencies like a database or web service. <a href="https://github.com/WebAssembly/wasi-sockets">Discussions of a Socket specification</a> will resolve this issue, allowing for more robust WASM apps. In addition, this should enable .NET developers to use data access tools like Entity Framework Core or Dapper with few issues.
|
|||
|
|
</p><p>
|
|||
|
|
Tooling is another concern; vendors must catch up to the experiences .NET developers have gotten used to developing .NET applications. Luckily for developers, Wasmruntime uses standard debugging tools like LLDB and GDB, making integrating them into existing tools much more manageable.
|
|||
|
|
</p><p>
|
|||
|
|
Infrastructure will play an essential role in how you build your WASM solutions. The strength of WASM comes from the ability to start and dispose of executing modules quickly in the vein of “microservices” or “functions”. However, a different architectural approach will require you to rethink your existing applications’ orchestration and units of work. In addition, you and your team may not have the bandwidth to deal with the technical and conceptual challenges simultaneously.
|
|||
|
|
</p><p>
|
|||
|
|
How does a modern WASM-powered application look when deployed? Some folks think it looks like functions as a service (FaaS), while others see it as a replacement for containers in a Kubernetes cluster, and both are perfectly valid. Luckily, many new WASM hosts are springing up along with reliable cloud providers AWS, Microsoft Azure, and Cloudflare, adding options to their ever-expanding list of services.
|
|||
|
|
</p><h2>
|
|||
|
|
Imagining the future of WASM on the server
|
|||
|
|
</h2><p>
|
|||
|
|
We’ve reached the speculative part of the post, where we get to imagine the future of WASM and how it may transform your development experience, from writing code to deploying a solution. So let’s start with the process of development.
|
|||
|
|
</p><p>
|
|||
|
|
If you’ve developed any Blazor WASM application, you’ll likely realize that little feels different while writing code. After all, it’s C#! The debugging experience may be slightly different, as you now deal with a completely different host and runtime, specifically the web browser. However, writing solutions to target WASM will feel very similar to Blazor WASM, and I expect the experience to improve as tooling catches up. Switching to WASM apps will be easier for most developers than switching to a new programming paradigm.
|
|||
|
|
</p><p>
|
|||
|
|
The frameworks targeting WASM will likely change, as you will want to reconsider how and when functions are executing. For example, <a href="https://www.fermyon.com/blog/webassembly-for-dotnet-developers-spin-sdk-intro">Fermyon released a .NET Spin SDK</a> specifically for their hosting platform that targets WASM. Let’s look at how you might write a function given their SDK.
|
|||
|
|
</p><img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2246px%22%20height%3D%2246px%22%20viewBox%3D%220%200%2046%2046%22%20enable-background%3D%22new%200%200%2046%2046%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cg%3E%0D%0A%09%3Cpath%20d%3D%22M19.436%2C36.875L6.568%2C25.002v-3.863L19.436%2C9.267v5.041l-9.583%2C8.668v0.188l9.583%2C8.669V36.875z%22%2F%3E%0D%0A%09%3Cpath%20d%3D%22M26.343%2C36.875v-5.041l9.583-8.669v-0.188l-9.583-8.668V9.267l12.868%2C11.872v3.863L26.343%2C36.875z%22%2F%3E%0D%0A%3C%2Fg%3E%0D%0A%3C%2Fsvg%3E%0D%0A"/><img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2246px%22%20height%3D%2246px%22%20viewBox%3D%220%200%2046%2046%22%20enable-background%3D%22new%200%200%2046%2046%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%2253.75%22%20y1%3D%2239.353%22%20x2%3D%2286.375%22%20y2%3D%2239.353%22%2F%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%2251.711%22%20y1%3D%2230.534%22%20x2%3D%2284.336%22%20y2%3D%2230.534%22%2F%3E%0D%0A%3Crect%20x%3D%228.932%22%20y%3D%227.334%22%20fill%3D%22%23FFFFFF%22%20stroke%3D%22%23000000%22%20stroke-width%3D%223%22%20stroke-miterlimit%3D%2210%22%20width%3D%2221.097%22%20height%3D%2224.952%22%2F%3E%0D%0A%3Crect%20x%3D%2218.942%22%20y%3D%2215.424%22%20fill%3D%22%23FFFFFF%22%20stroke%3D%22%23000000%22%20stroke-width%3D%223%22%20stroke-miterlimit%3D%2210%22%20width%3D%2221.096%22%20height%3D%2224.953%22%2F%3E%0D%0A%3C%2Fsvg%3E%0D%0A"/><img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Ebene_2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2246px%22%20height%3D%2246px%22%20viewBox%3D%220%200%2046%2046%22%20enable-background%3D%22new%200%200%2046%2046%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%227.125%22%20y1%3D%229.25%22%20x2%3D%2239.75%22%20y2%3D%229.25%22%2F%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%227.125%22%20y1%3D%2218.167%22%20x2%3D%2239.75%22%20y2%3D%2218.167%22%2F%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%227.125%22%20y1%3D%2227.083%22%20x2%3D%2239.75%22%20y2%3D%2227.083%22%2F%3E%0D%0A%3Cline%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%224%22%20stroke-miterlimit%3D%2210%22%20x1%3D%227.125%22%20y1%3D%2236%22%20x2%3D%2229.809%22%20y2%3D%2236%22%2F%3E%0D%0A%3C%2Fsvg%3E%0D%0A"/><img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics
|
|||
|
|
<span>using</span> <span>System.Net;</span>
|
|||
|
|
</div><div>
|
|||
|
|
<span>using</span> <span>Fermyon.Spin.Sdk;</span>
|
|||
|
|
</div><div>
|
|||
|
|
<span>namespace</span> <span>Microservice;</span>
|
|||
|
|
</div><div>
|
|||
|
|
<span>public</span> <span>static</span> <span>class</span> <span>Handler</span>
|
|||
|
|
</div><div>
|
|||
|
|
<span>{</span>
|
|||
|
|
</div><div>
|
|||
|
|
<span>[</span><span>HttpHandler</span><span>]</span>
|
|||
|
|
</div><div>
|
|||
|
|
<span>public</span> <span>static</span> <span>HttpResponse</span> <span>HandleHttpRequest</span><span>(</span><span>HttpRequest request</span><span>)</span>
|
|||
|
|
</div><div>
|
|||
|
|
<span>{</span>
|
|||
|
|
</div><div>
|
|||
|
|
<span>return</span> <span>new</span> <span>HttpResponse</span>
|
|||
|
|
</div><div>
|
|||
|
|
<span>{</span>
|
|||
|
|
</div><div>
|
|||
|
|
<span>StatusCode = HttpStatusCode.</span><span>OK</span><span>,</span>
|
|||
|
|
</div><div>
|
|||
|
|
<span>BodyAsString =</span> <span>"Hello from .NET"</span><span>,</span>
|
|||
|
|
</div><div>
|
|||
|
|
<span>}</span><span>;</span>
|
|||
|
|
</div><div>
|
|||
|
|
<span>}</span>
|
|||
|
|
</div><div>
|
|||
|
|
<span>}</span>
|
|||
|
|
</div><div>
|
|||
|
|
using System.Net; using Fermyon.Spin.Sdk; namespace Microservice; public static class Handler { [HttpHandler] public static HttpResponse HandleHttpRequest(HttpRequest request) { return new HttpResponse { StatusCode = HttpStatusCode.OK, BodyAsString = "Hello from .NET", }; } }
|
|||
|
|
</div><pre>using System.Net;
|
|||
|
|
using Fermyon.Spin.Sdk;
|
|||
|
|
|
|||
|
|
namespace Microservice;
|
|||
|
|
|
|||
|
|
public static class Handler
|
|||
|
|
{
|
|||
|
|
[HttpHandler]
|
|||
|
|
public static HttpResponse HandleHttpRequest(HttpRequest request)
|
|||
|
|
{
|
|||
|
|
return new HttpResponse
|
|||
|
|
{
|
|||
|
|
StatusCode = HttpStatusCode.OK,
|
|||
|
|
BodyAsString = "Hello from .NET",
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
}</pre><p>
|
|||
|
|
This example begs questions. For example, how do you transition from ASP.NET Core Minimal Endpoints or ASP.NET Core MVC to this new approach? Does ASP.NET Core need to rethink how to compile existing applications into deployable units? I expect a lot of conversations and strategies to emerge as developers adopt WASM.
|
|||
|
|
</p><p>
|
|||
|
|
We could see WASM replace most instances of containerization, especially when WASM can package both runtimes and the applications that depend on them in one portable package. Advantages you could hope to see: Reduced CPU and memory usage, decreased cold-boot times, reduced hosting bills, and more significant economies of scale.
|
|||
|
|
</p><p>
|
|||
|
|
These <code>.wasm</code> files can also be considerably smaller as they don’t have the same need for layers found in images built on entire operating systems. The portability and efficiency of WASM hosts will lead to more hosting options from vendors, new and old.
|
|||
|
|
</p><p>
|
|||
|
|
Finally, the most exciting prospect of WASM on the server is the fulfillment of an agnostic cloud environment, where you, as the developer, no longer have to worry about regions. WASM can be deployed simultaneously to many global regions beyond cloud vendors’ limited and congested regions. WASM can start closest to your users and provide them with the fastest experience possible regardless of their country of origin. This democratization of user experience is most exciting for folks delivering global-scale applications.
|
|||
|
|
</p><h2>
|
|||
|
|
Conclusion
|
|||
|
|
</h2><p>
|
|||
|
|
In this post, we delved into WebAssembly and the efforts to run it on the server using Wasmtime. While it’s still relatively new, the promise of WASM on the server is exciting, and .NET is at the forefront of giving developers more hosting options. As tooling and development experience improves, so will the solutions developers deliver to customers. As you’ve seen, the experience even now is good.
|
|||
|
|
</p><p>
|
|||
|
|
There are limitations with WASM, but like all technologies, the community will push solutions forward, and progress will occur. It’s still important to be careful when choosing cutting-edge technologies as solutions, as you’ll likely be some of the first and only folks experiencing those issues.
|
|||
|
|
</p><p>
|
|||
|
|
That said, I’m cautiously optimistic about the future of WASM, and I hope you found something in this article that has sparked your curiosity to explore the topic further.
|
|||
|
|
</p></div>
|