With the rise of WebAssembly, the number of things we can do with a browser increased rapidly. One example is Blazor, a new web framework from Microsoft. It allows you to write websites in C# with the full power of .NET.

WebAssembly

The technology that makes Blazor possible is WebAssembly. This is a standard that defines binary code which can be executed within the browser. This results in huge performance gains and an increased choice of languages. You can compile any LLVM-compliant language such as Rust, Kotlin, Ruby and many others into WebAssembly and run it in a webpage. You could use C# even before Blazor, but without .NET libraries, which would make it useless.

Though WebAssembly is a relatively new standard (adopted in early 2019), it is already supported on 88% of clients. Here are the supported browser versions:

How Blazor works

Blazor lets you reuse existing .NET libraries directly on the client-side, which is perfect if your backend is using .NET. To achieve this, Microsoft ported the whole of .NET runtime to WebAssembly and developed a new framework for web applications. When you develop with Blazor, your code will compile into a DLL file, that your server will serve to clients alongside Blazor runtime and other .NET DLLs. This is what code in Blazor looks like:

This snippet shows you how 2-way data binding and interpolation work in Blazor. As you can see, it uses a mix of HTML and C# in the same file, a concept that was introduced earlier with JSX.

Blazor Server vs Blazor WebAssembly

While WebAssembly sounds awesome, it has one major drawback: loading time. The .NET runtime is heavy, and your website will have at least several megabytes overhead of binary files. To mitigate this, Blazor Server was introduced. It allows your code to be executed on the server and rendered on the client. This concept is called Server-Side-Rendering and is used with other frameworks, such as React. This reduces the initial page loading time at the expense of overall responsiveness. This happens because all events have to travel across client and server, adding delay. But using a mix of these two technologies, you can achieve desired results.

Availability

While Blazor Server ships by default with .NET Core since version 3, the WebAssembly version is still in beta stage. You can use it, but it is not recommended for production. WebAssembly version release is scheduled for May of 2020. In the meantime, you can follow its development on Github.