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.
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.
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.
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
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:
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 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.
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.
- 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