Preface

Single-page applications (SPAs) have become an essential part of modern technology. We have become more dependent on browsers than ever before. With the release of Angular, ReactJS, and other JavaScript frameworks for developing modern web apps, a big revolution occurred. JavaScript was dominant in the field for many years as the only language to be understood and run in browsers. In 2015, WebAssembly arrived as a technology experiment that allowed browsers to run programming languages other than JavaScript, such as C# and C.

With WebAssembly, the doors have opened for more powerful web apps and new frameworks to be used to build things in browsers. Microsoft was the first adopter of WebAssembly by announcing Blazor, a framework that allows .NET developers to build modern and advanced web applications using C# that can run natively in a browser.

In 2018, when Blazor was still an experimental project of Microsoft's, I started to use it, and I was amazed at how powerful it was and the huge potential it had in the world of web and software development in general, outside the boundaries of the browser. From that day onward, I started to create packages and build demos and production-ready apps with it, until it became the main technology I used for my full-time work.

Mastering Blazor WebAssembly utilizes all my experience in Blazor and .NET to show you, in depth, how Blazor WebAssembly works and how you can leverage it, step by step, to build fascinating modern web apps that run natively with C# inside the browser. It will show you how to build the foundations you need to use Blazor WebAssembly to build cross-platform mobile and desktop apps by utilizing .NET MAUI and Blazor WebAssembly.

The book begins by introducing Blazor WebAssembly and how to set up a new project. Then, it covers all the features and concepts of Blazor WebAssembly with practical examples and theoretical explanations. You will learn how Blazor WebAssembly works internally and how to use it effectively. By the end of this book, you will have developed a complete, workable, and efficient test application that you can publish to the cloud.

Who this book is for

This book targets existing .NET developers who are excited to start their journey with developing SPAs, using their own C# skills without learning JS frameworks, JS developers who have heard about Blazor and want to discover its superpower and simplicity for web development, and every geek who wants to discover and learn how things work under the hood, step by step.

What this book covers

Chapter 1, Understanding the Anatomy of a Blazor WebAssembly Project, introduces Blazor WebAssembly, guides you to set up a project and understand its structure, and covers essential topics such as environments and dependency injection.

Chapter 2, Components in Blazor, explains the concept of components in Blazor WebAssembly and SPAs, covering how to build, communicate, and style them.

Chapter 3, Developing Advanced Components in Blazor, introduces advanced component types such as layouts, templated components, and dynamic components, showing you how to use Razor class library projects to build reusable components.

Chapter 4, Navigation and Routing, explains the navigation process in a SPA and how to implement it in your Blazor apps. The chapter also covers how to use query parameters, send and receive data via a URL, and respond to navigation changes.

Chapter 5, Capturing User Input with Forms and Validations, explains how to create and submit forms in Blazor, use the built-in input components, validate user input, and create your own custom input component.

Chapter 6, Consuming JavaScript in Blazor, explains how and when to use JS in your Blazor WebAssembly project and how to call JS code from your Blazor app, and vice versa. It also shows how to wrap an existing JS package into a Blazor component using JS.

Chapter 7, Managing Application State, introduces the concept of state management in an SPA and shows three different techniques for preserving the state of your application – using local storage, in memory, or a URL.

Chapter 8, Consuming Web APIs from Blazor WebAssembly, provides an overview of web APIs and web API clients, showing you how to understand an existing web API and send HTTP requests to it from Blazor. It also covers delegating handlers, IHttpClientFactory, and how to organize API calls in your app.

Chapter 9, Authenticating and Authorizing Users in Blazor, explains what authentication and authorization are, and then deep-dives into how Blazor handles authentication and how to develop your custom authentication flow with JSON Web Tokens. It also shows you how to control the UI and the app logic based on the authentication state and call secured web API endpoints.

Chapter 10, Handling Errors in Blazor WebAssembly, shows you how to make your app reliable and the techniques to handle errors efficiently in your apps.

Chapter 11, Giving Your App a Speed Boost, provides you with advanced mechanisms in Blazor that help you make your app as efficient as possible, by increasing the rendering speed and reducing the app size for faster load time.

Chapter 12, RenderTree in Blazor, explains in detail how Blazor renders components and manages the Document Object Model (DOM), introducing the concept of RenderTree. It also shows how you can improve your app performance by learning how things work under the hood.

Chapter 13, Testing Blazor WebAssembly Apps, introduces the concept of component testing and the bUnit library, providing you with what you need to write efficient unit tests for your components. The chapter also covers End-to-End (E2E) testing and the Playwright package.

Chapter 14, Publishing Blazor WebAssembly Apps, shows the checks to do before publishing an app, introduces the Blazor WebAssembly ASP.NET Core Hosted app model, and guides you step by step to release your apps to Azure App Service and Azure Static Web Apps.

Chapter 15, What’s Next?, provides an overview of more components and use cases to help you apply what you learned in this book.

To get the most out of this book

You need to have a basic understanding of HTML and CSS, in addition to being familiar with .NET and C# and the concept of Object-Oriented Programming (OOP). No prior experience in JS is needed.

Software/hardware covered in the book	Operating system requirements
Visual Studio 2022	Windows
Visual Studio Code	Windows, macOS, or Linux
.NET 7.0	Windows, macOS, or Linux

In Chapter 14, Publishing Blazor WebAssembly Apps, an Azure account is needed to follow along with the chapter.

If you are using the digital version of this book, we advise you to type the code yourself or access the code from the book’s GitHub repository (a link is available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

Download the example code files

You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/mastering-blazor-webassembly. If there’s an update to the code, it will be updated in the GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: “Then, the user is authenticated if the user object inside the UserState class is not null.”

A block of code is set as follows:

<nav class="navbar navbar-expand-lg navbar-light bg-light">     ... 
      <div class="d-flex"> 
        <button class="btn btn-outline-primary"> 
           Login</button>
      </div>
    </div> 
</nav> 

Any command-line input or output is written as follows:

dotnet builddotnet run

Bold: Indicates a new term, an important word, or words that you see on screen. For instance, words in menus or dialog boxes appear in bold. Here is an example: “Another example we will go through is the Add to Cart button.”

Tips or important notes

Appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, email us at [e-mail] and mention the book title in the subject of your message.

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata and fill in the form.

Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [e-mail] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Share Your Thoughts

Once you’ve read Mastering Blazor WebAssembly, we’d love to hear your thoughts! Please click here to go straight to the Amazon review page for this book and share your feedback.

Your review is important to us and the tech community and will help us make sure we’re delivering excellent quality content.

Download a free PDF copy of this book

Thanks for purchasing this book!

Do you like to read on the go but are unable to carry your print books everywhere?

Is your eBook purchase not compatible with the device of your choice?

Don’t worry, now with every Packt book you get a DRM-free PDF version of that book at no cost.

Read anywhere, any place, on any device. Search, copy, and paste code from your favorite technical books directly into your application.

The perks don’t stop there, you can get exclusive access to discounts, newsletters, and great free content in your inbox daily

Follow these simple steps to get the benefits:

1. Scan the QR code or visit the link below

https://packt.link/free-ebook/9781803235103

2. Submit your proof of purchase
3. That’s it! We’ll send your free PDF and other benefits to your email directly