In these days of global software innovations, one of the biggest battles between hosting providers is for framework cross-compatibility to web, desktop, and mobile. This benefit supports the rapid development of software solutions to quickly and efficiently resolve a business problem or facilitate organizational growth. That is why the open-source framework Blazor developed by the major player Microsoft and equipped with multiple hosting models is a good choice for your new project. Furthermore, your team only needs to have mastery of the Microsoft .NET development stack to release the full power of Blazor.

If you are passionate about .NET and have already heard about Blazor, then this post will be interesting to you and will enrich your knowledge. If you are not, but want to learn a new approach for building front-end applications without any line of JavaScript, you can give a chance to Blazor. Let’s dive in!

What is Blazor?

Blazor is a framework for building client-side web UI with Microsoft .NET. As a part of the ASP.NET platform developed by Microsoft, it uses C# instead of JavaScript. The name Blazor is a combination of the words Browser + Razor. It is an open-source component-based SPA framework like Angular, React, and Vue. Based on open standards that give us the freedom to not need any plugins, it is also compatible with all modern web and mobile browsers.

• A component model for building composable user-interface
• Forms support and validation
• Routing
• Two-way data binding
• Layouts
• Dependency injection
• Full .NET debugging both in browsers and in the IDE
• Rich IntelliSense and tooling
• and more…

For full details on the key Blazor features, you can access the official documentation provided by Microsoft. Good analysis of Blazor is also made by Chris Sainty on StackOverflow. 

Blazor Hosting Models

So after this brief introduction, let’s focus on the wide range of Blazor hosting models compatible for Web, Desktop, and Mobile.

Web Platforms

Blazor Server

With this approach, the app is executed on the server from within an ASP.NET Core application. All UI changes and updates are calculated on the server and then transported to the client via SignalR connection. Blazor server is production supported. Every user interaction requires another network hop. This approach requires the server to be up and running and client’s connection uninterrupted, otherwise the application will stop working.

Below you can see the start-up template of the Blazor server application.

The pages do not reload after each interaction which is valid for all SPA applications. We can see the “_blazor” WebSocket, which is responsible for the communication between the client and the Server via the SignalR technology. After pressing the “Click me” button, a new binary message is sent to the server and then the updated UI is sent back through the channel. Let’s take a look at the pros and cons of this approach:

Advantages:

• The application loads faster because the download size is smaller than the Blazor WebAssembly
• .NET Core on the server is used to run the application, so we can use all the capabilities of .NET Core applications including all tooling and libraries
• The code is executed on the server and it is not persisted on the client-side
• We can run the Blazor server on all browsers (Blazor WebAssembly has some limits for old browsers)

Disadvantages:

• No offline support
• The application is related to the server and it requires the server to be up and running
• Every user interaction requires network hop
• Heavy resource demand on the server

Blazor WebAssembly

This is the most interesting hosting model. Microsoft already announced that Blazor WebAssembly is officially released and is now production supported. It is a huge step for this model and it can now “stand proudly” next to the other SPA frameworks – Angular, React, Vue.

Blazor WebAssembly approach lets us download and execute the whole code thread with any dependencies directly in the browser. It uses a mono runtime version which is an open-source implementation of Microsoft’s .NET Framework based on the ECMA standards for C# and the CLR. Then mono is compiled to WebAssembly (mono.wasm file) which is responsible for the running and execution of the application’s DLL files. With the announcement of .NET 5, Mono is going to be changed with .NET 5 runtime and libraries that come with many performance optimizations. Furthermore, with .NET 6, we are expecting ahead of time (AoT) compilation, which is supposed to improve the performance further.

Below you can see the initial template when starting Blazor WebAssembly application:

We can see all DLL files downloaded from the browser in the cache storage. Once they are downloaded, the application can continue to work offline. Here are the pros and cons of this approach:

Advantages:

• The application can be run in an offline state
• The application can continue working even if the server is not up and running
• Faster than JavaScript – the downloaded code is precompiled to intermediate language which is executing faster than the equivalent logic written on JavaScript
• The same code can be applied on the client-side and the server-side

Disadvantages:

• The application takes longer to load during the initial download
• All code is persisted on the client-side
• Browser Web Assembly support is required

Desktop Platform

I believe that most of the Blazor usage and features will be related to Web development. However, there are several desktop platforms available and worth taking note of.

Progressive Web Application (PWA)

The Progressive Web Application (PWA) is essentially a Single Page Application that can be started as a desktop application. This can be done through modern browsers and the Blazor WebAssembly approach. As a result, we get a web application with its own desktop icon that works offline and loads instantly in an individual window. It can receive push notifications from the backend and can automatically update in the background. There are many examples of PWA such as AliExpress, Uber, Twitter Lite, etc.

In order to have this feature in our Blazor WebAssembly, we have to enable the checkbox “Progressive Web Application” during the app creation:

Blazor Electron

Electron is a popular framework for building desktop applications using JavaScript, HTML and CSS. It combines the Chromium rendering engine and Node.js runtime. Electron has been an open-source project since 2014, placed in GitHub with many contributors behind it. Blazor can be run along with this technology. This is an ideal case if you already have C# code with HTML based UI and you want to move your web application to Desktop.

WebWindow

I will mention one more technology which gives us the capability to run Blazor on Desktop. WebWindow is an alternative to Electron.  The difference with Electron is that there is no need to bundle it with Node.js or Chromium. The advantage is that this technology requires less space and memory than Electron and works on all operating systems. WebWindow uses different render technologies depending on the OS version:

– for Windows – Chromium-based Edfe via webview2

– for Mac – WKWebView, which is the rendering technology in the Safari browser

– for Linux – WebKitGTK+2

Mobile (IOS and Android)

Mobile Blazor Bindings (Xamarin)

Mobile Blazor Bindings is an approach to build native mobile applications for Android and IOS with Blazor. It is still in an experimental state. A specifics behind this method is that we need to use Xamarin Form UI Controls instead of HTML elements. One of the advantages is that if we currently have an existing web application written in Blazor, we can easily create a cross-platform mobile app using the existing code logic with no additional changes required. Below you can see the example:

To wrap it up!

In conclusion, we can all agree that Blazor has a huge range of hosting models, for all major parts of the development world – Web, Desktop, and Mobile. On top of that, it is open-source, does not require the use of plugins, and has the support of Microsoft!

As with every new technology, we cannot pretend that there is a big community behind it. In my opinion, though, with all of the features that Blazor gives us, the community will grow quickly. With that Blazer will become the preferred UI framework for most of the .NET applications in the future. (or so I hope 😊)

Are you as passionate and excited to test Blazor in your upcoming .NET project as I am? We have openings at the moment which might be just the chance for you to do it. Check them out in here!