2

Introduction to Blazor and WebAssembly

In the previous chapter, we explored the pivotal concepts of interfaces and polymorphism in C#. We learned how interfaces define the contracts for methods and properties, allowing for flexible and reusable code, while polymorphism enables treating objects of different types as instances of a common interface, thus promoting code generalization and reusability. These principles are foundational for creating modular and scalable software systems in C#. In this chapter we explore two important GUI technologies: Blazor and WebAssembly. We discuss how they work and how they support the development of web applications. Blazor is a free, open-source web framework built by Microsoft. It allows developers to use C# to create interactive web interfaces without writing JavaScript. Using the .NET platform, Blazor will enable developers to create advanced and interactive web user interfaces sharing code and libraries across servers and clients. WebAssembly, also known as "wasm," is a binary format for instructions created for a stack-based virtual machine. It allows high-level languages like C, C++, and Rust to be compiled and run efficiently in web applications on the client. Integrating Blazor and WebAssembly introduces a fresh approach to web application development, providing a comprehensive full-stack development experience utilizing C# and . NET. This enables developers to leverage their existing .NET expertise and efficiently reuse code and libraries from the server-side aspects of their applications.

In this chapter, we will begin by examining the basic principles of Blazor and WebAssembly, their architecture, and how they collaborate. Then, we will create a simple Blazor application running on WebAssembly. Upon concluding this chapter, you will possess a comprehensive knowledge of these technologies and will be equipped to initiate your application development.

To achieve this, we'll cover the following topics:

• Understanding Blazor
• Exploring WebAssembly
• Blazor and WebAssembly Together
• Setting Up Your Development Environment
• Creating Your First Blazor Application
• Debugging and Troubleshooting
• Best Practices and Tips

Technical requirements

This chapter requires access to Visual Studio Community (https://visualstudio.microsoft.com/downloads/) with the following workloads installed:

• ASP.Net and Web Development
• .Net Multi-platform App UI Development
• .Net desktop development
• Universal Windows Platform Development

The code shown in the examples can be found here: https://github.com/PacktPublishing/GUI-Programming-with-C-Sharp.

Understanding Blazor

The term "Blazor" is the result of merging "Browser" and "Razor," the latter being a syntax for generating dynamic web pages using C#. Blazor signifies a notable advancement in web development pioneered by Microsoft. It functions as a freely accessible web framework, enabling the creation of dynamic web user interfaces using C# without needing JavaScript. This integration permits the utilization of C# for client and server coding, facilitating the sharing of code and libraries. Blazor has access to several tools and libraries of the .NET developer platform for developing web applications because it is a part of the widely known web development framework called ASP.NET Core.

Blazor applications operate directly within web browsers through the use of WebAssembly. Since it is the actual .NET working on WebAssembly, developers can reuse code and libraries from the server-side components of their applications. Additionally, Blazor supports server-side execution of .NET, managed by a SignalR connection, handling tasks such as UI updates, JavaScript calls, and event handling.

Blazor ensures a single-page app experience by adhering to the latest web standards. This is achieved as browsers run a combination of .NET, Razor, and HTML via WebAssembly technology.

The following steps are followed when a Blazor app is built and run in a browser:

1. .NET runtime is loaded: The browser downloads a small .NET runtime along with your compiled project. This .NET runtime is based on Mono, an open-source version of the .NET Framework that Microsoft maintains.
2. Blazor bootstraps the app: The runtime boots the .NET environment, loads and runs your app.
3. Blazor sets up interactive UI: UI event handlers are set up automatically, and UI updates are handled efficiently via a sophisticated diffing algorithm.
4. Blazor handles user interactions: When the user interacts with the app, Blazor interoperates with JavaScript to update the DOM.

Figure 2.1 - Blazor loading steps

Let us explore each of these steps in more detail.

.NET runtime is loaded

The initial step in launching a Blazor application in a web browser involves loading the .NET runtime. This action is essential because Blazor applications are constructed using .NET and operate within the .NET platform. The .NET runtime serves as a software environment offering various services to applications. These services include managing memory, ensuring type and memory safety, and offering an extensive class library to fulfill diverse programming requirements. Within the realm of Blazor, the .NET runtime is constructed upon Mono, an open-source version of .NET managed by Microsoft. Upon the initial loading of the Blazor application, the browser downloads the runtime alongside the compiled project.

Upon loading the .NET runtime, it initializes the .NET environment and loads the Blazor application before finally running it. So, the Blazor application operates directly within the browser through WebAssembly, allowing developers to utilize C# to write both client and server code. Moreover, sharing code and libraries across servers and clients is also possible.

Blazor bootstraps the app

Once the .NET runtime is loaded in the browser, the second step is the process where the Blazor framework begins initializing and starting an application, which is known as "Blazor bootstraps the app."

Here's a breakdown of what happens during this bootstrap process:

• Application Initialization: The Blazor framework sets up the application, configuring its services and settings.
• Component Initialization: Blazor determines the components required to render the page. Components in Blazor are self-contained parts of the user interface (UI), such as pages, dialogs, or forms.
• Render the UI: Blazor then renders these components onto the page. During this phase, Blazor establishes the required JavaScript interop handlers to enable dynamic updates as a response to user actions or events.
• Event Handling: Blazor creates event handlers for user interactions like button clicks or text input. When these events occur, Blazor updates the UI accordingly.

Once the bootstrap process is finished, the Blazor application is fully operational and responsive in the browser. It can interact with user input, send requests to the server, and update the UI dynamically.

Blazor's Management of Interactive UI and User Interactions

The UI rendering and event handling happens iteratively. The process through which Blazor readies the app's UI to be interactive and adaptable to user input is referred to as Blazor sets up interactive UI and is a fundamental step in the Blazor bootstrap sequence. After this step comes the Blazor handles user interactions part. This is the operation where Blazor responds to the inputs or actions of users, such as clicking buttons, text input, and more. Therefore, it is clear how Blazor plays a pivotal role in putting together an interactive UI and managing user interactions within applications. This encompasses several crucial processes integral to the Blazor framework's functionality:

• Component Rendering: Blazor identifies and renders components, which represent UI parts such as pages, dialogs, or forms, onto the web page.
• JavaScript Interop Setup: Blazor establishes the required handlers for JavaScript interoperability, facilitating communication between .NET code and JavaScript functions. Blazor needs a route to communicate with the APIs because the browser's Document Object Model (DOM) APIs are based on JavaScript, and Blazor facilitates writing client-side logic in C#. Once it has a way to interact, it can update the UI dynamically.
• Event Binding: Blazor connects DOM events, such as button clicks or text input, and corresponding .NET methods. As a result, when users interact with the UI, the associated .NET methods are triggered, facilitating the execution of relevant actions or operations.
• UI Updates and State Management: When user interactions invoke the linked .NET methods, modifications may be made to the UI linked to them. Utilizing an efficient diffing algorithm, Blazor calculates the...