Blazor

Blazor

Blazor

Blazor is a framework that adds client-side interactivity to web applications with .NET. In Blazor, developers use C# codes and Razor syntaxes to create client-side features without the need to use JavaScript at all. This is a big plus point for developers who do not know JavaScript.

Behind the scenes Blazor uses JavaScript to send and receive events between browser to ASP.NET Core. It offers the following main advantages:

  • You write codes in C# instead of JavaScript and Blazor will execute your C# codes on the browser.
  • You can leverage the existing .NET ecosystem of .NET libraries.
  • Blazor embraces the Single Page Application (SPA) architecture which rewrites the same page dynamically over a persistent HTTP connection maintained with the Server.
  • There is no page reload when the Blazor code communicates with the server. Everything is done asynchronously just like AJAX.

Hence, we can call Blazor as the Microsoft product which is a direct competitor of client-side JavaScript frameworks, such as Angular, React, or Vue.js.

How Blazor Works

Blazor maintains a “Persistent” HTTP connection between the Client (i.e. Browser) and the Server using SignalR. When an event, such as a button click, is performed by the client then this information about the event is sent to the server over the SignalR connection.

The server in turn handles the event and sends back the updated HTML (which is based on what the event performed) to the client. The updated HTML is not the entire page HTML but only a small part and hence the response is much faster. The browser, on receiving the response, updates the user interface (UI).

How Blazor Works

How Blazor Works

Blazor hosting models

Blazor has 2 hosting models which are :

  • 1. Blazor Server
  • 2. Blazor WebAssembly

Blazor Server

In Blazor Server hosting model, your Blazor app is executed on the server from within an ASP.NET Core app. Here SignalR establish and maintains a Persistent HTTP connection between the Client (i.e. Browser) and the ASP.NET Core Server. The blazor.server.js script establishes the SignalR connection with the server. In most of the times you will be using the Blazor Server hosting model because in Blazor WebAssembly the .NET runtime and tooling support is less mature.

Blazor Server

Blazor Server

Advantages of Blazor Server
  • Download size is much-much smaller than a Blazor WebAssembly app. So the app loads much faster.
  • The app takes full advantage .NET runtime and APIs.
  • Blazor Server apps work with browsers that don’t support WebAssembly.
  • Blazor is based on Razor Pages so you can use features of C#, Razor Pages and ASP.NET Core which makes is very easy to learn this framework in very short time.
Disadvantages of Blazor Server
  • A persistent HTTP Connection is required all the time. When this connection is lost then Blazor stops working.
  • An ASP.NET Core server is required for Blazor apps to work.
  • Every user interaction involves a network hop.

Blazor WebAssembly

Here the Blazor application runs in the browser on WebAssembly. So, everything the app needs like dependencies, .NET runtime, etc are downloaded to the browser (so the app takes longer to reload). The app’s assets are deployed as static files to a web server for serving static content to clients. Here the Blazor app is deployed without a backend ASP.NET Core app so it’s also called a Standalone Blazor WebAssembly app.

Blazor WebAssembly

Blazor WebAssembly

WebAssembly (abbreviated Wasm) is a new language that can run directly on modern web browsers. It provides a way to run code written in multiple languages like C, C++, C#, Rust, etc on the web at near-native speed. Although WebAssembly is a low-level assembly language but it has a human-readable text format so it allows you to write codes by yourself just like you do in C# or any other high level language. You can check more about WebAssembly Concepts on MSD.
Advantages of Blazor WebAssembly
  • Once the app is downloaded to the browser it becomes fully functionable and so there is no server-side dependency.
  • No requirement of an ASP.NET Core web server to host the app.
  • The app can be server from a CDN just like jQuery or AngularJS.
Disadvantages of Blazor WebAssembly
  • Download size is quite large, a few MB. So app is slow to load.
  • Browser should support WebAssembly. Older browsers do not do this.
  • .NET runtime and tooling support is less mature.

Setting you PC for Blazor Development

You can start creating Blazor app in your PC by following the 2 steps:

1. Download & Install .NET 5 – Click here to download.

2. Download & Install Visual Studio 2019 or Visual Studio Code or Visual Studio for Mac. – Click here to download

Prerequisites for working in Blazor

You can start learning Blazor and should have a basic understanding of C# & HTML. You can get this in just a day’s time.

Hello World Application in Blazor

In your Blazor app create a new Razor Component called “Hello.razor” with the following code as shown below:

Download this Code

hello world code

hello world code

Download this Code

Notice that there are 3 html controls:

  • 1. Input type text control for entering your name.
  • 2. Select control for selecting your city.
  • 3. Button control which on pressing prints the Hello Message.

After running the app, you have to enter your name and select your city and press the button. On clicking the button, you will see a hello message like – Hello Sam from Boston.

See the below short video which shows the working:

Blazor Hello World

Blazor Hello World

Note that all this happens instantly without any page reload. This is the power of Blazor.

Conclusion

This induction to Blazor covers how Blazor works and what are it’s advantages and disadvantages. I also created a small Hello World program in Blazor. In the next tutorials I will cover different areas of Blazor.