Microsoft’s Blazor is a framework for building rich interactive applications.

In a non-interactive web application, all interaction from the client (the web browser) requires events (like button clicks) and data to be communicated to the server, and the entire web page has to be reloaded to process the response.

Disadvantage:

• Slower – the page is repainted on each interaction

In a interactive web application, only interaction from the client that requires data from the server needs to be communicated to the server and the entire web page does not need to be reloaded to process the response, only required portions of the web page.

Advantages:

• Faster - the page is not repainted on each interaction
• Until Blazor this required an additional language such as JavaScript or TypeScript (that created JavaScript). 

Note: Blazor runs in two modes (covered below), client-side Blazor and server-side Blazor. Server-side Blazor does interact with the server on each web browser event, however, the entire web page does not need to be reloaded so the speed on the application is usually just as fast as a client-side Blazor application.

Different Modes Of Blazor

Blazor applications can be created in different modes. You can chose the mode when creating a new Blazor project in Visual Studio.

The Blazor WebAssembly App project template creates a Blazor project that runs in WebAssembly, which is an open web standard, and supported in web browsers without plugins.

The Blazor components are executed in this client side runtime. This runtime communicates through a JavaScript interop that communicates with the web browsers Document Object Model (DOM) to update the web page and receive and process events and data.

With Blazor Server App, the Blazor components are executed server side and the runtime communicates with the web page using SignalR that communicates with with a JavaScript interop that communicates with the web browsers Document Object Model (DOM) to update the web page and receive and process events and data.

Blazor Features

Blazor contains a number of features that facilitate rapid construction of modern rich interactive applications.

Components

A Blazor application is composed of Components.

A Component is a chunk of code consisting of User Interface (UI) HTML markup and processing logic.

Data Binding

Blazor features One-way data binding…

… and Two-way data binding.

Components can be nested inside of other Components.

Components can pass parameters to other Components.

Components can raise events in other Components.

Routing

Routing in Blazor is as simple as declaring a @page directive.

A page can even have multiple routes.

Forms And Validation

Blazor also has the features that one would required for a web application such as Forms and Validation.

For example, we can create a class, decorate it with validation attributes, and the validation will be implemented simply by using a EditForm control, and a DataAnnotationsValidator, with a ValidationsSummary to display any errors.

JavaScript Interop

With Blazor, you do not need to write any JavaScript. However, when you do need to interact with JavaScript (for example to make a call in the web browser to pull in page content from another site), you can use the built-in JavaScript interop.

Getting Started With Blazor

If using Visual Studio to develop applications, use the latest Visual Studio 2019 (or higher).