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.
What is Blazor?
- A component model for building composable user-interface
- Forms support and validation
- Two-way data binding
- Dependency injection
- Full .NET debugging both in browsers and in the IDE
- Rich IntelliSense and tooling
- and more…
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.
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:
- 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)
- 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
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:
- The application can be run in an offline state
- The application can continue working even if the server is not up and running
- The same code can be applied on the client-side and the server-side
- The application takes longer to load during the initial download
- All code is persisted on the client-side
- Browser Web Assembly support is required
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:
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!