July 4, 2018
Lukas Bickel

Running .Net in the Browser With Blazor

Have you ever wanted to write a complete web application in .Net?
Well now you can

Using the power of WebAssembly, a research team of Microsoft is creating a frontend framework written completely in and for .Net.

The Framework itself is still in the experimental stage, which means a lot of things will still change and you shouldn’t build any production software with it.
Nevertheless, it’s still worth checking out.

Is this Silverlight all over again?

NO! Blazor works without any plugins or extensions. It builds on top of open web standards and runs in any modern browser.

How does it work?

It’s important to notice that Blazor doesn’t compile your apps to wasm. Instead your code is compiled to IL like usual and will be downloaded and run in a .Net runtime that was compiled to WebAssembly. More specifically the mono runtime.

You might think that that’s absurd. Downloading and running the complete mono runtime every time someone visits your website. But in fact, the wasm compiled runtime is under 1 MB. And that’s without any compression or optimization applied. The runtime can also be downloaded from a CDN so users will only have to download it once and it will be cached for all Blazor websites.

A complete Blazor todo app is under 2 MB.

What if I have to support IE?

Internet Explorer doesn’t support WebAssembly. For this case, Blazor can also run in a version of the mono runtime that was compiled to asm.js.

Asm.js is a subset of javascript that was designed to be very fast and optimizable.

The main disadvantage is that the asm.js compiled runtime is significantly larger than its wasm counterpart.

What’s all this framework fuzz about?

Blazor is a new frontend framework that was inspired by current frameworks like react, angular and vue. It takes their approaches and applies them to the .Net world.

Blazor is component based. This means that your app will consist of many components that perform basic functionality. Your components will be created as Razor pages.

Here’s an example of a simple counter component:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" onclick="@IncrementCount">Click me</button>

@functions {
int currentCount = 0;

void IncrementCount()
{
currentCount++;
}
}

As you can see, Blazor components combine markup and code inside the same file.

This component can now be used inside another page:

1
2
3
4
5
<h1>Hello, world!</h1>

<!-- Counter is the name of the file in which
the component is defined (Counter.cshtml) -->
<Counter/>

Blazor components are stateful, meaning they store their current state. Each time an event occurs on a component (like the onclick event in the Counter component), that component regenerates its render tree based on that state. Blazor will then compare the new render tree against the previous one and apply any modifications to the browser DOM. You can also manually trigger a regeneration of the render tree.

What’s the advantage?

The big advantage is code reuse between front- and backend. You can easily create a PCL in which common entities or business logic are placed. This PCL can then be referenced and used in both the front- and the backend making it easy to reuse existing code.

Another big advantage is that Blazor reuses existing concepts that are already familiar to developers that are working on the backend with .Net. This will make the jump to the frontend much easier for experienced c# developers.

What can I build with it?

As mentioned in the beginning Blazor is still in the experimental stage, so you shouldn’t use it for any important projects.

It’s still worth creating some demo apps with it to get familiar with the framework. I created a clone of the Todo MVC demo app (http://todomvc.com/) using Blazor.

You can go check it out at https://github.com/BickelLukas/blazor-todo.

How do I get started?

Head on over to https://blazor.net/ and check out their getting started guide.