What is Blazor and why should we use Blazor?

Blazor, blazor c#, microsoft blazor, c# blazor, what is blazor, blazor Microsoft, Microsoft, c#, c sharp, net, net framework, dot net framework, blazor ui, dotnet blazor, single page application framework, single page, single page application, single page application example, blazor ui framework, blazor sample application

What is Blazor and why should we use Blazor?

Blazor is a single-page app framework for building interactive client-side Web apps with .NET. Blazor uses open web standards without plugins or code transpilation. Blazor works in all modern web browsers, including mobile browsers.

Blazor is a hot framework from Microsoft that makes it possible to run .NET code directly in the browser on top of WebAssembly. And it is no longer an experimental project it used to be. It has officially made its way into .NET Core 3.

Microsoft introduced Blazor to provide the .net developers a robust frontend and backend solution. This web UI framework helps bring the power of .net to the client-side.

How Blazor works

Blazor runs on Mono, an open-source version of .net framework. Please check the official website for more details about Microsoft sponsored Mono Kindly visit. It runs via WebAssembly in 2 modes – interpreted and AOT modes. In the interpreted mode, Mono runtime gets compiled into WebAssembly which browser can then load and execute. Mono runtime will then load application dlls and execute. Whereas in ahead of time or AOT mode, the application gets compiled into WebAssembly at build time which can then be executed as normal WebAssembly.

The Hosting Models

Blazor provides you with two ways to run your Web client application: Blazor Server and Blazor WebAssembly. These are called hosting models.

Blazor Server

The Blazor Server hosting model runs your application on the server, within an ASP.NET Core application. The UI is sent to the browser, but UI updates and event handling are performed on the server-side. This is similar to traditional Web applications, but the communication between the client-side and the server-side happens over a SignalR connection.

The Blazor Server hosting model provides a few benefits, such as a smaller download size of the client app and the compatibility with not recent browsers.

Blazor WebAssembly   

The Blazor WebAssembly hosting model lets your application run entirely on the user’s browser. The full code of the application, including its dependencies and the .NET runtime, is compiled into WebAssembly, downloaded by the user’s browser and locally executed.

The benefits provided by the Blazor WebAssembly hosting model are similar to those provided by Single Page Applications. After the download, the application is independent of the server, apart from the needed interactions. Also, you don’t need an ASP.NET Core Web server to host your application. You can use any Web server, since the result of the WebAssembly compilation is just a set of static files.

For more details

Components

Blazor apps are based on components. A component in Blazor is an element of UI, such as a page, dialog, or data entry form.

Components are .NET classes built into .NET assemblies that:

  • Define flexible UI rendering logic.
  • Handle user events.
  • Can be nested and reused.
  • Can be shared and distributed as Razor class libraries or NuGet packages.

 The component class is usually written in the form of a Razor markup page with a .razor file extension. Components in Blazor are formally referred to as Razor components. Razor is syntax for combining HTML markup with C# code designed for developer productivity.

Razor allows you to switch between HTML markup and C# in the same file with IntelliSense support. Razor Pages and MVC also use Razor. Unlike Razor Pages and MVC, which are built around a request/response model, components are used specifically for client-side UI logic and composition.

Benefits of Using Blazor

  • We do not need to create separate model classes for client and server. Blazor allows us to reuse the same model class by sharing it with both client and server.
  • We can use existing .NET APIs and tools to create rich web applications.
  • It allows us to use the modern and feature-rich language of C#, which makes development easier.
  • Blazor is supported on both Visual Studio 2017 and Visual Studio Code. This provides a great .NET development experience across multiple platforms, including Linux, Windows, and Mac.
  • It is an open-source framework with great community support.

Interesting features of Blazor

Routing

Blazor offers a client-side router that includes limited features. Routing is an important aspect of web applications. It ensures that the client request addresses the right piece of code which is written to handle a certain request.

Forms and Validation

DataAnnotations form validation is supported by client-side Blazor. It is simple and intuitive and shares great flexibility. The form validation is implemented mainly on the namespace “Microsoft.AspNetCore.Components.Forms”. The main class includes:

  • Components.Forms.EditContext
  • Components.Forms.EditForm
  • Components.Forms.ValidationMessageStore

Layouts

The Layout is another component that can be defined in a Razor template or C# code and can apply data binding, dependency injection, and more.

Dependency Injections

Dependency Injection is a way to achieve Inversion of Control (IoC) between classes and their dependencies. In simple words, it is a technique used by experts to access services configured in a central location.

Server-side Rendering

Blazor framework is a client-side web framework and its latest version 0.5.0 offers flexibility to run Blazor in a separate process from the rendering process.

JavaScript Interop

It is a fact that Blazor is bringing a revolutionary change in web technology; however, it still needs JavaScript to apply web features that cannot be achieved by Blazor alone. For this, Blazor experts have introduced JavaScript Interop support that allows developers to use JavaScript functions from C# and vice versa.

Blazor Templates

  • Let’s take a look at some of what the Blazor templates have to offer.
  • .NET Core 2.1 SDK (2.1.500 or later).
  • Visual Studio 2017 (15.9 or later) with the ASP.NET and web development workload selected.
  • The latest Blazor Language Services extension from the Visual Studio Marketplace.
  • The Blazor templates on the command-line:

dotnet new -i Microsoft.AspNetCore.Blazor.Templates

Leave a Reply

Your email address will not be published. Required fields are marked *