Reactive Angular Course (with RxJs, Angular 17)

Build Angular 17 Applications in Reactive style with plain RxJs - Patterns, Anti-Patterns, Lightweight State Management

4.52 (5342 reviews)
Udemy
platform
English
language
Web Development
category
26,127
students
5.5 hours
content
Mar 2024
last update
$94.99
regular price

What you will 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

Description

This Course in a Nutshell

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.

This course comes with a running Github repository with the the finished code, as well as starting points for different sections of the course in case that you want to code along, which we recommend as its the best way to learn.

This course answers the common question: how far can we go in Angular while using only plain RxJs and nothing more, without introducing any state management library?

It turns out that the simple set of techniques taught in this course are very well suited for a wide range of applications, especially in-house built enterprise applications

In this course, you will learn exactly how to use RxJs to design and develop both the service and the view layers of your application, and you will understand both the advantages and the pitfalls of the reactive approach

Particularly when it comes to state management, it turns out that we can already go very far by leveraging only plain Angular and RxJs techniques, without using an additional state management library like for example NgRx

These simplified state management techniques are adequate and sufficient for a large range of applications,  and we believe that you should consider them first before thinking of adopting a full-blown state management solution

How far can you go with these techniques? That's what you will find out in this course.

Course Overview

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 aproach 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.

Table of Contents

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

What Will You Learn In this Course?

At the end of the course, you will feel comfortable designing and developing Angular applications in reactive style, by leveraging plain RxJs-only techniques You will know how to apply simplified reactive state management techniques to different common use cases, and you will understand the advantages and the limitations of this approach

You will be familiar with a series of commonly needed reactive design patterns, and you will also be familiar with a series of common pitfalls to avoid

Content

Getting Started - Why a New Package Manager ?

Reactive Patterns Angular Architecture Course Helicopter View
The Typescript Jumpstart Ebook
Setting Up Your Environment - Node, Npm & Git, Which IDE to Choose ?
How to Get the Most Out of the Questions and Answers Section ?
Testing Our Tools Installation - Installing The Course Code
The Yarn Package Manager - Why Should We Use It ?
Scaffolding an Application Using the Angular CLI
Setting Up A Small Application For Learning Reactive Patterns

Why Build Applications in Reactive Style ?

Observable Pattern Section Introduction
What Reactive Properties do Browser Events Have ?
Browsers Events and Reactive Programming - Another Important Similarity
Custom Application Events, the Observer Pattern - How Are They Related ?
Building An Application Based on a Custom Event Bus
Implementing a Global Event Bus From Scratch
Finishing the Implementation of a Global Event Bus - Its That Simple
Using The Global Event Bus To Broadcast Application Data
Improve Global Event Bus - Add Support To Different Types of Application Events
An Application Implemented in Non Reactive Style - What Does It Look Like ?
Adding Features to An Event Bus Application - Complexity Breakpoint Reached ?
Application Starts Not To Scale In Complexity - Who Owns Which Data ?
Only One More Feature - Learn Why The Application is no Longer Maintainable

The Key Concept of Reactive Programming - The Observable Pattern

Introducing the Observable Pattern
Building Our Program Around Observable Data Streams
A First Benefit of Building Asynchronous Applications in Reactive Style
Starting To Tackle A Second Architectural Issue
Implementing Our First Observable - An Unexpected Issue Occurs
Fixing Our Observable Implementation, Introducing a New Pattern
Is The Centralized Store a Reactive Pattern ?
Implementing Add Lesson - How To Ensure Encapsulation of Store Data
Refactoring Toggle And Delete Lesson - Avoiding Data Mutation On The View Layer
Application Working - Review Of The Benefits of Using a Reactive Approach
The Store And The Observable Patterns - How Are They Related ?
Introducing The RxJs Library - A Simple Explanation
Refactoring Our Application To Use RxJs
Introducing BehaviorSubject - When To Use It ?
Observable Pattern Conclusion And Introduction To Reactive Patterns Section

Reactive Patterns Catalog - Stateless Observable Services

Switch Branches - A Running Application With a Firebase Backend
See Firebase Hot Observables In Action - Review Of Router Configuration
An Application Written in Imperative Style - What Does It Look Like ?
Learn An RxJs Anti-Pattern While Reviewing the Imperative-Style Application
Introducing The Stateless Observable Service Pattern
Designing And implementing The API of a Stateless Observable Service
Separating The View and The Service Layer With An Observable-based API
Service Layer API Design - Short-Lived or Long-Lived Observables ?
Refactoring a Component From Imperative To Reactive Style

Smart vs Presentational Components Part I

Splitting Mixed Responsibility Component Into Smart + Presentational Components
Smart vs Presentational Components - What Are the Different Responsibilities ?

Observable Data Services

Observable Data Services - Introducing a New Refactoring Starting Point
Learn What Use Cases And Problems We Will Be Covering In This Section
Writing Our First Observable Data Services - API Design
Implementing The Login Functionality Using The User Observable Data Service
Implementing The User Service - Notice The Similarities
Redefining The API Of The User Observable Data Service
Observable Data Services - Conclusion and What's Next ?

Deeply Nested Smart Components / Component Design and On Push

Avoiding the RxJs Nested Subscribe Anti-Pattern
Identifying a Common Design Problem
Fixing the Event Bubbling Design Issue
Making Deeply Nested Smart Components Work With OnPush Change Detection

Implementing a Data Table Pagination Service

Switching Branches - Introducing a New HTTP Backend
Implementing the Lessons Pager Service - How to Design a Pagination Service
Implementing a Pager Service - Loading Data From The Backend
Finishing The Implementation Of The Data Pager Service - Whats Next ?
The Local Service Design Pattern - Leveraging the Angular DI System

The Master Detail Design Pattern With Cached Master Table

Switching Branches - The Master Detail Design Pattern With Cached Master Table
Master Detail Implementation - Implementing The Master Part
The Master Detail Pattern - Implementing The Detail Part
Master Detail With Cached Master Table Conclusion & How To Avoid Memory Leaks

Error Handling In Reactive Applications

Error Handling In Reactive Applications - Avoid This Pitfall While Using Subject
26 Implementing Error Handling While Using Observable Data Services
Implementing an Error Handling System - The Messages Service
Implementing an Error Handling System - The Messages Component
Local Services And Error Handling - What's Next ?

Router Data Pre-Fetching, Loading Indicator and Container Components

Switch Branches - Router Data Pre-Fetching And Loading Indicator
Implementing a Router Data Resolver - Introducing Typescript Tuple Types
Data Resolver Implementation - Advanced Use Of The RxJs switchMap Operator
Introducing A New Type Of Component - Container Components
Implementing A Router Loading Indicator

Leveraging Reactive Forms - Draft Pre-Saving

Switching Branches - Using Reactive Forms To Pre-Save a Form Draft
Reactive Forms - Draft Data Saving Implementation

Conclusion and Course Summary

Other Courses
Bonus Lecture: Learn More About The Angular University And My YouTube Channel
Conclusion and Course Summary

Screenshots

Reactive Angular Course (with RxJs, Angular 17) - Screenshot_01Reactive Angular Course (with RxJs, Angular 17) - Screenshot_02Reactive Angular Course (with RxJs, Angular 17) - Screenshot_03Reactive Angular Course (with RxJs, Angular 17) - Screenshot_04

Reviews

Luís
October 23, 2023
The course delivered exactly what I expected, more in depth knowledge about RxJs and also showed me a few design patterns. It was overall very well structured.
Dariusz
September 24, 2023
Well delivered lecture with no major errors. Very good reference to design patterns. Practical examples that can be applied to future work.
Petyo
September 23, 2023
The course is for beginners to intermediate. The style of teaching is good, but if you have more previous experience with Angular and RxJs then probably this course is not for you.
Vladislav
September 15, 2023
The course teaches you very good patters used with RxJs that you will need in pretty much every project. I highly recommend this course if you are new to RxJs and don't know what its full potential is. I would have loved to see more complex examples instead of simple examples that don't use complicated chains of Observables and Pipes.
Pierre
September 10, 2023
Gran curso para aprender el funcionamiento básico de los observables y como usarlos con un servicio API y administrar el state de la mejor manera posible usando patrones de diseño. Me ha gustado mucho el curso porque me ha ayudado a reforzar y consolidar mis conocimientos sobre Angular y RxJs.
Amit
September 6, 2023
Working in Angular for the last few years, I still learned a lot of useful information and techniques in this course.
L
September 5, 2023
Very pleased to take a class from an instructor who speaks the CS language! Such a huge difference in terms of delivery from many, many courses out there on the web. I've just enrolled in another class of Angular University! Thank you, Vasco, please keep it up!
KUMARSANU
September 5, 2023
Amazing course for brush up of angular features like shared services, light weight state managements, rxjs functions and its uses, observables and its subsscriptions
Jerrid
August 30, 2023
So far it has been great but we haven't really delved into much more than setting up our dev environment yet. I'm excited to see what comes next.
Benny
August 22, 2023
Loading subscriber was effectively handled to display the loading indicator. And keeping a different a copy of loading service class is new to me. Totally a worth learning. Thank you
Luff
July 13, 2023
Important concepts very well explained along with good examples. I feel like I learned a lot about the reactive programming pattern using observables and I could already successfully apply this knowledge :) Thanks a lot!
Kiran
April 16, 2023
Looking at video #23... If the courses store is a store because of the BehaviorSubject, are the Loading and Messages services also stores?
Marina
April 4, 2023
The local server does not work, so it is impossible to know if what we do works or not. The course is well explained, and the content very good in my opinion. It would be great if we could try it.
Phillip
March 23, 2023
Good demonstration of practical use cases for RxJs in Angular. He presents an overview of various design patterns and reasons for using them. Worth it!
Hadi
March 20, 2023
It is an interesting course about how can make a reactive project. But it should be considered it does not cover most of the RxJs's useful operators like concatMap, mergeMap, swithMap or etc.

Charts

Price

Reactive Angular Course (with RxJs, Angular 17) - Price chart

Rating

Reactive Angular Course (with RxJs, Angular 17) - Ratings chart

Enrollment distribution

Reactive Angular Course (with RxJs, Angular 17) - Distribution chart

Related Topics

1123098
udemy ID
2/22/2017
course created date
8/16/2019
course indexed date
Bot
course submited by