Microsoft Blazor is a single page application- SPA to build client-side web applications using .NET. Razor component is the new framework to build interactive UI with .NET and to run Blazor applications on the web browser.
This client-side library operates .NET on WebAssembly to support Single Page Applications created using Razor templates. Single page applications are the interactive web applications that loads and dynamically updates the HTML page.
Blazor is a combo of the web browser and razor, a framework for building SPAs in .NET, which uses the Mono Web Assembly runtime. SPA features like components, data binding and routing helps to build applications in .NET.
WebAssembly: A new client-side technology can compile codes in C, C#, Go, and Rust languages. It can run .NET code run in any application and even inside the browser. The codes are reusable and can port legacy code to new web applications.
Functionalities of Blazor Apps:
- It compiles the C# codes and Razor files into a .NET assembly.
- The client-side web browser downloads the assembly files.
- The WebAssembly will load the downloaded assembly files in the client-side.
- It handles the DOM manipulation and triggers the browser API.
- This is an experimental client-side hosting model for Razor Components.
- It supports C# coding and JavaScript interop service used to call or receive JavaScript functions in the application.
- This framework creates pages and components that support dynamic HTML, data binding and DOM event handling.
- It uses WebAssembly to build the .NET, C# code in a web browser with no additional plug-ins.
- Applications can use the built-in services by injecting them into components.
Benefits of Blazor:
- Build interactive UI with .NET, and C#.
- Share the logic of server-side and client-side apps written in .NET.
- Execute UI as HTML and CSS for browser support including mobile browsers.
- This Single Page Application runs a set of static assets that are hosted at reasonable rates via Azure Storage static websites.
- Handle the UI updates from the server to client-side with SignalR connection.
- Establish automatic reconnection with SignalR and experience uninterrupted client-to-server streaming.
- Blazor WebAssembly supports Microsoft Edge, Mozilla Firefox, Google Chrome, Safari, Android and iOS without any plug-ins.
- Blazor Server supports Microsoft Edge, Mozilla Firefox, Google Chrome, Safari, Android, iOS, and Microsoft Internet Explorer 11+ without plug-ins.
- Leverage the existing .NET ecosystem of .NET libraries.
- High-level runtime lets us execute higher languages such as .NET, and C#.
- Elevate performance of backend services with gRPC.
- Generate powerful client code for Web APIs and Open APIs documents.
- Get authentication support for Web APIs and SPAs with the Identity Server.
- Build long-running services with the New Worker Service template.
- EventCounters lets you check the requests received per second, total requests, current, pending and failed requests.
- Integrate endpoint routing through the framework, typically to route all requests to a Razor page.
- Enable routing of each component with a specified route that appears in a razor file and even custom content if a route is not found.
- Policy-based authorization improves administrating authorization within any application.
- Handler evaluates the requests to decide whether the user has access to the resource or API requested.
- Role-based authorization lets you create user roles and specify single or multiple roles per user.
- Set up Identity for each database with a connection string stored in aspsettings.json.
- Create a razor class, library component with static assets in the project; it is openly available to any app that consumes it.
Components:
A component of a Blazor app is a part of UI just like a page or data entry form. It contains .NET assemblies built from .NET classes. Use components to define a flexible UI description logic or handle events. These components can be nested and the logic can be reused. With input, text component creates a custom component. These razor components use a syntax combined with HTML markup and C# code for improved productivity of developers. Switch between the languages HTML markup and C# within a file.
Blazor Server Apps:
The interactive applications process various requests received from a user as if it is a single request e.g. page clicks, navigation within an application. This is because of the SignalR connection that makes the scooped services behaves identically to Singleton services.
Service Scopes:
.NET Core has three scopes, used to define the lifetime of service.
- Transient
- Scoped
- Singleton
OwningComponentBase:
Blazor allows us to create components that control the lifetime scope of the service. Services requested via Owingcomponentbase are disposed along with the component. The lifetime of the service and the service called via a component. They share a scope that reduces the duration of the active state of service in an application. It is an efficient method to request and access the same service for a different purpose.
Blazor Layouts:
Specify and set a default layout in razor file of the application. The common elements for every component of an app should be coded as a single component. It can include the company logo, menus, copyright messages, privacy policy, etc. Save time, efforts and maintain consistency throughout layouts, which is technically just another component. Define the layout in C# or Razor template. The layouts can be stored in a central location and accessed.
Web Assembly:
Compile a code that web browsers can directly execute without having to analyze the source file. Web Assembly allows the use of alternatives to JavaScript syntax and different build processes. Web Assembly Standard Modules (WASM) relies on JavaScript interop to update the DOM and browser APIs.It cannot access the hardware or operating system features.
View Logic:
By default, templates generate view logic code within the Razor templates using @functions. In the application’s background, it generates a single class that contains C# code for creating the tree of view objects and the C# code to represent the view logic. View and logic are separable by creating a base class.
Conclusion:
The advancements in Blazor let you create a web app project to meet the cross-platform needs, high performance and scalable systems. If your web application needs to run and perform well on multiple platforms, the support is inevitable.
