Reactive Angular Course (with RxJs). Build Angular Applications in Reactive style with plain RxJs – Patterns, Anti-Patterns, Lightweight State Management
This course is a catalog of commonly used design patterns (and some anti-patterns) that every Angular developer should know. The goal of the course is to teach you how to comfortably design and develop applications in Angular in Reactive style using just plain RxJs, and nothing more.
We are going to start our course by taking a small Angular application that is written in imperative style, and we are going to talk about some of the problems of that approach. Then, we are going to refactor the application and explain step-by-step how to implement it in reactive style instead.
We will explain in detail every RxJs operator that we come across in this course, the first time that we need each operator.
We are going to start with a fully stateless solution first, but later we are going to improve the user experience by applying some simple RxJs-only state management techniques. We are going to use these patterns in order to handle some of the data of the application, as well as the user authentication profile.
The key element needed to implement lightweight state management is RxJs behavior subjects so we will cover those in detail in the course. We will also provide step-by-step reactive style solutions for common UI functionality like loading indicators or error messages.
Reactive Angular Course (with RxJs) Description
Angular (beginner level)
Some basics of RxJs
What you’ll learn
Code in Github repository with downloadable ZIP files per section
Learn Lightweight State Management techniques (RxJs only)
Understand the Core Principles of Reactive Programming in general
Know how to build Applications in Angular in Reactive Style using RxJs
Learn a Catalog of RxJs Application Design Patterns and Anti-Patterns
This course covers the following topics:
- Review of an application written in imperative style
- Refactoring into stateless reactive style, understanding the benefits
- Smart vs Presentational Components
- Stateless Observable Services
- The shareReplay Operator
- Stateless UI updates (without state management)
- Introduction to RxJs Subjects and BehaviorSubject
- Decoupled component communication using shared observable services
- Using Observables to have components interact at different levels of the component tree
- Error Handling and error messages in reactive style
- Loading Indicators in reactive style
- Improving user experience with lightweight RxJs stores
- Optimistic UI updates
- Managing User Authentication state with plain RxJs
- Local vs Global Services
- Master Detail with cached master table in reactive style
- The Single Data Observable Pattern: Avoiding nested ng-component tags
- Refactoring a reactive application to OnPush change detection
- Conclusion and key takeaways
Who this course is for:
- Web developers looking to learn how to build Angular Applications in Reactive Style
- Angular Developers looking to learn lightweight state management techniques (using RxJs only)