Web Development with Blazor - Second Edition

Web Development with Blazor - Second Edition

by Jimmy Engström
Released March 2023
Publisher(s): Packt Publishing
ISBN: 9781803241494

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Develop modern web UIs with Blazor Server and Blazor WebAssembly Purchase of the print or Kindle book includes a free eBook in PDF format.

Key Features

  • Create a production-ready Blazor application from start to finish
  • Learn Blazor fundamentals, gain actionable insights, and discover best practices
  • Find out how, when, and why to use Blazor Server and Blazor WebAssembly, as well as Blazor Hybrid

Book Description

Blazor is an essential tool if you want to build interactive web apps without JavaScript, but it has a learning curve. Updated with the latest code in .NET 7 and C# 11 and written by someone who adopted Blazor early, this book will help you overcome the challenges associated with being a beginner with Blazor and teach you the best coding practices.

You’ll start by learning how to leverage the power of Blazor and exploring the full capabilities of both Blazor Server and Blazor WebAssembly. Then you'll move on to the practical part, centered around a sample project – a blog engine. You'll apply all your newfound knowledge about creating Blazor projects, the inner workings of Razor syntax, validating forms, and creating your own components.

This new edition also looks at source generators, dives deeper into Blazor WebAssembly with ahead-of-time, and includes a dedicated new chapter demonstrating how to move components of an existing JavaScript (Angular, React) or MVC-based website to Blazor or combine the two. You’ll also see how to use Blazor (Hybrid) together with .NET MAUI to create cross-platform desktop and mobile applications.

When you reach the end of this book, you'll have the confidence you need to create and deploy production-ready Blazor applications, and you'll have a big-picture view of the Blazor landscape.

What you will learn

  • Understand the different technologies that can be used with Blazor, such as Blazor Server, Blazor WebAssembly, and Blazor Hybrid
  • Find out how to build simple and advanced Blazor components
  • Explore the differences between Blazor Server and Blazor WebAssembly projects
  • Discover how Minimal APIs work and build your own API
  • Explore existing JavaScript libraries in Blazor and JavaScript interoperability
  • Learn techniques to debug your Blazor Server and Blazor WebAssembly applications
  • Test Blazor components using bUnit

Who this book is for

This book is for .NET web developers and software developers who want to use their existing C# skills to build interactive SPA applications running either inside the web browser using Blazor WebAssembly, or on the server using Blazor Server. You’ll need intermediate-level web-development skills, basic knowledge of C#, and prior exposure to .NET web development before you get started; the book will guide you through the rest.

Table of contents

  1. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
    4. Get in touch
  2. Hello Blazor
    1. Technical requirements
    2. Why Blazor?
    3. Preceding Blazor
    4. Introducing WebAssembly
    5. Introducing .NET 7
    6. Introducing Blazor
      1. Blazor Server
      2. Blazor WebAssembly
      3. Blazor WebAssembly versus Blazor Server
      4. Blazor Hybrid / .NET MAUI
    7. Summary
    8. Further reading
  3. Creating Your First Blazor App
    1. Technical requirements
    2. Setting up your development environment
      1. Windows
      2. macOS
      3. Linux (or macOS or Windows)
    3. Creating our first Blazor application
      1. Exploring the templates
        1. Blazor Server App
        2. Blazor WebAssembly App
        3. Blazor Server App Empty
        4. Blazor WebAssembly App Empty
      2. Creating a Blazor Server application
      3. Creating a WebAssembly application
    4. Using the command line
      1. Creating projects using the command line
    5. Figuring out the project structure
      1. Program.cs
        1. WebAssembly Program.cs
        2. Blazor Server Program.cs
      2. Index/_Host
        1. _Host (Blazor Server)
        2. Index (WebAssembly)
      3. App
      4. MainLayout
      5. Bootstrap
      6. CSS
    6. Summary
  4. Managing State – Part 1
    1. Technical requirements
    2. Creating a data project
      1. Creating a new project
      2. Creating data classes
      3. Creating an interface
      4. Implementing the interface
    3. Adding the API to Blazor
    4. Summary
  5. Understanding Basic Blazor Components
    1. Technical requirements
    2. Exploring components
      1. Counter
      2. FetchData
    3. Learning Razor syntax
      1. Razor code blocks
      2. Implicit Razor expressions
      3. Explicit Razor expressions
      4. Expression encoding
      5. Directives
        1. Adding an attribute
        2. Adding an interface
        3. Inheriting
        4. Generics
        5. Changing the layout
        6. Setting a namespace
        7. Setting a route
        8. Adding a using statement
    4. Understanding dependency injection
      1. Singleton
      2. Scoped
      3. Transient
      4. Injecting the service
    5. Figuring out where to put the code
      1. In the Razor file
      2. In a partial class
      3. Inheriting a class
      4. Only code
    6. Lifecycle events
      1. OnInitialized and OnInitializedAsync
      2. OnParametersSet and OnParametersSetAsync
      3. OnAfterRender and OnAfterRenderAsync
      4. ShouldRender
    7. Parameters
      1. Cascading parameters
    8. Writing our first component
      1. Creating a components library
      2. Using our components library
      3. Creating our own component
    9. Summary
  6. Creating Advanced Blazor Components
    1. Technical requirements
    2. Exploring binding
      1. One-way binding
      2. Two-way binding
    3. Actions and EventCallback
    4. Using RenderFragment
      1. ChildContent
      2. Default value
      3. Building an alert component
    5. Exploring the new built-in components
      1. Setting the focus of the UI
      2. Influencing the HTML head
      3. Component virtualization
      4. Error boundaries
    6. Summary
  7. Building Forms with Validation
    1. Technical requirements
    2. Exploring form elements
      1. EditForm
      2. InputBase<>
      3. InputCheckbox
      4. InputDate<TValue>
      5. InputNumber<TValue>
      6. InputSelect<TValue>
      7. InputText
      8. InputTextArea
      9. InputRadio
      10. InputRadioGroup
      11. InputFile
    3. Adding validation
      1. ValidationMessage
      2. ValidationSummary
    4. Custom validation class attributes
    5. Looking at bindings
      1. Binding to HTML elements
      2. Binding to components
    6. Building an admin interface
      1. Listing and editing categories
      2. Listing and editing tags
      3. Listing and editing blog posts
    7. Summary
  8. Creating an API
    1. Technical requirements
    2. Creating the service
      1. Adding data access
      2. Learning about Minimal APIs
      3. Adding the API controllers
        1. Adding APIs for handling blog posts
        2. Adding APIs for handling categories
        3. Adding APIs for handling tags
    3. Creating the client
    4. Summary
  9. Authentication and Authorization
    1. Technical requirements
    2. Setting up authentication
      1. Configuring Blazor Server
    3. Securing Blazor Server
    4. Securing Blazor WebAssembly
      1. Adjusting Auth0
    5. Securing the API
      1. Configure Auth0
      2. Configure the API
    6. Adding roles
      1. Configuring Auth0 by adding roles
      2. Adding roles to Blazor Server
      3. Adding roles to Blazor WebAssembly
    7. Summary
  10. Sharing Code and Resources
    1. Technical requirements
    2. Adding static files
      1. Choosing between frameworks
      2. Adding a new style
      3. Adding CSS to BlazorServer
      4. Adding CSS to BlazorWebAssembly.Client
      5. Making the admin interface more usable
      6. Making the menu more useful
      7. Making the blog look like a blog
    3. CSS isolation
    4. Summary
  11. JavaScript Interop
    1. Technical requirements
    2. Why do we need JavaScript?
    3. .NET to JavaScript
      1. Global JavaScript (the old way)
      2. JavaScript Isolation
    4. JavaScript to .NET
      1. Static .NET method call
      2. Instance method call
    5. Implementing an existing JavaScript library
    6. JavaScript interop in WebAssembly
      1. .NET to JavaScript
      2. JavaScript to .NET
    7. Summary
  12. Managing State – Part 2
    1. Technical requirements
    2. Storing data on the server side
    3. Storing data in the URL
      1. Route constraints
      2. Using a query string
      3. Scenarios that are not that common
    4. Implementing browser storage
      1. Creating an interface
      2. Implementing Blazor Server
      3. Implementing WebAssembly
      4. Implementing the shared code
    5. Using an in-memory state container service
      1. Implementing real-time updates on Blazor Server
      2. Implementing real-time updates on Blazor WebAssembly
    6. Summary
  13. Debugging the Code
    1. Technical requirements
    2. Making things break
    3. Debugging Blazor Server
    4. Debugging Blazor WebAssembly
    5. Debugging Blazor WebAssembly in the web browser
    6. Hot Reload
    7. Summary
  14. Testing
    1. Technical requirements
    2. What is bUnit?
    3. Setting up a test project
    4. Mocking the API
    5. Writing tests
      1. Authentication
      2. Testing JavaScript
    6. Summary
  15. Deploy to Production
    1. Technical requirements
    2. Continuous delivery options
    3. Hosting options
      1. Hosting Blazor Server
      2. Hosting Blazor WebAssembly
      3. Hosting on IIS
    4. Summary
  16. Moving from, or Combining, an Existing Site
    1. Technical requirements
    2. Introducing Web Components
    3. Exploring Custom Elements
    4. Exploring the Blazor Component
    5. Adding Blazor to an Angular site
    6. Adding Blazor to a React site
    7. Adding Blazor to MVC/Razor Pages
    8. Adding Web components to a Blazor site
    9. Migrating from Web Forms
    10. Summary
  17. Going Deeper into WebAssembly
    1. Technical requirements
    2. .NET WebAssembly build tools
    3. AOT compilation
    4. WebAssembly Single Instruction, Multiple Data (SIMD)
    5. Trimming
    6. Lazy loading
    7. PWA
    8. Native dependencies
    9. Common problems
      1. Progress indicators
      2. Prerendering on the server
      3. Preloading and persisting the state
    10. Summary
  18. Examining Source Generators
    1. Technical requirements
    2. What a source generator is
    3. How to get started with source generators
    4. Community projects
      1. InterfaceGenerator
      2. Blazorators
      3. C# source generators
      4. Roslyn SDK samples
      5. Microsoft Learn
    5. Summary
  19. Visiting .NET MAUI
    1. Technical requirements
    2. What is .NET MAUI?
    3. Creating a new project
      1. .NET MAUI App
      2. .NET MAUI Class Library
      3. .NET MAUI Blazor App
    4. Looking at the template
    5. Developing for Android
      1. Running in an emulator
      2. Running on a physical device
    6. Developing for iOS
      1. Hot restart
        1. Simulator
    7. Developing for macOS
    8. Developing for Windows
    9. Developing for Tizen
    10. Summary
  20. Where to Go from Here
    1. Technical requirements
    2. Learnings from running Blazor in production
      1. Solving memory problems
      2. Solving concurrency problems
      3. Solving errors
      4. Old browsers
    3. The next steps
      1. The community
      2. The components
    4. Summary
  21. Other Books You May Enjoy
  22. Index

Product information

  • Title: Web Development with Blazor - Second Edition
  • Author(s): Jimmy Engström
  • Release date: March 2023
  • Publisher(s): Packt Publishing
  • ISBN: 9781803241494