What Is Blazor And How It Works

Sundaram Subramanian

Introduction

In this article, we will discuss the amazing technology called Blazor. Personally, after working on this amazing technology, development work became so much more productive and interesting. In this article, we will cover the overall features of Blazor such as:

What is Blazor
Why should we use Blazor
Getting started with Blazor
Blazor WebAssemby & Blazor Server

What is Blazor

A Blazor application is a build-out of the things that make up websites, like HTML and CSS and also C# code. Blazor applications are built using Razor Components, which is an ASP.NET capability. These are the files consist of C# and HTML.

Fig.1 Sample Component Code

Let’s take an example, refer to Fig.1, the Counter.razor component has a button that triggers onclick method IncrementCount(). Both the codes reside on the same page and this is what code in Blazor applications look like, but we can also split the code and UI. The components are reusable blocks that you can use in your application and also you can nest your components.

Why should we use Blazor?

Fig.2 Blazor WebAssembly

When a Blazor application is built, it produces assemblies amongst the other things. These DLLs are .NET Standard DLLs that you can use in any other compatible application, which means you can create a Blazor Component Library and reuse it. These DLLs are everything that makes up your application and its dependencies like the system. DLLs.

In the browser, these DLLs can run by .NET runtime. This .NET runtime is a version that is compiled into WebAssembly byte code and has the WebAssembly file extension .wasm. This .NET runtime runs on WebAssembly in the browser. And in the web browser, the WebAssembly runs in the JavaScript runtime sandbox just like regular JavaScript code does. Here it runs the .NET runtime like mono.wasm which runs the DLLs of your Blazor applications.

And because all of this runs in the JavaScript runtime, your application can access the capabilities of the browser like WebSockets, the File API, and the DOM. It uses this to access the DOM to create and update the UI on the screen. Also, it runs in the JavaScript runtime your application code can interact with JavaScript Code. You can call JavaScript from C#, and JavaScript can call your C# Code.

Fig.2 Project Structure of Blazor WebAssembly

Fig.2 shows the basic project structure of a Blazor WebAssembly.

Getting Started with Blazor

There are different ways to create a Blazor application. We can create Blazor application using Visual Studiowhich gives access to a full suite of development tools that Microsoft has to offer. It does not matter which edition of the visual studio are we using.

We can also develop Blazor application using Visual Studio Code, the lighter version of Visual Studio. And finally, we can develop the Blazor application using a command-line interface.

First thing first, we need to download and install the latest version of the SDK and then pick the tool that we like to use. If we choose Visual Studio, then we need to make sure ASP.NET and Web Development Workload are Enabled.

If we choose Visual Studio Code, then Install the latest VS Code C# extension, and if we choose common-line, we can simply create by running dotnet new.

Demo using Visual Studio

Do the steps as follows,

Open Visual Studio
Choose to Create a new project option
Choose Blazor App as the project template
Configure the project by providing the location and meaningful name
Choose either Blazor Server Application or Blazor WebAssembly App
Now you have successfully created the Blazor Project

Fig 3

Fig 4

Fig 5

Fig 6

Blazor WebAssemby and Blazor Server

In the server-side hosting model (Blazor Server-Side), Blazor is executed on the server from within an ASP.NET Core app. UI updates, event handling, and JavaScript calls are handled over a SignalR connection.

In the client-side model (Blazor WebAssembly), the Blazor app, its dependencies, and the .NET runtime are downloaded to the browser, and the app is executed directly on the browser UI thread. All UI updates and event handling happen within the same process.

Conclusion

In this article, we have discussed what Blazor is and how it works. I hope this article will help you to kickstart developing your own Blazor applications. Let's explore more about Blazor in upcoming articles.

Blazor WASMBlazor AppBlazor ApplicationServer-Side BlazorHow to Create Blazor Application

7 Comments

Join the conversation! Your thoughts help the community grow.

Belal El-Thor10mo ago
Nice article sir Sundaram Subramanian
Deepak Tewatia4y ago
Nice article sir Sundaram Subramanian
Supi Mon5y ago
So webassembly and javascript dont run in the same runtime rather they run in the same sandbox unlike what you wrote here ==> "And because all of this runs in the JavaScript runtime, your application can access the capabilities of the browser like WebSockets, the File API, and the DOM."
Supi Mon5y ago
"And in the web browser, the WebAssembly runs in the JavaScript runtime sandbox just like regular JavaScript code does." <== I think you are misunderstanding runtime sandbox and runtime. Javascript code is run by Javascript runtime, and javascript runtime is run within the sandbox created either in the browser or on the server.
Mahesh Chand5y ago
Thank you, Sundaram Subramanian. Nice article. Could you please add another section to this article on when to choose Blazor server vs WebAssembly.
- Sundaram Subramanian5y ago
  Mahesh Chand sure Sir. I will do it soon,
- Mahesh Chand5y ago
  Thank you Sundaram Subramanian. Appreciate it.