RxJS is a library for composing asynchronous and event-based programs by using observable sequences. 


rxjs

_Feels like magic._

It’s a beautiful feeling when technology works in mysterious, miraculous ways. So smooth! So effortless! So…

_Wait, that’s not right. What’s it doing? I don’t get it. Help!_

…until you encounter unexpected behavior. Good luck debugging magic.

To use technology to its fullest, you need to understand how it’s accomplishing the tasks set before it. 

This course de-mystifies RxJS. It feels like magic, but it’s also one of the most laborious technologies to learn in front-end web development. We’ll open up the internals to take an up-close look at how RxJS handles Async programming so smoothly.

Over 12 lessons and 31 minutes, you'll get a handle on:

- how RxJS pushes values from observables to subscribers, which take care of the output. 
- how operators handle all of the "in-between" operations where you can manipulate the values while they're still in-flight.
- the internals of operators and subscribers and how to customize operators to your specific needs.


Observables never run until you invoke them with `subscribe`. This also means that the values from the observable don't go anywhere unless you use a `subscriber`. A basic subscriber is either a function to handle the `next` value or an object with functions to handle `next`, `complete`, and `error` scenarios.

Create a Generic Subscriber in RxJS

The `Subscriber` class exposes a `_next` method which you can override to handle how the destination's `next` function will be called. This allows you to create your own variations of the `Subscriber` class to intercept what happens between the observable and the destination subscriber.

Extend Subscriber to Override `_next` in RxJS

Observable's `pipe` method is all about connecting a `source` to a `subscriber` through an operator. While you wouldn't normally manually invoke connect the pieces together the way this lesson does, it's important to understand how the internals work before working with the RxJS api.

Connect a Source to a Subscriber with RxJS `pipe`

The `lift` method on each source hides away the internals of RxJS so you can simply connect a `source` to the `subscriber` you're working with. The `lift` method take an object with a `call` function with `subscriber` and `source` arguments, then it's up to you how you want to connect them together.

Use `lift` to Connect a `source` to a `subscriber` in RxJS

With knowledge of extending `Subscriber` and using `source.lift` to connect a `source` to a `subscriber`, you can now create your own operators by writing functions that return a `source.lift` call. This lesson creates a simple "multiply" operator in RxJS.

Create a Reusable Operator from Scratch in RxJS

The most common scenario for creating custom operators is to reuse the built-in operators shipped with RxJS. You'll find yourself re-using `map`, `filter`, and others will solve most of the problems you come across.

Create Operators from Existing Operators in RxJS

While it's great to use the RxJS built-in operators, it's also important to realize you now have the knowledge to write them by yourself if needed. The `map` operator turns out to be a simple `MapSubscriber` which takes a function and applies it to the value passed to `next`.

Implement the `map` Operator from Scratch in RxJS

Instead of writing complex operators, it's usually best to write simple, single-purpose operators then chain them together when necessary. The `pipe` function takes functions as arguments, invokes each function with the value, then passes the returned result on to the next function.

Chain RxJS Operators Together with a Custom `pipe` Function using Array.reduce

Understanding sources and subscribers makes it much easier to understand what's going on with `mergeMap` under the hood. Where a typical operator invokes `destination.next` directly, `mergeMap` wraps `destination.next` inside of a new source/subscriber combo so there's an "outer" next and an "inner" next.

Implement RxJS `mergeMap` through inner Observables to Subscribe and Pass Values Through

`switchMap` is `mergeMap` that checks for an "inner" subscription. If the "inner" subscription exists, `switchMap` unsubscribes from that "inner" subscription which effectively "cancels" any pending pushes.

Implement RxJS `switchMap` by Canceling Inner Subscriptions as Values are Passed Through

Unlike `mergeMap` and `switchMap`, `concatMap` focuses on when "inner" subscriptions "complete" by using a "buffer". Each time `concatMap` receives a value, it adds each value to a "buffer", waits for previous "inner" subscription to `complete`, then invokes `next` with the next value from the "buffer".

Implement RxJS `concatMap` by Waiting for Inner Subscriptions to Complete

When subscribers create new "inner" sources and subscriptions, you run the risk of losing control of them when the outer subscriber unsubscribes. This is handled easily enough if you use the `add` method from the `Subscriber` class to add the "inner" subscription to the Subscriber.

Build Your Own RxJS Pipeable Operators

John Lindquist

Course Content