Book Image

Blazor WebAssembly by Example, 2e - Second Edition

By : Toi B. Wright
5 (1)
Book Image

Blazor WebAssembly by Example, 2e - Second Edition

5 (1)
By: Toi B. Wright

Overview of this book

Blazor WebAssembly helps developers build web applications without the need for JavaScript, plugins, or add-ons. With its continued growth in popularity, getting started with Blazor now can open doors to new career paths and exciting projects – and Blazor WebAssembly by Example will make your first steps easier. This is a project-based guide that will teach you how to build single-page web applications with Blazor, focusing heavily on the practical over the theoretical by providing detailed step-by-step instructions for each project. The author also includes a video for each project showing her following the step-by-step instructions, so readers can use them if they're unsure about any particular step. In this updated edition, you'll start by building simple standalone web applications and gradually progress to developing more advanced hosted web applications with SQL Server backends. Each project will cover a different aspect of the Blazor WebAssembly ecosystem, such as Razor components, JavaScript interop, security, event handling, debugging on the client, application state, and dependency injection. The book’s projects get more challenging as you progress, but you don’t have to complete them in order, which makes this book a valuable resource for beginners as well as those who just want to dip into specific topics. By the end of this book, you will have experience and lots of know-how on how to build a wide variety of single-page web applications with .NET, Blazor WebAssembly, and C#.
Table of Contents (15 chapters)
13
Other Books You May Enjoy
14
Index

Benefits of using the Blazor framework

Using the Blazor framework offers several benefits. For starters, it is a free and open-source framework built on Microsoft’s robust and mature .NET Framework. Also, it is a SPA framework that uses Razor syntax and can be developed using Microsoft’s exceptional tooling. Finally, Microsoft is actively supporting and updating the Blazor framework. Let’s examine each of these benefits in detail in the following sections.

.NET Framework

The Blazor framework is built on .NET Framework. Therefore, 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 the code for both the client and server can be written in C#, the client and server can share code and libraries. For example, the client and server can share the application logic used for data validation.

Open source

The Blazor framework is open source. Since Blazor is a feature of the ASP.NET framework, all the source code for Blazor is available on GitHub as part of the dotnet/aspnetcore repository, which is owned by the .NET Foundation. The .NET Foundation is an independent, non-profit organization established to support the innovative, commercially friendly, open-source ecosystem around the .NET platform. The .NET platform has a strong community of over 100,000 contributions from more than 3,700 companies.

Since .NET Framework is free, this means that Blazor is also free. There are no fees or licensing costs associated with using Blazor, including for commercial use.

SPA framework

The Blazor framework is a SPA framework. As the name implies, a SPA is a web app that consists of a single page. The application dynamically rewrites the areas of the page that have changed instead of loading an entirely new page in response to each UI update. The goal is faster transitions that make the web app feel more like a native app.

When a page is rendered, Blazor creates a render tree that is a graph of the components on the page. It is like the Document Object Model (DOM) created by the browser. However, it is a virtual DOM. Updates to the UI are applied to the virtual DOM and only the differences between the DOM and the virtual DOM are rendered by the browser.

Razor syntax

Razor is the ASP.NET view engine used to create dynamic web pages with C#. Razor is a syntax for combining HTML markup with C# code that was designed for developer productivity. It allows the developer to use both HTML markup and C# in the same file.

Blazor web apps are built using Razor components. Razor components are reusable UI elements that contain C# code, markup, and other Razor components. Razor components are quite literally the building blocks of the Blazor framework. For more information on Razor components, refer to Chapter 2, Building Your First Blazor WebAssembly Application.

IMPORTANT NOTE

Razor Pages and MVC also use the Razor syntax. Unlike Razor Pages and MVC, which render the whole page, Razor components only render the DOM changes. One way to easily distinguish between them is that Razor components use the RAZOR file extension, while both MVC and Razor Pages use the CSHTML file extension.

The name of the Blazor framework has an interesting origin story. The term Blazor is a combination of the word browser and the word razor.

Awesome tooling

You can use either Microsoft Visual Studio or Microsoft Visual Studio Code to develop Blazor applications. Microsoft Visual Studio is an integrated development environment (IDE), while Microsoft Visual Studio Code is a lightweight, yet powerful, editor. They are both incredible tools for building enterprise applications. As an added bonus, there are versions of both tools that are available for free.

Supported by Microsoft

Although the Blazor framework is open source, it is maintained by Microsoft. They continue to make large investments in the future of Blazor. The following list includes features that Microsoft is actively working on adding to Blazor:

  • Hot reload improvements
  • Ahead-of-time (AOT) compilation performance improvements
  • Authentication improvements
  • Additional built-in components
  • Multithreading

There are many benefits associated with using the Blazor framework to develop web applications. Since it is built on .NET Framework, it enables developers to use the skills, such as C#, and the tools, such as Visual Studio, that they have already mastered. Also, since it is a SPA framework, Blazor web apps feel like native apps to the user. Finally, Microsoft is making a large investment in the future of Blazor.