Sep 7

Written by: Michael Washington
9/7/2019 5:23 AM  RssIcon

image

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

image

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

 

image

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

image

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

 

image

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.

 

image

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

image

A Blazor application is composed of Components.

image

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

 

Data Binding

image

Blazor features One-way data binding

 

image

… and Two-way data binding.

 

image

Components can be nested inside of other Components.

 

image

Components can pass parameters to other Components.

 

image

Components can raise events in other Components.

 

Routing

image

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

 

image

A page can even have multiple routes.

 

Forms And Validation

image

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

image

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

image

To get started with Blazordownload and install .Net Core 3.0 (or higher).

image

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

Tags: Blazor
Categories:

2 comment(s) so far...


Gravatar

Re: What Is Blazor

Hey Michael, great write-up.
Any chance you could redo your Azure AD example now that preview 6 is here?

By BlazorFan on   6/28/2019 4:15 AM
Gravatar

Re: What Is Blazor

@BlazorFan - I recommend using the built-in Authentication wizard in Visual Studio for Azure AD Authentication that came in the last release.

By Michael Washington on   6/28/2019 4:18 AM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 
Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation