Angular Mastery - State Management

This 3-day instructor led course is designed to help established Angular developers gain mastery over one of the biggest challenges in all user interface applications: State Management

After gaining a strong foundation on "thinking in Angular", and familiarity with the Angular abstractions, the next challenge is developing a sophisticated understanding of how state flows through an application, the categories of state, and challenges on keeping state "fresh" in your applications.

Buzzwords Covered

• Redux Store and/or Signal Store - how to decide which to use where
• Using the Redux Store and the Signal Store together
• Defining signals-based selectors for Redux Store data
• Redux messaging patterns and handlers (reducers, signal store methods)
• Structuring your application and state to avoid circular dependencies
• Keeping your components and directives "clean" and abstracting rules and data manipulation for better reliability and testing
• Defining and reigning in "Side Effects" and complex API integration scenarios, including race conditions, partial failures, and "transaction processing"
• Event Sourcing Application State
• Managing Observables, Promises, and Signals

Prerequisites

This course is for those that are very familiar with Angular, and the basics of state management. We will assume you have experience with:

• Standalone components/directives
• Providing Angular Services
• Signals and Signal-Based inputs

Objectives

Shared State

Our Angular applications are created to allow the users to accomplish things we want them to accomplish. Usually they will need "supporting data" to confidently make choices. This data often comes from "Shared Store" APIs, containing reference data. This data usually works as predicates in the user making decisions, but should always be treated as "suspect". State retrieved from an API, for example, could be out of date.

We will learn patterns and strategies for:

• Silent background refresh of data in a non-blocking way
• Messaging patterns from the world of distributed applications
• Conforming to "read only" reference data within our applications
• Getting "real" about caching and caching strategies with reference data
• Handling modes (including loading, and errors) with reference data.

Our primary source of shared state reference data is from HTTP API calls. We will learn patterns you can apply with:

• The Angular HttpClient
• A Redux-style "store" with @ngrx/store
• An exploration of the Angular Resource API, including resource, and httpResource.
• An introduction to the TanStack Angular Query library for having policies on data "freshness", reloading and validation.

User Server State

Some state from the server will be "owned" by the user and will be transferred to and from the server during the use of the application.

Concurrency and locking is still an issue with this data, so we will learn patterns and practices to safely work with user server state, building upon the Shared State practices above.

We will explore nuances with Authentication and Authorization, as well as server side-effect message design and validation, while emphasizing non-ui-blocking techniques.

Since user server state is almost always related in some way to Shared State, we will learn how to derive projections of the Shared state and User State to adequately inform the users of the decisions they've made and can make.

User Server State is almost always a reflection of the operations taken by the user over the life of the application and provides the mechanism through which we decide which affordances will be surfaced to the user during the use of the application. (For example, you can't schedule a second appointment during a timeframe you've already scheduled, you cannot initiate a return for an item that has already shipped - or whatever your business rules are).

Topics here will include:

• Modelling complex scenarios as workflows and sagas to accurately reflect the business process and minimize frustration.
• Techniques of modeling notifications of the status of an operation
  • Live notifications using Web Sockets
  • Historical notifications and history
  • Allowing the user to "retry" operations after fixing errors.
• We will also learn how to model familiar usages of applications that are missing from many web-based applications, including:
  • Undo/Redo
  • Dynamic UI for user "dashboards"
• Reacting to Identity changes

Our primary source of User Server State will be:

• Redux @NGRX/store and store features
• Signal Store @NGRX/signals and interacting with global redux store state.

User Application State

We will explore patterns for User Application State, which is state that is about the user interacting with the application during a session.

Topics include:

• Making the route the point of truth for application state
• Ephemeral User State
  • Preferences
  • Elevating state in the DOM especially for forms
  • Designing stateful user experience and minimizing frustration through validation errors
• When it is time to "lift" User Application State to User Server State

Our primary source for User Application State will be:

• Route Data and Resolvers
• Signal Store (@NGRX/signals)
• Local browser APIs (WebStorage, IndexDb)

Technical Requirements For Application State

Sometimes called "non-functional requirements", we will learn techniques for those things that happen "behind the scenes" in our application, including logging, observability, and "replayability" of user sessions.

In this section we will heavily address reliability issues in distributed applications, including:

• Gracefully degrading the functionality of our application for ephemeral outages (network, API access, etc.)
• How to create a specific set of requirements about reliability in your application without intruding on the user experience.
• Strategies for improving the apparent performance of your application including:
  • "Local First" data techniques, and work queues.
  • Service Workers for background synchronization and notifications
  • "Chunking" Angular assets for faster time-to-interactivity and continuous integration
• Techniques for invalidating cached data and assets in the client.