In 2018, the Microsoft ASP.NET team began developing Blazor, a client-side UI framework. Developers are excited about it because it can write rich web UI experience using C#, Razor, and HTML, instead of Javascript and runs via WebAssembly in a web browser. The official preview of Blazor was published in April 2019, and the initial production was released in May 2020.

Why Was Blazor Invented?

To understand why the ASP.NET team invented Blazor, we need to know the problems that it will address. Many client-side UI frameworks such as React, Angular, and Vue simplify web development and have grown in popularity. However, there can be problems when bridging two different platforms and technologies, like .NET and JavaScript.

Developers need to have expertise in many frameworks and tools. Other challenges include not sharing code and logic between clients and servers, duplication and engineering overhead, and keeping up with the changing JavaScript ecosystem.

In 2015, vendors in a W3C Community Group created WebAssembly. It is a byte code that can run in modern web browsers and provides new features and significant gains in performance. It is designed as a compilation target for source languages like C, C++.

Benefits of Using WebAssembly

• Encoded in an efficient binary format.
• Runs at native speed by using standard hardware capabilities.
• The textual format makes it easy for debugging and testing.
• It is safe due to the execution environment that is sandboxed and describes a memory safe.
• As an open web platform, its module can call into and out of Javascript context.
• Can access browser functionality through the same Web API accessible from Javascript.

Currently, WebAssembly is supported by Chrome, Edge, Firefox, WebKit, Wasmtime, Wasmer, and Node.js. Also, it’s become an alternative to JavaScript in delivering Progressive Web Apps (PWA). While still in development, several famous brands have already switched to PWA for their applications and are experiencing its enormous potential.

In .NET code, WebAssembly code generation uses Mono through a command-line tool called mono-wasm. Blazor sends .NET codes to Mono and enables WebAssembly code to allow .NET code to run in a browser.

Millions of .NET developers are excited about Blazor because it is based on C#, Razor, and other Microsoft technology. Also, it is supported by Visual Studio and Visual Studio Code.

Architecture

Blazor handles user interaction as a UI event and not in the context of an HTTP request. It also provides ongoing UI updates.

Blazor web application consists of one or more root components that are rendered on the HTML page. Each component manages its state and specifies its rendering logic. To update the components, each triggers the event based on the specific user interaction.

During component rendering, Blazor keeps track of the changes in the output. It does not render directly to Document Object Model (DOM). The changes are rendered into an in-memory representation of DOM called RenderTree, allowing Blazor to calculate the UI diff between the new and previous state. The UI diff is then applied efficiently to the DOM.

Hosting Models

Blazor is primarily a client-side web framework built to run in a browser within a single process. However, that approach could not accommodate the ability to run a web app within multiple functions in a browser or a separate process when writing a desktop application with Electron. In Blazor Server version 0.5.0, apps have two hosting models.

Blazor WebAssembly Apps

Blazor WebAssembly apps runs purely on the client-side and does not require .NET in the server at all. However, to maximize the benefits of using Blazor, you can host Blazor WebAssembly apps with ASP.NET Core hosting. It allows the user a full-stack experience by building your app with one consistent language, frameworks, and tools with .NET web development. And, by using .NET, you can easily share code with both clients and servers.

Like Angular and React, using this hosting model, Blazor will work similarly to JavaScript frameworks. The .NET runtime and required dependencies will be downloaded along with the app. Once downloaded, the app will load, followed by the .NET runtime, and pointed at the app assembly. Blazor calculates the UI update based on the components and applies it to the DOM.

Benefits of Using Blazor WebAssembly

• Dependency is not required from the .NET server-side.
• Client resources and capabilities are fully utilized.
• Work is moved from the server to the client.
• It’s possible to have serverless deployment scenarios.

Blazor WebAssembly supports delivering an application as PWA as it is based on WebAssembly.

Blazor Server Apps

The app runs on the server in this hosting model instead of from a client’s browser. The rendering process is decoupled. This enables UI events to be sent from the browser. Then the UI diff is sent from the server over a real-time connection. Thus, RenderTree is processed on the server, as explained in the Architecture section.

Benefits of Using Blazor

1. Full-stack web apps can be developed on top of .NET frameworks, so there’s no need to learn JavaScript.
2. Can use existing .NET libraries.
3. Shared logic across servers and clients.
4. Improved .NET performance, reliability, and security.
5. Increased productivity with Cross-platform Visual Studio.

Overall, Blazor provides future Web UI frameworks for .NET developers, and other developers need to learn only one set of languages and frameworks.