CHAPTER 5

Blazor

Blazor, the new kid on the block in the web frontend world since 2018. It understandably gets compared to the likes of Angular, React, and Vue all the time, but it is a whole other beast. For starters, Blazor is not JavaScript based; it is .NET based.

Blazor, in its pure web form, has two flavors. There is Blazor Server and Blazor WebAssembly. No matter what version you prefer, the development experience is the same; you use C# and HTML to build your frontend application. But, haven’t we tried this before? Wasn’t there something called Silverlight that also let us build frontend web applications with C#? There sure was, but Silverlight was based on a plugin system that was Windows only; it could never survive in this day and age where so much of what we do on the Internet happens on mobile devices or on non-Windows devices. Blazor manages to bring us .NET to the web frontend using only open web standards. No plugins are required; Blazor applications run in the same secure sandbox as JavaScript-­ based frameworks but with added flexibility, depending on your choice of Blazor flavor.

Blazor WebAssembly

Blazor WebAssembly is the version of Blazor that comes the closest to JavaScript frameworks like Angular and React in that the code is executed in the user’s browser instead of on a server. This is however not done by transpiling C# code into JavaScript in a TypeScript kind of way; instead, Blazor makes use of WebAssembly, an open web standard that defines a binary code format for running applications in the browser sandbox. In other words, WebAssembly is a platform that can run applications. WebAssembly, or Wasm, became a W3C recommendation in December 2019. One of the main objectives of Wasm was getting better, even near-native, performance out of web applications. While JavaScript is definitely a powerful language, it still lacks the

performance, features, and maturity from the more enterprise-ready managed languages like C# and Java.

125

© Nico Vermeir 2022

N. Vermeir, Introducing .NET 6, https://doi.org/10.1007/978-1-4842-7319-7_5

Chapter 5 Blazor

After Wasm was officially a supported standard in the most common browsers, someone at Microsoft decided to see if they could get .NET to run on that new platform. After a while, a proof of concept was ready and demoed using a stripped down version of Mono. This proof of concept turned into a development team; the development team turned the demo into a product.

Blazor Wasm is evolving fast, but it is also limited by WebAssembly itself in some ways. The current version of Wasm doesn’t allow direct manipulation of the DOM and has no multithreading. Both limitations are being addressed in future versions of WebAssembly.

Creating a Blazor Wasm Project

.NET 6 comes with default templates for Blazor Wasm applications. Figure 5-1 shows the second step in the wizard where we can provide additional information.

Figure 5-1.  Blazor Wasm template wizard

The template can be configured in multiple ways. First there are some built-in authentication types like single user accounts or the Microsoft Identity Platform. Choosing one of these options will adjust the template with boilerplate code that enables either local users or users to log in using their Microsoft account. More information on the built-in security can be found at https://docs.microsoft.com/en-us/aspnet/ core/blazor/security/?view=aspnetcore-6.0. Configure for HTTPS is checked

by default and sets the configuration so that the application only responds to HTTPS requests.

126

Chapter 5 Blazor

The second option allows you to host your application in an ASP.NET Core project. By default, a Blazor Wasm project can be a static hosted web application; by adding a server-side component, we still maintain the exact same Blazor client project, but we get extra server-side capabilities. Since Blazor Wasm cannot connect directly to a database, we usually need an API in some form to feed data to the app; in .NET, this is usually an ASP.NET WebAPI. By making your Blazor app ASP.NET Core hosted, you automatically get your WebAPI and Wasm application in one application. Project-wise you will get three projects, the Blazor Wasm client project, the ASP.NET Core server project, and

a shared project that can share classes between both. Only the Server project needs to be deployed. Since that project has a reference to the Blazor client project, it will

automatically include it in the artifacts that get deployed onto the web server. Figure 5-2 shows a diagram to illustrate the relation between client, server, and shared.

Figure 5-2.  Blazor client/server architecture

Blazor Progressive Web Apps

The final option in the project wizard is Progressive Web Application. A Progressive Web Application, or PWA, is a web application that can install itself like a native application. Meaning that it will get an icon and when launched will not show any browser controls anymore, but it will still be “just” a web application. By checking the option in the project wizard, the template will include a manifest.json file. This file enables browsers to install web applications as a PWA. Listing 5-1 shows the default manifest.json included with a new created project. You will find the manifest.json in the Blazor client project under the wwwroot folder.

127

Chapter 5 Blazor

Listing 5-1.  Default manifest file for a Blazor Wasm app

{

"name": "BlazorWasmDemo", "short_name": "BlazorWasmDemo", "start_url": "./",

"display": "standalone", "background_color": "#ffffff", "theme_color": "#03173d", "prefer_related_applications": false, "icons": [

{

"src": "icon-512.png", "type": "image/png", "sizes": "512x512"

},

{

"src": "icon-192.png", "type": "image/png", "sizes": "192x192"

}

]

}

As you can tell, it consists of meta information that the operation system needs to be able to make it look like the web application is installed on the OS. If we launch this application in a browser that supports PWA installation, you will see an icon lighting up allowing us to install the PWA as an app. Figure 5-3 shows the browser option in Microsoft Edge once it detects a manifest.json file. The exact look might be different depending on your browser and browser version.

128