Web Development with Blazor: An in-depth practical guide for .NET developers to build interactive UIs with C#, 2nd Edition

by Jeff Fritz, Jimmy Engstrom

Length: 360 pages
Edition: 2
Language: English
Publisher: Packt Publishing
Publication Date: 2023-03-16
ISBN-10: 1803241497
ISBN-13: 9781803241494
Sales Rank: #451215 (See Top 100 Books)

0 ratings

Print Book Look Inside

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.

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

.NET ASP.NET C & C++ Windows Programming C#Microsoft Programming Programming Programming Languages

To access the Link, solve the captcha.

How to download source code?

1. Go to: https://github.com/PacktPublishing

2. In the Find a repository… box, search the book title: Web Development with Blazor: An in-depth practical guide for .NET developers to build interactive UIs with C#, 2nd Edition, sometime you may not get the results, please search the main title.

Web Development with Blazor: An in-depth practical guide for .NET developers to build interactive UIs with C#, 2nd Edition

Key Features

Book Description

What you will learn

Who this book is for

How to download source code?

Julia as a Second Language

Robotics at Home with Raspberry Pi Pico: Build autonomous robots with the versatile low-cost Raspberry Pi Pico controller and Python

Getting Started with Forex Trading Using Python: Beginner's guide to the currency market and development of trading algorithms

Frontend Development Projects with Vue.js 3: Learn the fundamentals of building scalable web applications and dynamic user interfaces with Vue.js, 2nd Edition

Kubernetes Patterns: Reusable Elements for Designing Cloud Native Applications, 2nd Edition

Animating SwiftUI Applications: Create visually stunning and engaging animations for iOS with SwiftUI