WebAssembly provides a way to run code written in multiple languages on the web at near-native speed, with client apps running on the web that previously couldn’t have done so. This is why it's gaining quick adoption and more awareness in the web community. Using the WebAssembly JavaScript APIs, you can load WebAssembly modules into a JavaScript app and share functionality between them.
This blog post is a part of the Introduction to WebAssembly for .NET Developer Series on Uno Platform blogs
For you as a .NET developer, this means you can write code in C# and run it in the browser. This can be libraries that you can compile into a WebAssembly module or an app built entirely using C#. Using .NET for client-side WebAssembly development offers advantages such as:
- Leverage the existing .NET ecosystem of .NET libraries.
- Benefit from .NET's performance.
- Stay productive with the same tools you use for Web or Desktop development on Windows, Linux, and macOS.
- Build on a common set of languages, frameworks, and tools that are stable, feature-rich, and easy to use.
In this post, I'll share with you different tools and libraries that you can use to build WebAssembly apps.
Blazor
Blazor is a framework for building interactive client-side web UI with .NET. Blazor apps are composed of reusable web UI components implemented using C#, HTML, and CSS. A component in Blazor is an element of UI, such as a page, or a form. Components are usually written in the form of a Razor markup page and built into .NET assemblies. If you're familiar with MVC or Razor pages, then you'll easily be able to build Blazor apps.
If you want to learn more about Blazor, check out the documentation.
Uno Platform
Uno Platform is a different breed than Blazor. Uno Platform enables you to build applications for Windows, WebAssembly, iOS, macOS, Android, and Linux, with a single-codebase. It gives you pixel-perfect control over where pixels go while having a choice of developing platform-specific or custom look and feel for your application. Unlike Blazor which uses Razor pages, Uno multi-platform apps are built on XAML. It gives you hot-reloading so that you can edit and continue testing the functionality of the app. If you've been developing with XAML, you can apply 100% of your knowledge from UWP, WPF, or WinUI.
It's also important to point out that you get Progressive Web App (PWA) support out of the box. If you want to get started with Uno platform, check out the getting started guide
VS Code & Visual Studio
Having mentioned Blazor which uses Razor, and Uno platform which uses XAML, you get support for building WebAssembly apps with these frameworks in Visual Studio (all target platforms). You also get the same Intellisense and debugging support as you would for Razor pages or XAML development.
VS Code is another popular tool from Microsoft. It's lightweight and also supports developing apps in C#. If you have the right extension for C# then you can use it as well. It has a great debugging experience with hot-reloading supported. You may want to add WebAssembly-specific extensions like WebAssembly Toolkit developed by WebAssembly Foundation. It includes features such as syntax highlighting, wasm binary view, and conversion between wasm and wat files.
Uno Playground for WebAssembly
The Uno platform team built a WebAssembly app that allows you to write XAML and see it rendered live in the browser. You can edit pre-made snippets or try your own code. This is a very good tool for when quickly prototyping a new component or page for your app and seeing how it'll look or behave before copying it over to your app. It's also good for a quick demo during a presentation.
You can give it a try at playground.platform.uno.
Wasmer Runtime & WasmerSharp
Wasmer Runtime allows you to run WebAssembly modules either Standalone or Embedded within other languages. If you want to run WebAssembly code in the same process as your .NET Code, you can use WasmerSharp. It provides .NET Bindings for the Wasmer Runtime.
If you want to learn how to use WasmerSharp, then check out this Introduction to WasmerSharp by the author of WasmerSharp.
Wasmtime
Wasmtime is a runtime for WebAssembly, similar to Wasmer. It has a standalone runtime and also can be used from a variety of different languages through embeddings of the implementation. The .NET embedding of Wasmtime enables .NET code to instantiate WebAssembly modules and to interact with them in-process.
If you want to learn how to use WebAssembly from .NET with the Wasmtime NuGet package, then check out their guide
Wrap Up
WebAssembly (or Wasm) is designed as a portable compilation target for programming languages, enabling deployment on the web for client and server applications. WebAssembly 1.0 has shipped in 4 major browsers and there's an increase in its adoption rate, making it more important for you to consider it as one of your app delivery platforms. With that in mind, I've shared with you the different tools and frameworks which you can use to build WebAssembly apps which I hope helps you be more confident in trying it out in production.
Top comments (1)
Thanks, great post, but it could be very, very interesting to bring more details on the client side size of a c# -> Blazor -> wasm output bundle.
When we are making front-end apps, everyone try to reduce size at the minimum, so some details to allow us to compare pro and cons should be amazing.