What’s behind the hype about Blazor Framework ? (Introduction)

What is Blazor Framework?

Blazor Framework is a Single Page Application Framework. The name Blazor is derived from the words Browser and Razor (the .NET HTML view generating engine). It is implied that instead of executing Razor views on the server, Blazor can execute these views on the client to present HTML to the browser.

ASP.NET has released Blazor, a new client-side UI framework. Its biggest selling point is the ability to create rich web UI experiences using HTML, CSS, and C# instead of JavaScript–something a lot of developers have been dreaming of for years.

Interactive web UI with C#

Blazor is a part of ASP.NET, the popular web development framework. Its purpose is to extend the .NET developer platform with tools and libraries for building web applications.

Run-on Web Assembly or the server

With Blazor, your client-side C# code can be rendered directly in the browser, using Web Assembly. Because this is real .NET running on Web Assembly, you can reuse code and libraries from the server-side parts of your application. Additionally, Blazor has the capability of running client logic on the server. SignalR – a real-time messaging framework – is used to send client UI events back to the server. Once execution completes, the client is sent the required UI changes.

What Blazor is not

Blazor is different from Silverlight, Microsoft’s previous attempt at hosting in-browser applications. Silverlight required a browser plugin to run on the client, making it incompatible with iOS devices.

There is no plugin necessary for Blazor to run inside a browser. It either runs on the server-side and the browser acts as a dumb terminal, or it runs inside the browser by utilizing WebAssembly.

The benefit of WebAssembly being a standard is that all major browsers support it, which allows Blazor apps to run inside of browsers for Windows, Linux, Mac, Android, and iOS..

Example

The following example shows how to implement a simple counter that can be incremented by clicking a button:

<h1>Blazor code example</h1>
<p>count: @count</p>
<button class="btn btn-primary" @onclick="IncCount">Click to increment</button>
@code {
private int count = 0;
private void IncCount()
{
count++;
}
}

Benefits

• It takes advantage of the full .NET Core runtime.
• Streamlined development cycle.
• Easily downloaded in a small size.
• Clients do not download code from the server.

Drawbacks

• High latency environments do not work well.
• You must be connected to the server at all times, with no offline support.
• An overwhelming amount of resources are being consumed by the server.

What makes Blazor Framework so flexible?

Essentially, Blazor separates how it calculates UI changes (app/component model) from how it applies those changes (renderer). The feature distinguishes Blazor from other UI frameworks that are only capable of creating web-based UIs, such as Angular or ReactJS/React Native. Blazor can create not only web-based UIs but also native mobile UIs using different renderers.
Consequently, components written for web renderers cannot be used with native mobile renderers. However, the programming model is the same. As a result, once developers become familiar with it, they can use any renderer to create UIs.