ASP.NET, Uncategorized

Introduction to Blazor – Running .NET code in browser

What if we could run .NET standard code in the browsers? Nope don’t even think about yesteryear’s Silverlight (yeah we still remember the blue loading bars!), Blazor doesn’t require any plugins and doesn’t need new UI stuff. It’s all AOT (Ahead of Time) compilation and added a new shiny UI that can embrace HTML and DOM.

Earlier JavaScript had monopoly in client-side web development. We had choice of frameworks (Angular, Vue, React) and in the end it always came down to JavaScript, WebAssembly kind of changes it.

What is WebAssembly?

It is a low-level assembly-like language with a compact binary format that provides a way to run code written in multiple languages on the web at near native speed.

We can easily compile to WebAssembly from C, C++ and C#. There is a github repo which is mean to consume WASM binary files and execute them within .NET assemblies. Just to be clear this isnt compiling .NET languages into WebAssembly, this is for using WebAssembly as reusable compiled code. If we have got an existing WASM file we want to call from .NET, this is for that purpose. Previously mentioned project wont start up a V8 or a Chakra JavaScript engine to run WASM, instead it reads in the bytecode and converts them to .NET via System.Reflection.Emit.

Mono is basically another instance of .NET that allows us to run dozens of other platforms. The entire project is run using the help of Mono library. There are multiple ways how Mono runs the code, of which Mono C runtime compiles the code into WebAssembly and then uses Mono’s IL interpreter to run the managed code.

Blazor – An experimental UI Framework

Steve Sanderson took an instance of .NET (DotNetAnywhere (DNA) project) and compiled it into WebAssembly. DNA was an interpreted .NET runtime written in portable C. Standard IL or CIL(Common Intermediate Language) and runs it on resource constrained devices. To take this a little step further, Steve has compiled DotNetAnywhere to WASM and combined standard programming models. We can write web applications UI in C#.

Mono is an open source implementation of Microsoft’s .NET Framework based on the ECMA standards for C# and the Common Language Runtime (CLR). In 2017, the Mono-team has published first results of their attempts to bring Mono – and with it C#, the CLR, and the .NET Framework – to WebAssembly. As of now Mono’s C run time is compiled into WebAssembly and Mono’s IL interpreter is used to run managed code.

I have created a sample Blazor application using VS2019 Preview and get to see this code.

@functions {
    WeatherForecast[] forecasts;

    protected override async Task OnInitAsync()
        forecasts = await Http.GetJsonAsync<WeatherForecast[]>("sample-data/weather.json");

    class WeatherForecast
        public DateTime Date { get; set; }

        public int TemperatureC { get; set; }

        public int TemperatureF { get; set; }

        public string Summary { get; set; }

This is a Razor page, we make a backend call. This is C# code, but it will run as WASM on client side within a Blazor app. The biggest advantage we see is the .NET programmer can use same data models on client and server.

There’s an architectural diagram from Dr. Holger Schwichtenberg’s blog.

Benefits over JavaScript

C# and ASP.NET can be used on the client and server-side, this removes the need for JavaScript libraries. We can use Shared DataModels and this would reduce code duplication and save us time. Using WebAssembly one could achieve faster execution and loading time.

Key takeaways

WebAssembly gives the browser several key benefits:

Performance: Runs at near native performance

Safe: Runs in a memory-safe, sandbox

Polyglot: Compiles from a range of languages (.NET, C, C++, Java, Rust, etc.)

Just to keep in mind that this is still in development and lot of things do change over time. We will see how Blazor app works in upcoming posts.



NDC Conferences

Scott Hanselman

Holger Schwichtenberg

Learn Blazor

About The Author