TL;DR: Blazor empowers web development with C# and HTML. Explore 7 features that unlock its potential: from real-time updates with SignalR to blazing-fast performance with hot reload and lazy loading. Dive in and see how Blazor simplifies your development process.
Blazor is one of the latest web development frameworks that enables developers to build web applications with C# and HTML. It has been gaining momentum drastically since its release in 2018 with its high efficiency and productive programming model.
This article will explore seven of the most valuable features you must know when working with Blazor.
What is Blazor?
Blazor is a fast, reliable, and highly productive open-source web development framework by Microsoft. It offers two hosting models, Blazor WebAssembly and Blazor Server, to support both client-side and server-side applications.
As Blazor works with C# and HTML instead of JavaScript, it has become a direct competitor of JavaScript single-page applications (SPA).
With that brief introduction, let’s take a look at seven of the most prominent features of Blazor.
1. Zero restrictions with HTML and CSS
Even though Blazor uses Razor templates to create UI components, the final result is rendered in standard HTML and CSS in the browser. Therefore, you can use any CSS features and CSS libraries for styling and responsive designs, and any standard HTML attributes (like class and id) in Blazor without a second thought.
Apart from that, Blazor supports pre-processors like SASS. It also supports built-in Form and Input components to implement an excellent level of abstraction.
One of the significant features related to CSS in Blazor is CSS isolation.
CSS isolation
Blazor supports CSS isolation to avoid conflicts among components. CSS isolation is a powerful feature to style each component individually rather than managing a single extensive CSS library.
During the build time, Blazor adds a unique identifier to the HTML attribute and to its corresponding CSS selectors to provide a high level of specificity to styling.
To make this happen, you have to create a file with an identical name to each component you create, but with the .css extension.
For example, if the component is person.razor, the stylesheet should be named person.razor.css. Mind that these two files must stay within the same folder.
2. SignalR as a NuGet package
SignalR is an open-source library that adds real-time web functionality to ASP.NET. Developers typically use SignalR to enable server-side code to send asynchronous notifications to client-side web applications.
Since SignalR is available as a NuGet package, you can easily connect the Blazor application to a SignalR hub and perform operations without using JavaScript libraries.
The NuGet package for SignalR is: Microsoft.AspNetCore.SignalR.Client
How to implement a hub
Create a new class for the hub in your project inside a new Hubs folder.
using Microsoft.AspNetCore.SignalR;
namespace BlazorApp.Server.Hubs
{
public class MyHub : Hub
{
public async Task SendMessage(string user, string message)
{
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
}
}3. Server-side prerendering in Blazor
With Blazor WebAssembly, you can build static applications that run entirely in the browser without a specific back end, hosted on a service like Azure Web Apps, making the process cheaper.
However, the delay between serving the webpages and rendering the data is a significant problem in single-page applications as the initial loading time can be very high. To remedy this, Blazor provides server-side prerendering.
Prerendering makes the information available sooner by displaying the UI before the application is fully downloaded. After that, the WebAssembly app takes over.
Even though the end-user experience here would be seamless, one drawback in this approach is that you can no longer run this application as a static app. You have to run it as a server application instead.
4. Hot reload
It is essential to see the output of changes to the application as soon as possible in web development to identify errors in the recent changes quickly.
With the .NET 6 release, Blazor has hot reload, an amazing new feature that allows developers to see the browser’s output immediately. This feature undoubtedly helps save time and improve overall development efficiency.
How to implement hot reload
First, check whether you have .NET 6 installed using the following command.
dotnet --version |
If you have an older version, you must upgrade to .NET 6 to use the hot reload feature.
Once you confirm you have the correct version with the above command, you can create a new Blazor application. Then, inside the launchSettings.json file, add the following property under the webserver.
"hotReloadProfile" : "blazorwasm",
We are all set, and now we can use this feature by executing the following command from the command line.
dotnet watch -- run |
When hot reload is active, you will be notified via a message stating, “Hot reload is active.”
Each time you make changes to the code and save it, the output will update instantly. This makes the whole development process faster and easier.
5. Virtualization
Virtualization is a technique that limits UI rendering to display only the parts currently visible to the end user without rendering all the items at once.
For example, imagine a list of 100,000 items, and the user sees only 20 items at a time. Rendering them all at the beginning will affect the application’s performance. Virtualization can be used to render only the 20 items in view until the user scrolls down the list.
How to implement virtualization
It is straightforward to implement virtualization with Blazor. We just need to wrap the list in the Virtualize component rather than a loop.
<div style="height:400px; overflow-y:scroll">
<Virtualize Items="@allBooks">
<BookSummary @key="book.BookId" Details="@book.Summary" />
</Virtualize>
</div>Virtualization helps prevent UI lag and improves performance by using the height of the container and the size of the items as measures to calculate the number of items to render.
6. Effective communication with gRPC-Web
gRPC is an RPC (remote procedure call) framework that efficiently connects services in and across data centers, facilitating high-performance communication between endpoints.
Blazor supports this fantastic framework, but browser limitations make it impossible to directly implement a standard gRPC browser client. So, you have to use gRPC-Web to communicate between a browser application and a gRPC server.
How to implement gRPC
Since a Blazor WebAssembly app will contain client, server, and shared projects, installing the following NuGet packages for each of them is necessary:
- Shared project: Google.Protobuf, Grpc.Net.Client, Grpc.Tools
- Server project: Grpc.AspNetCore, Grpc.AspNetCore.Web
- Client project: Grpc.Net.Client.Web
gRPC uses proto files written in protocol buffer language, and it also needs a channel to communicate between the client and the service. So, after installing the packages, you have to add a proto file and service to the shared channel and configure gRPC-Web in the server and the .NET client.
7. Lazy loading
In Blazor WebAssembly, you can use lazy loading to enhance the application’s performance.
Lazy loading is a design pattern that improves load time by loading libraries on demand. It defers loading the requested resource until it is needed and without downloading all the resources during the initial loading, improving the startup speed of the application.
However, this feature is not used in server apps as they do not download assemblies to the client.
How to implement lazy loading
The process is simple. First, you have to predefine the assemblies to be lazy-loaded in the .csproj configuration file of the application.
<ItemGroup> <BlazorWebAssemblyLazyLoad Include="<AssemblyName>.dll" /> </ItemGroup>
The BlazorWebAssemblyLazyLoad type shown in the above code snippet enables the included assembly to be lazy loaded.
To lazy load the assemblies, we need to inject the AssemblyLoader into our App.razor file.
@inject LazyAssemblyLoader AssemblyLoader
App.razor
@inject LazyAssemblyLoader AssemblyLoader
<Router AppAssembly="@typeof(Program).Assembly"
OnNavigateAsync="@OnNavigateAsync">
...
</Router>
@code {
private async Task OnNavigateAsync(NavigationContext args)
{
try
{
if (args.Path == "")
{
var assemblies = await AssemblyLoader.LoadAssembliesAsync(
new\\\[\\\] { {LIST OF ASSEMBLIES} });
}
}
catch (Exception ex)
{
Logger.LogError("Error: {Message}", ex.Message);
}
}
}OnNavigateAsync intercepts the navigation to load the correct assemblies for endpoints when requested based on route information.
Conclusion
This article discussed seven top features in Blazor that make it an outstanding framework for web development. Blazor contains all the contemporary features a web framework should have, including routing, validation and forms, layouts, server-side rendering, and dependency injection.
As Blazor is gradually becoming a sophisticated framework with constant updates to meet emerging requirements, we urge you to try out Blazor before it’s too late.
Syncfusion’s Blazor component suite offers over 80 UI components that work with both server-side and client-side (WebAssembly) hosting models seamlessly. Use them to build marvelous applications!
If you have any questions or comments, you can contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!
