RxJS 7 and Observables: Introduction

Explore the concept of streams and observables, learn to create and subscribe to them with an observer, and use marble diagrams and notification types to understand behavior.

Explore how observables form streams where data arrives over time and emitted values can be infinite, contrasting with arrays and highlighting reactive programming through subscriptions.

Discover how an observable emits next values through a subscriber, connect an observer with a next handler, and run the callback via subscription to produce values like Alice and Ben.

Create and subscribe to an observable, handle next notifications with an observer, and manage subscriptions with unsubscribe to prevent memory leaks, using setTimeout for timing.

Subscribing the same observable multiple times creates independent executions, with each subscription running the observable logic and emitting Alice, Ben, and Charlie to its observer.

Explore marble diagrams to visualize the notifications emitted by observables and understand their behavior across subscription scenarios. Use these diagrams to clarify observable concepts in this course.

Explore the three marble notifications in RxJS observables: next emits values, error signals a one-time failure with details, and complete marks the end of the subscription lifetime.

Explore why emitting after an error or completion violates the RxJS observables model. Observe that errors or completions end the subscription and prevent further next values.

Explore how marble diagrams act as approximate representations of emitted values, using JavaScript objects, letters, and numbers to illustrate operator logic, with colors and ASCII forms for readability and tests.

Explore marble diagrams to infer observable emission sources, from interval counter and HTTP request to mouse moves and text input, showcasing RxJS's unified stream tools.

Explore marble diagrams to visualize rxjs operators, using rxmarbles.com and the RxJS docs to compare current behavior with older rxjs 5.

Explore the theory behind observables as a data stream, learn how to create and subscribe to observables, and manage subscriptions with observers and marbled diagrams to understand notification types.

Practice building and managing RxJS observables by creating new observables and handling subscribe and unsubscribe. Explore the full subscription lifecycle, from start through next emissions to error, complete, and teardown.

Explore the subscription lifecycle in RxJS, from observable execution to next notifications and completion. Understand teardown, unsubscribe, and how errors or completions stop emissions and clean up resources.

Create an empty observable with the new Observable constructor, import from RxJS, and subscribe to confirm it emits no values. The subscribe call immediately runs the observable logic, not asynchronous.

Explore RxJS 7 and observables by emitting a single value 'Alice' synchronously after subscribing, and log each next notification with a subscribe callback.

Emits two more values: Alice and Ben immediately after subscribing, then Charlie after a two-second delay, using setTimeout, and demonstrates synchronous and asynchronous notification handling in rxjs observables.

Demonstrate emitting a complete notification after the value 'Charlie', handling completion in an observer, and using teardown logic to clean up or cancel ongoing work upon unsubscribe.

Learn to emit an error notification four seconds after subscription using setTimeout and handle it in the observer's error method, including a JavaScript error object and teardown execution.

Examine the observer object with next, error, and complete handlers, then explore emitting after the subscription ends when order is mixed.

See how in RxJS 7 an error ends the subscription, preventing later next or complete emissions from reaching the observer, while teardown runs after handling the error.

Unsubscribe to stop the endless interval emissions and implement teardown logic in a custom observable, ensuring proper cleanup with clearInterval and memory leak prevention.

Explore the observable lifecycle from subscribing to teardown, including emitting notifications, handling them with observer functions, and ending on error, complete, or unsubscribe to prevent memory leaks.

Explore cold observables, where each subscription triggers independent emissions and HTTP requests, illustrated by multiple subscriptions calling an ajax observable to fetch unique random names.

Subscribe to a hot observable by connecting to an external source, such as a DOM click event, and multicast the events to all subscriptions.

Contrast cold and hot observables by showing cold data generation per subscription and hot multicast from a common source. Cite examples such as HTTP requests, DOM events, and subjects.

Explore the differences between hot and cold observables, showing how cold observables emit new data on each subscription while hot observables multicast an existing source to active subscribers.

Explore RxJS creation functions that simplify observable creation beyond the new observable pattern, including of, from, fromEvent, interval, timer, forkJoin, and combineLatest, and distinguish creation operators from pipeable operators.

Explore the rxjs of creation function, which emits multiple values and completes when subscribed, and compare it to an observable built with the new Observable constructor and a custom ourOwnOf.

Convert arrays, promises, and iterables into observables with the from function, emitting array values as next notifications, and resolving or rejecting promises as next or error in a cold observable.

Create observables from DOM events using fromEvent, subscribe to click events, handle typing with MouseEvent, and implement teardown to unsubscribe and prevent memory leaks, comparing with a custom observable.

Explore how the RxJS timer creates an observable that waits two seconds, emits the value 0, and completes, with teardown logic to prevent memory leaks during subscription and unsubscription.

Explore how RxJS 7's interval creates a cold observable that emits a counter every second, mirroring setInterval, with per-subscription instances and unsubscribe control.

ForkJoin accepts an array of observables and subscribes to them; it waits for all to complete and then emits an array of the latest values, enabling parallel HTTP calls.

Simulate an http-like forkJoin scenario where one request errors, causing forkJoin to fail and end subscriptions. Review teardown behavior as subscriptions cancel and teardown logic runs, ensuring proper cleanup.

Combine latest emits the latest values from all input observables whenever any source changes. It tracks two inputs with fromEvent, updates the result in real time, and propagates errors.

Explore RxJS creation functions and operators, learning to create observables without the new Observable constructor using of, from, timer, interval, forkJoin, and combineLatest, including promise conversion and external event sources.

Learn how pipeable operators transform observable notifications in RxJS 7, using filter, map, tap, debounceTime, catchError, and flattening operators like concatMap, switchMap, mergeMap, and exhaustMap.

Explore how pipeable operators turn a source observable into a new, extended observable by transforming notifications in a stacked pipeline before they reach the observer, starting with the filter operator.

Explore the map operator in RxJS 7, transforming each emitted value by doubling or mapping ajax responses, and applying it with pipe to simplify data extraction from HTTP requests.

Learn how the tap operator acts as a spy to observe notifications at each stage of an RxJS pipeline without altering them, using filter, map, and of to debug.

Explore the debounceTime operator in RxJS 7, debouncing incoming values by two thousand milliseconds and reemitting the latest value to reduce unnecessary recalculations and HTTP requests.

CatchError catches an error from a source observable and switches to fallback observable, preserving values. Emit a fallback value with the of function, or use EMPTY to complete without data.

Flattening operators like concatMap, switchMap, mergeMap, and exhaustMap create new inner subscriptions for each next notification, enabling server queries on input changes while handling errors.

Demonstrates the concatMap flattening operator by mapping a source observable to inner observables, yielding 1 and 2 while discarding inner completions and using of to create inner streams.

Explore rxjs 7 observables and flattening with concatMap to create dynamic http requests via fromEvent, map, and ajax, querying the random data api from user input and logging responses.

Examine error handling in RxJS 7 flattening operators, focusing on concatMap behavior, inner errors reemitting to output, and masking errors with catchError and EMPTY without breaking the stream.

Apply catchError directly to the inner ajax observable to convert errors into complete notifications, so concatMap's inner completes without emitting to the outer subscription, keeping the main data stream alive.

Explore RxJS flattening operators and concurrency, focusing on concatMap, which queues values and handles one inner subscription at a time to prevent memory leaks and race conditions in HTTP requests.

SwitchMap cancels the previous inner observable and switches to the latest one, delivering the latest result, but unsubscribed HTTP requests may still reach the server and cause out-of-order data.

Explore the mergeMap flattening operator. It runs multiple inner subscriptions concurrently and emits values as soon as any inner observable emits, warning about memory leaks if inner subscriptions don't complete.

Compare the RxJS flattening operators concatMap, switchMap, and mergeMap, highlighting how they handle concurrency, order, and memory leaks; learn when to use each, starting with concatMap.

Explore pipeable operators in RxJS to create new observables with extra logic, including filtering, mapping, tap for debugging, debouncing for performance, catch errors with a fallback source, and flattening operators.

Explain how a Subject multicasts the values to multiple observers, acting as both an observable and an observer, with subscribe, next, error, and complete, plus the BehaviorSubject variant.

Explore how multicasting in RxJS uses a hot observable and a subject to broadcast next notifications to multiple subscribers, turning a subject into a shared event emitter.

Examine how the subject acts as both an observable and an observer, enabling subscriptions and multicast emissions as a hot observable, with combineLatest and flattening operators.

Explore how a subject multicasts values to active subscriptions using next and subscribe, with fromEvent, an emit button, and awareness of complete and error notifications.

Learn how BehaviorSubject stores an initial value, memory, and multicasts updates to subscribers, unlike a regular Subject. See how to access the latest state with value and withLatestFrom.

Explore streams and how data is emitted, subscribe to observables, and react with observers. Learn about cold versus hot observables, creation functions, pipeable operators, and subjects that multicast notifications.