Blazor | What It Is And Why Should We Use It

Blazor is used to create rich and interactive UIs with C#. Blazor applications are built using Razor components, which is an ASP.NET capability. These are files that contain C# and HTML.

Before we dive into Blazor, let's talk about web development in general.

Usually, you create a web application that runs on a server with code like Java , .NET, Node.js, or any other type of code.

Later Client Side framework is introduced and you start using frameworks like Angular or Vue or React to create your UI. These frameworks are great at developing fast and interactive UIs, and they all run on JavaScript, the scripting language of the web.

Wouldn't it be great if we could run C# in a browser. It works by having a .NET runtime that is compiled into WebAssembly bytecode. This .NET runtime runs in the browser and can run whatever .NET assemblies, so DLLs, that you give it, including C# code that we create in a Blazor application.

Why should we use Blazor?

Well, because if we use Blazor, we can run our app in any browser, including mobile ones, because WebAssembly is part of all major browsers. We are no longer dependent on plugins like we were back in the day with Flash and Silverlight. And we use Blazor because it allows us to reuse our C# skills.

C# is a great development langauage & strongly typed which means we can catch the error at compile time instead of runtime. Blazor is just a framework that runs on the .NET runtime, so we can use any library that we want to use, as long as it is compatible with .NET Standard.

This means that we can use our own libraries and also almost all public NuGet packages

There are couple of strong reasons, which indicate why we should use Blazor

WebAssembly is supported by all major browsers
Use C# for interactive web applications
Reuse existing libraries
Performance is near native
Tooling and debugging

You can check and choose the tool as per your convenience. Below are options to get started with Blazor.

Let's discuss what is Blazor Server and Blazor Web Assembly,

Blazor WebAssembly runs on the client in the browser . It downloads everything that it needs to the browser including HTML, CSS, maybe some JavaScript, and possibly images. It also downloads the assemblies that make up the application, and it even downloads the complete .NET runtime that is converted into WebAssembly bytecode. All of this runs completely on WebAssembly, which is a part of all major web browsers, including mobile browsers. This type of Blazor application doesn't need a connection to a server. It just needs to load into the browser, and that's it. A Blazor WebAssembly app consists out of static files, so you don't need a full-fledged server to get this to the browser. You could host the static files on a content delivery network, or CDN, which is relatively cheap and is globally performant. You can also host it on a server in the cloud, in your own data center, or anywhere else.

Advantages

Near-Native Performance, runing your app on webassemble is fast.
App can work completely offline.
No Server Needed, you do not have to maintain the server and keep architecture simple. it require resource processing at client device
No Plugin required, WebAssembly is native part of all major browsers. it takes all static files into browser
Run in all Modern Browsers

Downsides

Restricted to capabiities of browser. It download everything into browser including .NET runtime.
Browser does all the work.
More to download intent to longer load time.
Secret or Key need a connection to API, it need to downlaod at clientside and there is way to encrypt which is not safe.
Required WebAssembly, Some time your app runing to old browser which does not have webassembly and app will not work in that case.

Blazor Server is a server-side Blazor app. App runs inside an ASP.NET website that runs on the .NET runtime. This website then serves the Blazor website and loads Blazor through a WebSocket connection that it uses through SignalR. Using this, UI updates are streamed from the server in real time. This sounds complicated, but you don't have to do anything special to make this work. This all comes out of the box.

Advantages

Less downloading and loads fast .
Complete ASP.NET Framework.
WebAssembly not needed.
Server Side Keys or Secrets are Safe to use.

Downsides

No Offline Support
Need an enviornment or server that run on ASP.NET Core.
Higher Letency and Slower Application

Finally, Lets conclude, when to use what with couple of key consideration

Key Consideration	Blazor Web Assembly	Blazor Server
Near Native Performance required	Yes	No
Connection required to Server Side Resources	No	Yes
You can't rely on the web assembly	No	Yes
Offline Capabilities	Yes	No
When you do not want to run on the ASP.NET Core Server	Yes	No
When you want to create fast , interactive web apps with C#	Yes	Yes

I hope you enjoyed and learned something new in this article.