{"id":2186,"date":"2023-09-01T09:12:45","date_gmt":"2023-09-01T09:12:45","guid":{"rendered":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/?p=2186"},"modified":"2023-09-01T13:23:31","modified_gmt":"2023-09-01T13:23:31","slug":"webuis-with-blazor","status":"publish","type":"post","link":"https:\/\/blogs.zeiss.com\/digital-innovation\/en\/webuis-with-blazor\/","title":{"rendered":"Web UIs with Blazor and possible use cases in industry"},"content":{"rendered":"\n

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]<\/a>. The ecosystem of helpful components and libraries has also matured in parallel with Blazor\u2019s 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.<\/p>\n\n\n\n

<\/div>\n\n\n\n

C# instead of JavaScript \u2013 UI design<\/h2>\n\n\n\n
@page \"\/counter\"\n\n<PageTitle>Counter<\/PageTitle>\n\n<h1>Counter<\/h1>\n\n<p role=\"status\">Current count: @currentCount<\/p>\n\n<button class=\"btn btn-primary\" @onclick=\"IncrementCount\">Click me<\/button>\n\n@code {\n    private int currentCount = 0;\n\n    private void IncrementCount()\n    {\n        currentCount++;\n    }\n}<\/pre>\n\n\n\n
Figure 1: Example of code using Razor syntax for Blazor website<\/em><\/p>\n\n\n\n

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.<\/p>\n\n\n\n
<\/div>\n\n\n\n
Blazor hosting models<\/h2>\n\n\n\n
There are three hosting models for Blazor apps, which determine how a Blazor app works, what features are available and what restrictions apply.<\/p>\n\n\n\n
<\/div>\n\n\n\n
Blazor Server \u2013 server-side rendering<\/h3>\n\n\n\n
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.<\/p>\n\n\n\n
This hosting model is suitable if… <\/p>\n\n\n\n