Mastering Blazor WebAssembly: A step-by-step guide to developing advanced single-page applications [Team-IRA] [True PDF]

✍ Scribed by Ahmad Mozaffar

• Publisher: Packt Publishing
• Year: 2023
• Tongue: English
• Leaves: 370
• Category: Library

✦ Synopsis

Leverage the power of WebAssembly to develop cutting-edge frontend web applications systematically with this comprehensive guide

Purchase of the print or Kindle book includes a free PDF eBook

Key Features

• Explore Blazor WebAssembly through a systematic, step-by-step approach
• Discover the concepts essential to develop and deploy real-world SPAs
• Create robust components and develop efficient unit tests by using the bUnit framework

Book Description

Blazor WebAssembly is a revolutionary technology in software development that enables you to develop web applications with a rich user interface using C# without JavaScript. It can be run natively in the browser and soon on mobile apps with .NET MAUI, making it a superweapon in the .NET developer's toolbox. This capability has opened the doors for the JavaScript community to have a stable framework to build single page applications (SPAs) maintained by Microsoft and driven by the community.

Mastering Blazor WebAssembly is a complete resource that teaches you everything you need to build client-side web applications using C# & .NET 7.0. Throughout this book, you'll discover the anatomy of a Blazor WebAssembly project, along with the build, style, and structure of the components. You'll implement forms to catch user input and collect data, as well as explore the topics of navigating between the pages in depth. The chapters will guide you through handling complex scenarios like RenderTrees, writing efficient unit tests, using variant security methods, and publishing the app to different providers, all in a practical manner.

By the end of this book, you'll have the skills necessary to build web apps with Blazor WebAssembly, along with the basics for a future in mobile development with .NET MAUI and Blazor.

What you will learn

• Develop basic and advanced components in Blazor to meet your application's specific requirements
• Utilize Blazor forms to efficiently collect user input and handle data validation
• Enhance your app with JavaScript logic, integrating it smoothly within your Blazor application
• Call RESTful APIs in Blazor, enabling seamless integration with external services
• Explore advanced identity and security techniques in Blazor ensuring robust authentication and authorization mechanisms
• Build reliable apps by implementing unit testing and effective error handling strategies

Who this book is for

This book is for existing .NET developers eager to leverage their C# skills to build single page applications without relying on JavaScript frameworks, as well as for JavaScript developers curious about Blazor's capabilities and its user-friendly approach to web development. Tech enthusiasts seeking an in-depth understanding of Blazor's inner workings will also find this guide useful for discovering and mastering Blazor's powerful and intuitive web development capabilities.

Table of Contents

1. Understanding the Anatomy of a Blazor WebAssembly Project
2. Components in Blazor
3. Developing Advanced Components in Blazor
4. Navigation and Routing
5. Capturing User Input with Forms and Validation
6. Consuming JavaScript in Blazor
7. Managing Application State
8. Consuming Web APIs from Blazor WebAssembly
9. Authenticating and Authorizing Users in Blazor
10. Handling Errors in Blazor WebAssembly
11. Giving Your App a Speed Boost
12. RenderTree in Blazor
13. Testing Blazor WebAssembly Apps
14. Publishing Blazor WebAssembly Apps
15. What's Next?

✦ Table of Contents

Cover
Title page
Copyright and credits
Contributors
Table of Contents
Preface
Part 1: Blazor WebAssembly Essentials
Chapter 1: Understanding the Anatomy of a Blazor WebAssembly Project
Technical requirements
Creating your first Blazor WebAssembly project
Using the .NET CLI
Using Visual Studio 2022
Discovering the project structure
The wwwroot folder
The Pages folder
The Shared folder
The _Imports.razor file
The App.razor file
The Program.cs file
Dependency injection in Blazor WebAssembly
How dependency injection works
Using dependency injection in Blazor WebAssembly
Creating, storing, and retrieving the app configurations
Managing application environments
Creating a configuration file based on the environment
Reading the environment within the components
Summary
Further reading
Chapter 2: Components in Blazor
Technical requirements
Understanding the concept of components
Introduction to Razor
Razor syntax
Razor directives
Building your first Razor component
Moving data among components
Parameters
Parameters – special cases
EventCallback
Cascading values and parameters
IsFixed parameter for cascading values
Two-way data binding in Blazor
Discovering the component life cycle
Dispose event
Styling the components using CSS
Isolated styles
Global styles
Inline styles
Embedded styles
Summary
Further reading
Chapter 3: Developing Advanced Components in Blazor
Technical requirements
Building layouts in Blazor
Understanding our Blazor project’s default MainLayout
Creating our first layout component
Defining the layout for a component
Developing templated components
Developing a modal pop-up component
Consuming the modal pop-up component
Generic templated components
Consuming a generic templated component
Rendering components dynamically
Using the Razor Class Library for packaging and reusability
Creating a Razor Class Library project
Referencing the Razor Class Library in the Blazor WebAssembly project
Summary
Further reading
Part 2: App Parts and Features
Chapter 4: Navigation and Routing
Technical requirements
Understanding routing and pages
The Router component in Blazor
Creating your first page
Navigation and parameters
Passing parameters using the route
Route parameter special conditions
Query string parameters
Query string versus route parameters
Handling a NotFound UI
Reacting to navigation changes
The NavLink Component
The LocationChanged event in NavigationManager
The NavigationLock component
Summary
Further reading
Chapter 5: Capturing User Input with Forms and Validation
Technical requirements
Understanding forms in Blazor
Forms in HTML
The EditForm component in Blazor
Discovering Blazor’s built-in input components
InputText
InputTextArea
InputNumber
InputCheckbox
InputDate
InputFile
InputRadioGroup and InputRadio
InputSelect
Validating form input
Developing a custom input component
Summary
Further reading
Chapter 6: Consuming JavaScript in Blazor
Technical requirements
When and why we use JavaScript in Blazor apps
IJSRuntime interface in Blazor
Referencing JS globally
JS isolation in Blazor
Calling JavaScript from C# code
Calling a basic JS method
Calling a JS method synchronously
Calling a JS method that returns data
Calling C# from JS
Calling a static C# method
Calling an instance C# method
Turning an existing JS package into a reusable Blazor component
Summary
Further reading
Chapter 7: Managing Application State
Technical requirements
What is state management?
Persisting the state in the browser’s local storage
Persisting the state in the memory
Persisting the state using the URL
Summary
Further reading
Chapter 8: Consuming Web APIs from Blazor WebAssembly
Technical requirements
Understanding web API clients
When do you need a web API?
Understanding and reading a web API
Testing a web API with Postman
Calling a web API from Blazor WebAssembly
Understanding FetchData component logic
Configuring HttpClient in Blazor WebAssembly
Sending a GET request
Implementing a POST web API call in Blazor WebAssembly
Exploring IHttpClientFactory and delegating handlers
Separating your API calls from the components
Summary
Further reading
Chapter 9: Authenticating and Authorizing Users in Blazor
Technical requirements
Understanding authentication in Blazor WebAssembly
Token-based authentication (TBA)
The Blazor authentication library
Building a custom JWT authentication flow
Calling the login endpoint
Designing the login form page
Building the authentication state provider and setting up the authentication infrastructure
Implementing authorization and advanced authentication features
Roles and policies
The AuthorizeView component
CascadingAuthenticationState
Sign-out functionality
Auto-redirect to login
Accessing authorized API endpoints
Integrating with the Microsoft Identity Platform
What is Azure AD?
What is Azure AD B2C?
When should I use Azure AD, Azure AD B2C, or a custom flow?
Summary
Further reading
Chapter 10: Handling Errors in Blazor WebAssembly
Technical requirements
Understanding error handling
Managing API errors
Implementing global error handlers
Utilizing the ErrorBoundary component
Summary
Further reading
Part 3: Optimization and Deployment
Chapter 11: Giving Your App a Speed Boost
Technical requirements
Increasing components’ efficiency
Virtualize component
Structuring components for performance
Optimizing the JavaScript calls
Using System.Text.Json over other JSON packages
Rendering optimization with ShouldRender
Decreasing the initial download size with assembly lazy loading
Summary
Further reading
Chapter 12: RenderTree in Blazor
Technical requirements
How rendering happens in SPAs
What is the DOM?
Updating the DOM using JS
What is RenderTree in Blazor?
Understanding the structure of the component in RenderTree
Understanding RenderTree’s sequence numbering of elements
Building a component with RenderTree
Controlling the rendering using the @key directive
Summary
Further reading
Chapter 13: Testing Blazor WebAssembly Apps
Technical requirements
Testing Blazor components overview
Getting started with testing in Blazor with bUnit
Writing component unit tests with bUnit
Writing the first component unit test
Testing components with RenderFragment
Testing components with interaction
Mocking and faking tests in Blazor and bUnit
Writing tests with Moq
Faking authentication and authorization in bUnit
Introducing Playwright for E2E tests
Summary
Further reading
Chapter 14: Publishing Blazor WebAssembly Apps
Technical requirements
Blazor WebAssembly prerelease final checks
AOT compilation
Trimming
Compression
URL rewriting
Disabling time zone support
Introducing Blazor WebAssembly ASP.NET Core Hosted
Publishing Blazor WebAssembly to Azure App Service
Publishing Blazor WebAssembly to Azure Static Web Apps
Summary
Further reading
Chapter 15: What’s Next?
Technical requirements
Discovering more components and features in the book’s project
User registration
Rating and reviewing
Uploading cover images
Using Blazor WebAssembly for mobile and desktop development
Building real-time applications with Blazor and SignalR
Third-party UI components and packages
Building your own app
Summary
Index
Other Books You May Enjoy