Sunday, November 10, 2019 12:38 PM by Mykhail Galushko

Blazor: new way to build Web UI

New way to build UI with C# & .NET

Blazor is a web framework that lets you build interactive web UIs using C# instead of JavaScript. Blazor apps are composed of reusable web UI components implemented using C#, HTML, and CSS.

There are two ways to develop web applications using Blazor: a client-side, available in preview for ASP.NET Core 3.1 (will be released in May 2020), and server-side hosting model, that was released and now fully available with .NET Core 3.0.

Hosting models

The client-side version is executed directly on the browser UI thread through WebAssembly and all updates to the DOM are done in there. The application is fully functioning after downloaded to the client, and all work is offloaded from the server. All assets are deployed as static files to a web server or service capable of serving static content to clients. However, in terms of performance, not everything is so bright – codebase download size is larger, and applications take longer to load.

alt text

The server-side model, instead, runs within an ASP.NET Core app and keeps a model of the DOM in there. Event handling, UI updated and JavaScript calls are handled over a SignalR connection. The Blazer Server application loads way faster than a Blazor WebAssembly application because if significantly smaller download size. As application runs on the server – it`s code base, including the app's component code, isn't served to clients. It seems that client-side and server-side hosting models cover each other's disadvantages.

alt text

Components

One of the important features is component-based UI. Components in Blazor are any elements of UI, such as pages or it’s parts, data entry forms, controls, etc. Created for the component class defines UI rendering logic and handles user events. Components can be nested and reused across the application, or even multiple applications, because they can be shared and distributed as Razor class libraries or NuGet packages. Development of the component-based application is accelerated by the reuse of code, which also affects the code maintain time. Unlike Razor Pages and MVC, which are built around a request/response model, Blazor components are used specifically for client-side UI logic and composition.

JS Intertop

Blazor is a framework that lets you build interactive web UIs using C# instead of JavaScript, such code is compiled into .NET Intermediate Language, meaning it has the potential to be faster than the equivalent JavaScript code. Blazor can't manipulate DOM elements directly, but instead provides us the JSRuntime class to interact with JavaScript.

PROS

Client-Side: you no longer have to learn JavaScript. Everything in the browser can be done in C#; fully functioning application after shipping to the client; doesn’t require to pass data to the server with every single action; all work is offloaded from the server.

Server-Side: the Server-side application can be debugged with exactly the same capabilities as any other ASP.NET application; fully compatible with all .NET libraries; loads way faster than a Blazor WebAssembly application because of smaller download size.

CONS

Client-Side: executing the application in browser requires the whole codebase to be shipped; client's browser must be compatible with WebAssembly. debugging options are very limited.

Server-Side: requires server to run; all logic is executed on server, so requires additional server resources; does require to pass data to the server with every single action, these actions will be delayed by the network latency; an internet connection is required.

Our experience

We are using server-side Blazor now in several projects to build dashboards and management areas. So far we are satisfied with the results and performance (to build UI and to run it). We really want to add client-side Blazor as soon as it is released in May 2020.

Btw, Telerik and Syncfusion controls are available already!

Links

other posts

Monday, May 20, 2019 9:31 PM

Flutter: Yes or No?

Flutter is a new way to build apps for mobile, desktop and web platforms. A first look from Xamarin developer.

Thursday, May 2, 2019 6:23 PM

DevRain joins the Microsoft AI Inner Circle Partner Program

The AI Inner Circle Partner program is designed for partners who provide custom services or enhanced AI product solutions utilizing Microsoft AI technologies.

Thursday, March 14, 2019 5:26 PM

DevRain Rises in Clutch’s Ranks of Leading Web Developers in Ukraine

We’re excited to join Clutch’s listing of the best web developers in Ukraine because we’ve already been able to improve our online visibility and our brand awareness.