Blazor is a Microsoft framework for building interactive web frontends using C# instead of JavaScript. It was published in 2019 as part of .NET Core 3.0. Since then, it has been under constant development. For example, there will be further improvements when .NET 8 is released [1]. The ecosystem of helpful components and libraries has also matured in parallel with Blazor’s features. The framework has now proven its worth and left the initial hype behind. For this reason, the ways in which Blazor could be used in an industrial context should be reviewed and explained in more detail.
C# instead of JavaScript – UI design
@page "/counter"
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
Figure 1: Example of code using Razor syntax for Blazor website
Blazor uses what is known as Razor syntax. This consists of HTML, special Razor markup and C#. As a C# developer, you can quickly find your way around it with basic HTML knowledge. With Blazor, JavaScript normally only plays a background role and is not directly used in most cases. Exceptions to this rule include, for example, enabling special interactions with the browser and accessing JavaScript libraries. However, there is a growing number of wrappers available, especially for popular JavaScript libraries, which are provided by the community.
Blazor hosting models
There are three hosting models for Blazor apps, which determine how a Blazor app works, what features are available and what restrictions apply.
Blazor Server – server-side rendering
In this case, the website is generated dynamically in an ASP.NET Core app on the server and the HTML is sent to the browser. Rendering on the server provides the entire functionality of the backend. An active SignalR connection is required for each interaction between the browser and server. The latency of this network connection has a direct impact on the UI response time. In addition, the performance of the Blazor application is limited by the performance of the server, which makes having many simultaneous client connections costly, for example.
This hosting model is suitable if…
- applications serve a manageable number of users;
- server performance, network latency and offline scenarios do not play a role;
- there are special requirements that can only be implemented in the backend. Example: Authentication of users based on Windows login
Blazor WebAssembly – client-side rendering
The application can be downloaded from any web server to the browser together with the .NET runtime. This runtime is executed in the browser’s WebAssembly environment, rendering the website locally. After downloading the entire app from the server, a Blazor WebAssembly app runs completely in the browser. However, the app’s initial loading time is a few seconds as – depending on the app – a lot of data must be transferred (10 MB is required for Microsoft’s template app alone). Blazor WebAssembly works in the same way as common single-page application (SPA) frameworks, such as React or Angular.
Since the app runs completely in the browser, there is no server-side dependency. However, the app is restricted to the functionalities of the browser and the WebAssembly runtime, which limits interactions with local resources on the client (file system, etc.) and several .NET APIs, for example.
This hosting model is suitable if…
- no firewalls are preventing the app from being downloaded to the browser (DLLs!)1;
- download size and start time are irrelevant or accepted by the user;
- a rich, interactive single-page application is required;
- all browser functionalities can be leveraged.
Blazor Hybrid
The Blazor app runs locally on the desktop (in .NET MAUI, WPF or Windows Forms) and is rendered to an embedded WebView control. The term “Hybrid” refers to the combination of web technology (Blazor) and desktop or mobile frameworks. Since the app runs locally, it also has full access to the client’s functionalities.
This hosting model is suitable if…
- Blazor components are to be reused on the desktop;
- desktop applications are to be gradually transitioned to web technology.
.NET 8, which will be released in the autumn of 2023, will introduce another hosting model that strikes a balance between Blazor Server and Blazor WebAssembly. The aim is to combine the performance benefits of rendering static content on the web server with the interactivity of single-page applications while reducing the app’s loading time [2].
How can Blazor be used in industry?
When evaluating practical use cases, we must consider the advantages of Blazor compared to other web UI frameworks, such as Angular or React.
- Blazor belongs to the ASP.NET Core universe and can therefore integrate and reuse existing .NET libraries.
- Since Blazor was developed for C# developers, it is designed for teams that specialised in .NET backend development.
- Blazor is well suited to projects with focus on the backend, implementing complex business logic and an extensive database. Example: Forms-over-data (FOD) applications with extensive forms but otherwise low UI functionality
Use case 1: Background application with local management interface
A .NET application that runs on a computer as a service is to be assigned a simple, locally available UI that can be used to configure and administer the software.
In this case, Blazor with the Blazor Server hosting model is recommended as components of the .NET background application can be easily accessed in the Blazor application. Abstraction layers such as a REST API are not necessary. Network issues caused by firewalls, high latency or lack of availability are excluded. There’s no huge leap required to switch to Blazor, meaning that backend developers with limited knowledge of web technologies can also implement the simple web UI.
Use case 2: Information system
A system provides information for plant/system maintenance. The UI needs to be available at several fixed stations and remotely on laptops or tablets in order to be able to access the data on site at the machine as well.
Blazor WebAssembly is recommended in this case. To enable mobile access to a system, an offline scenario where the data can be read and processed locally – even without a connection – must be supported. The data is synchronised with the backend at a later date. A progressive web app (PWA) that can be installed locally can also be built using Blazor WebAssembly. The app start-up time is increased, but this is accepted in most cases in the industrial environment.
In this scenario, it is essential to check the network connection between the web server and the end devices at the start. Are there any firewalls that prevent the application from downloading?
Use case 3: Control computer
Control software requires a UI to operate a machine or process. The backend of the control software is extensive, while the scope of the UI is much smaller depending on the application.
In this scenario, there is no clear recommendation. Factors to consider in the decision-making process include:
- access to local resources;
- local or distributed access to the UI;
- scope of the UI.
If it is imperative for the UI to access the control software’s local resources, the only real option is Blazor Server. Using this hosting model, these resources can be integrated quickly and easily.
If the UI does not require direct access to local resources, the type of UI access can be a deciding factor. If the UI is primarily accessed locally from the control computer, Blazor Server usually meets the requirements. If access to the UI is distributed, for example across several operator stations of a control room, then Blazor WebAssembly is the best option. In this case, network latency and the control computer’s capacity do not affect the UI response time.
If Blazor WebAssembly is chosen, the network must be checked like in use case 2.
The more extensive the functions of the UI in a distributed scenario, the more important it is to consider established frameworks, such as Angular, React, etc., in addition to Blazor WebAssembly. For extensive UIs, a separate team member dedicated solely to this task will be promptly needed. In such cases, the choice of technology also depends on the skills of the available employees.
Summary
In most cases, Blazor fulfils its main product promise and no JavaScript expertise is required. This means that the UI can also be created by teams with .NET skills that have limited web development experience.
How Blazor is hosted – the chosen hosting model – depends on the use case. Three industrial use cases were presented as examples.
1 Microsoft has acknowledged users’ problems and is planning on using a different format to DLL for assembly files in .NET 8. Details and status: https://github.com/dotnet/runtime/issues/80807
Sources
[1] Microsoft, „.NET Blog,“ 13 Juni 2023. [Online]. Available: https://devblogs.microsoft.com/dotnet/asp-net-core-updates-in-dotnet-8-preview-5/. [Zugriff am 21 Juni 2023].
[2] Microsoft, „GitHub,“ 14 Februar 2023. [Online]. Available: https://github.com/dotnet/aspnetcore/issues/46636. [Zugriff am 21 Juni 2023].
This post was written by:
