Blazor WebAssembly is Microsoft's new single-page application (SPA) framework for building web applications on .NET Framework. It enables developers to run C# code on the client. Therefore, instead of being forced to use JavaScript on the browser, we can now use C# on the browser.

In this chapter, we will prepare you to develop web applications using Blazor WebAssembly. We will discuss the two different Blazor hosting models and present the advantages of using Blazor WebAssembly over Blazor Server. Finally, we will guide you through the process of setting up your computer to complete the projects in this book.

In this chapter, we will cover the following topics:

• Benefits of using the Blazor framework
• Differences between the two hosting models
• What is WebAssembly?
• Setting up your PC

Using the Blazor framework has several benefits. For starters, it is a free and open source framework built on Microsoft's robust .NET Framework. Also, it is an SPA framework that uses Razor syntax and can be developed using Microsoft's exceptional tooling.

.NET Framework

Blazor is built on .NET Framework. Since Blazor is built on .NET Framework, anyone familiar with .NET Framework can quickly become productive using the Blazor framework. The Blazor framework leverages the robust ecosystem of .NET libraries and NuGet packages from .NET Framework. Also, since both client and server code are written in C#, they can share code and libraries, such as the application logic used for data validation.

Blazor is open source. Since Blazor is a feature of the ASP.NET framework, all of the source code for Blazor is available on GitHub as part of the dotnet/aspnetcore repository that is owned by the .NET Foundation. .NET Foundation is an...

Blazor has two different hosting models. The first hosting model that Microsoft released is the Blazor Server model. In this hosting model, the web app is executed on the server. The second hosting model that Microsoft released, and the topic of this book, is the Blazor WebAssembly model. In this hosting model, the web app is executed on the browser.

Each hosting model has its own advantages and disadvantages. However, they both use the same underlying architecture. Therefore, it is possible to write and test your code independent of the hosting model. The major differences between the two hosting models concern latency, security, data access, and offline support.

Blazor Server

As we just mentioned, the Blazor Server hosting model was the first hosting model released by Microsoft. It was released as part of the .NET Core 3 release in September 2019.

The following diagram illustrates the Blazor Server hosting model:

Figure 1.1 –...

WebAssembly is a binary instruction format that allows code written in C# to run on the browser at near-native speed. To run .NET binaries in a web browser, it uses a version of the .NET runtime that has been compiled to WebAssembly. You can think of it as executing natively compiled code in a browser.

WebAssembly is an open standard developed by a W3C Community Group. It was originally announced in 2015, and the first browser that supported it was released in 2017.

WebAssembly goals

When WebAssembly was originally being developed, there were four main design goals for the project:

• Fast and efficient
• Safe
• Open
• Don't break the web

WebAssembly is fast and efficient. It is designed to allow developers to write code in any language that can then be compiled to run in the browser. Since the code is compiled, it is fast and performs at near-native speed.

WebAssembly is safe. It does not allow direct interaction with the browser...

For the projects in this book, we use Visual Studio 2019, .NET 5.0, and SQL Server 2019.

All of the projects are built using Visual Studio 2019 Community Edition version 16.9.5 with the ASP.NET and Web Development workload. If you need to install Visual Studio 2019, follow the directions in the Installing Visual Studio Community Edition section later in this chapter.

Tip

Although we are using Visual Studio 2019 Community Edition, any edition of Visual Studio 2019 can be used to complete the projects in this book. Microsoft Visual Studio Code can also be used.

Blazor WebAssembly in .NET 5 requires .NET 5.0. To check the version of .NET that is running on your computer, open the Command Prompt and enter the following command:

dotnet –-version

If your computer is not running .NET 5.0, follow the directions in the Installing .NET 5.0 section later in this chapter.

The final two projects in this book use SQL Server 2019 Express Edition as...

After completing this chapter, you should understand the benefits of using Blazor WebAssembly versus other web development frameworks and be prepared to complete the projects in this book.

In this chapter, we introduced the Blazor framework. The Blazor framework is built on .NET Framework and allows developers to use C# on both the frontend and backend of a web app.

After that, we compared Blazor Server with Blazor WebAssembly. Blazor WebAssembly has many advantages over Blazor Server due to the fact that it runs on the browser while Blazor Server runs on the server. A Blazor WebAssembly web app can run offline and feels much more like a native application because all of the code is run directly on the browser. Finally, a Blazor WebAssembly app can be easily converted into a PWA.

In the last part of the chapter, we explained how to set up your computer with Visual Studio 2019 Community Edition, .NET 5.0, and SQL Server 2019 Express, all of which are required to complete...

The following questions are provided for your consideration:

1. Does using Blazor WebAssembly mean that you never need to write JavaScript ever again?
2. Does Blazor WebAssembly require that any plugins be installed on the browser?
3. How much does it cost to get started developing with Blazor WebAssembly?

The following resources provide more information concerning the topics in this chapter:

• For more information on Blazor, refer to https://blazor.net.
• For more information on the .NET Foundation, refer to https://dotnetfoundation.org.
• For more information on the ASP.NET repository on GitHub, refer to https://github.com/dotnet/aspnetcore.
• For more information on SignalR, refer to https://docs.microsoft.com/en-us/aspnet/core/signalr/introduction.
• For more information on PWAs, refer to https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps.
• For general information on WebAssembly, refer to https://webassembly.org.
• For more information on the W3C WebAssembly Core Specification, refer to https://www.w3.org/TR/wasm-core.
• For more information on browser compatibility with WebAssembly, refer to https://caniuse.com/?search=wasm.