Overview of Blazor

In this article, you will come to know about Microsoft Blazor technology. Stay tuned with me in the coming days you will learn step by step series of how to work with Blazor to develop the application.

You will get the answers to the following questions to get started on Blazor.

What is Blazor?
- SPA – Single Page Application
- PWA – Progressive Web Application
Features of Blazor
What is Blazor Server?
What is Blazor WebAssembly?
How many types of Project Templates are available in Visual Studio 2022 Community Edition?

What is Blazor?

Blazor is the newest free .NET open-source frontend Web development Framework. It supports server-side and client-side. By using Blazor you can develop SPA (Single Page Application) and PWA (Progressive Web Application) that utilize the power of modern browser APIs to behave like a desktop / mobile app. Instead of using Javascript, Blazor uses .NET runtime and developers can develop interactive Web Apps with C# and HTML, CSS. Use can also use Javascript there is no restriction.

By using Blazor you can develop the following types of apps:

Blazor Server
Blazor WebAssembly.
Blazor Hybrid and .NET MAUI

Single Page Application (SPA): A type of web application that operates within a single web document with a very high user experience. In traditional web application development pattern, there are multi-page/multi-view but in SPA load only one initial web page and then dynamically update the content, the page does not require a complete reload. SPA is fully component-based development terminology.
Progressive Web Application (PWA): It is a mixture of Web and App technologies. PWA gives the feel of platform specific kind of app, just like a native app.

Progressive Web Application - PWA

Features of Blazor

Using Single Language C#
Rich Interactive UIs.
Components based development.
Easy migration who knows the MVC and Razor Syntax.
Supported on all technologies like (Windows/Android/iOS, MacOS).
Build a full stack web app.
Blazor Server

What is Blazor Server?

One of the hosting model types of Blazor, it renders the UI on the server result sent to Client. SignalR is used for prompt communication between client and server. Blazor server can use all the .NET core API because it executes within ASP.NET Core application.

What is Blazor WebAssembly?

It’s a single page app (SPA) framework for building interactive client-side web apps with .NET. It's responsible for executing C# code on the client side.

General Terms/Definition of WebAssembly: WebAssembly abbreviation is WASM. WebAssembly is a binary code format and a corresponding text format that executable code in a client-side web browser.

Project Templates

In Visual Studio 2022 Community Edition there are five different types of templates.

Blazor Server App
Blazor Server App (Empty)
Blazor WebAssembly App
Blazor WebAssembly App (Empty)
.NET MAUI Blazor App

Blazor Projects Tempalte

Blazor Server App: A template for creating a Blazor server app that runs on the server side inside an ASP.NET core app and handles user interactions over a SignalR connection. This template can be used for web apps with rich dynamic user interface (UIs). This template comes with basic and example code.
Blazor Server App (Empty): An empty project template for creating a Blazor server app. The rest of the working pattern is similar as Blazor Server App template.
Blazor WebAssembly App: A project template for creating a Blazor app that runs on WebAssembly and is optionally hosted by an ASP.NET core app. This Template can be used for web apps with rich dynamic user interfaces (UIs)
Blazor WebAssembly App (Empty): An empty project template for creating a Blazor WebAssembly app. Rest of working pattern as similar as Blazor WebAssembly App template.

Blazor Server execute on server with the power of Asp.Net core API and uses SingalR to update the client whereas Blazor WebAssembly execute in the browser with the power of SPA and PWA.

In short, Blazor is one kind of opportunity to all .NET developers to develop SPA, PWA type of applications. In the next article, you will learn more about the project structures of Blazor Server, and Blazor WebAssembly.