Blazor - What and Why

Blazor is a new web framework that changes what is possible when building web apps with .NET. Blazor is a clientside web UI framework based on C# instead of JavaScript and with Blazor, you can write your client-side logic and UI components all in C#. The resulting application can be compiled into .NET assemblies and then run directly in the browser using a new open web standard called WebAssembly. Alternatively, Blazor can run your .NET UI components on the server and handle all UI interactions fluidly over a real-time connection with the browser. When run on the server, Blazor enables full-stack web development with .NET. Blazor builds on the foundations of .NET Core to providea modern and high performance web development experience.

Why

Blazor promises to:

Create rich interactive UIs using C# instead of JavaScript.
Share server-side and client-side app logic written in .NET.
Render the UI as HTML and CSS for wide browser support, including mobile browsers.

As a .Net Developer, you would probably prefer to write C# all the time instead of doing a bunch of context-switching between JavaScript and C#. Blazor gives us this opportunity. On top of that, you will be able to share code between backend and frontend given one of the hosting models

What

Blazor apps can be hosted in one of the following ways:

Client-side in the browser on WebAssembly.
Server-side in an ASP.NET Core app.

Learn to build a Blazor Server Application on top of a RESTful API for a book store’s database using ASP.NET Core 3.1 API, Entity Framework, the Repository Pattern End to End ASP.NET Core 3.1 API and Blazor Development

Client-side

Blazor WebAssembly apps execute directly in the browser on a WebAssembly-based .NET runtime. In this mode, Blazor apps function similarly to front-end JavaScript frameworks like Angular or React.

PROs

No server-side dependency, it works stand alone in the browser like a static site
Client takes on more responsibility and does all the work

CONs

Restricted by the capabilities and features of the browser
Client needs to support WebAssembly and capable hardware and software that supports WebAssembly
The size of payload of the app is bigger and thereby it takes longer to load the app

Server-side

In this hosting model approach, we have two different processes: one that tends to components and one that tends to UI updates. In this model, the components are run on the Server and not client-side like the former hosting model. So for changes to reach the Server and thereby the components, there needs to be a real-time connection. This is accomplished through WebSockets and SignalR. It is pretty much built-in and no additional configuration is required.

PROs

This model is much smaller and the app loads faster
This runs on the server and can take full advantage of existing tooling and debugging
This model can use full .Net, can use any .Net Core compatible .Net APIs

CONs

Potential latency since every interaction is a network call
No Offline mode given the dependency on the server

Learn how to build a RESTful API and a Blazor client side application using ASP.NET Core 3.1 API, Entity Framework, the Repository Pattern in End to End ASP.NET Core 3.1 API and Blazor Development

JWT (Json Web Token) Authentication in ASP.NET Core image