Blazor Overview

Blazor is a .NET-based framework for building interactive web applications. There are two flavors of Blazor:

• Blazor WebAssembly: This compiles .NET code into WebAssembly that can be executed directly in a browser.

• Blazor Server: This allows developers to build full-stack web applications where front-end components can interact with the back-end components in real time.

Blazor WebAsembly can be fully combined with .NET MAUI. This is what we'll look at in this chapter.

Introduction to WebAssembly

WebAssembly, which is also abbreviated as WASM, is a protocol that allows us to run compiled code in web browsers. It's a web standard, which means that any evergreen browser can run it. The benefits of using WebAssembly over standard front-end web technologies are as follows:

• It's faster than JavaScript because it uses a low-level language, and it isn't interpreted.

• It can be debugged from a code editor.

• It remains secure by running inside its own sandbox environment.

• It's fully interoperable with other front-end web technologies, including CSS, HTML, and JavaScript.

Blazor WebAsembly is a technology that enables .NET developers to write .NET code that can then be compiled into WebAssembly. Therefore, developers who are already familiar with .NET and its languages, such as C#, will be able to build WebAssembly modules without having to learn any new technology. The framework will do all the necessary conversions and compilation.

Benefits of using WebAssembly inside a native app

Although WebAssembly was primarily designed to work in browsers, various frameworks for building native applications are adopting the technology too. .NET MAUI is no exception. Even though each framework for building native applications has its own way of building user interfaces, there are some remarkable benefits of using Blazor WebAssembly. These benefits are as follows:

• Using standard technologies for building a web frontend allows the same codebase to be reused in both native applications and web applications.

• Web developers can have a gentler learning curve if they want to requalify as native application developers since they'll already know the web front-end technologies that WebAssembly works with.

• A web developer will be able to pick up a development task related to the native application.

Disadvantages of using WebAssembly in a native app

Now that we've talked about the advantages of using WebAssembly inside a .NET MAU application, it's also important to know its disadvantages. Fortunately, there aren't many of them.

The key disadvantage is that we have to add another layer to the application. The MAUI application is compiled into a platform-specific executable, but there's another executable hosted inside the application that represents the WebAssembly module. This has the following disadvantages:

• It can have a potentially increased application size because we need to account for both the main app executable and the compiled WebAssembly inside it.

• It takes a longer loading time because we need to first load the main application and then load the WebAssembly user interface.

However, both the loading time and the application size difference might not be significant enough to offset the advantages of using WebAssembly inside a MAUI app.