Introduction to Blazor WebAssembly

Key Learning Areas

• Understand the Blazor Platform
• Build UIs with Razor Components
• Utilize Data Binding and Event Handling
• Compose Components
• Build Blazor Pages and Configure Routing
• Deploy a Blazor WebAssembly Application to Production
• Consume Server Data via REST APIs
• Unit Test Blazor Apps

Course Outline

Introduction

• What is Blazor?
• Blazor Hosting Models
• What is Blazor Server vs. Blazor WebAssembly?
• What is WebAssembly?
• Browser Compatibility
• Web Assembly vs. JavaScript
• How does .NET Core / C# run in a web browser?

Blazor WebAssembly Application

• Project Template
• Create a New Application
• Hosting Blazor WebAssembly with a ASP.NET Core MVC Server
• Configuration
• Dependency Injection
• Environments
• Logging
• Handling Errors
• Debugging WebAssembly

Razor Components and Data Binding

• What is a Component?
• Creating a Data Model
• Binding the Data Model to the HTML
• Passing Arbitrary Attributes
• Handling Events
• Manually Trigger State Updates and Re-rendering

Composing Razor Components

• Decompose a Component into Smaller Components
• One-Way Data Binding
• Two-Way Data Binding
• Pass Data from a Parent Component to a Child Component using Parameters
• Pass Data from a Child Component to a Parent Component using Event Callbacks
• Use Keys to Optimize Performance
• Use Refs to Access DOM Elements
• Razor Component Design Patterns
  • Parameters are Immutable
  • Lift State Up
  • Managing State in General

Razor Component Forms

• What is the purpose of Form?
• Collecting Data using a Form, Input, Select and Textarea Elements
• Explore Form Element Two-Data Binding
• Build Forms with the Blazor Edit Form Razor Component
• Explore the Concept of the Edit Context
• Use the Specialized Edit Form Controls
  • Input Text
  • Input TextArea
  • Input Select
  • Input Number
  • Input Checkbox
  • Input Date
• Applying Validation to the Form
• Decorating the View Model with Validation Attributes
• Code Custom Validation Attributes

Razor Component Pages

• What is the Page model?
• Differences between Razor Pages and Razor Components
• Using a Razor Component as a Page
• Explore the Router Component
• Configuring Page Routing
• Route to Components from Multiple Assemblies
• Using Route Parameters
• Using the Query String
• Applying Authorization to a Razor Component Tree

Using Server Data

• NET Core MVC Web API
• What is ASP.NET Core MVC?
• What is a REST API?
• What is an API Controller?
• Injecting the Http Client
• Exploring the Http Client
• Calling a REST API from a Blazor Component using the HttpClient

Interacting with JavaScript

• What is the JavaScript Interop?
• When is JavaScript needed?
• Synchronous vs. Asynchronous Calls
• How to call a JavaScript function from a Component
• How to call C# code from JavaScript
• Calling Static Methods
• Calling Instance Methods
• Organizing JavaScript Code within a Blazor WebAssembly App
• Explore JavaScript Ecosystem
  • Client-Side Libraries
  • NPM and Yarn
  • Webpack
  • Useful Libraries

Unit Testing

• What is unit testing?
• Principles of Unit Testing
  • Defining a Unit
  • Setup/Teardown
  • Testing in Isolation
  • Determining What to Test
  • Code Coverage
  • Test Frameworks
  • Stubs, Mocks and Spies
• xUnit
  • What is xUnit?
  • Testing Framework
  • Facts vs. Theory
  • Assertions
  • Integration with Visual Studio
• Razor Components
  • What Should be Tested on Razor Component?
  • What is bUnit?
  • Using bUnit and xUnit
  • Setup and define components under tests in C# or Razor syntax
  • Verify outcome using semantic HTML comparer
  • Interact with and inspect components
  • Trigger event handlers
  • Provide cascading values
  • Inject services
  • Mock IJsRuntime
  • Perform snapshot testing

Prerequisites

• C# programming experience
• HTML, CSS, and JavaScript development experience