Lifted

Operators

Architecture

.map(ball => makeSquare(ball))

Operators

map Operator

map(                ):           <R> {
  const        = this;
  return new           (     =>
          .subscribe(x =>
          .next(       (x))
  );
}
    project:(T) => R



                project



        source

    source





                        sink

      sink


                       Observable

             Observable




Operator Anatomy

5. Operator logic
1. Operator Arguments
2. Source Observable
3. Destination Observer
4. Result Observable
flatMap<T, R>(
  project:(value: T) => Observable<R>
): Observable<R>

flatMap

lift<T, R>(
  project:(Observer<R>) => Observer<T>
): Observable<R>

lift

class Observable {
  map(project) {
    return this.lift(
      new MapOperator(project));
  }
}

lifted map

class MapOperator {
  constructor(project) {}
  call(sink, source) {
    return source.subscribe(
      new MapObserver(sink, this.project));
  }
}

lifted map

class MapObserver {
  constructor(sink, project) {}
  next(x) {
    this.sink.next(this.project(x));
  }
}

lifted map

1. Predictable shapes
2. Ensures hot paths
   are taken
3. Can merge Observer +
   Subscription into one
4. Customize result
   Observable type

Advantages

of(  ,  ,  ,  )
.map(makeSquare)
.filter(isGreen)

Observable Chain

source
operator
of(...)
source
operator

RXJS 5 Operator Architecture

By ptaylor

RXJS 5 Operator Architecture

  • 1,521