Introduction to RxJS

Brian Love

Software Architect @ Briebug

brianflove.com

twitter.com/brian_love

Demo Files

git clone git@github.com:blove/rxjs-intro.git

What is RxJS?

  • Javascript implementation of ReactiveX Library
  • Building asynchronous, modular, event-based apps
  • Streams subject matter through the app
  • Allows streams of data to be observed

Observer Design Pattern

What are Observables?

  • Implements Observer design pattern
  • Watches a subject for Notification that is emitted
  • Push notifications to Observer instances
  • Allows functional Array-style operators (e.g. map, filter, reduce, etc.)

From Promiseland

promise.ts

To Observableland

observable.ts

What are Notifications?

  • Containers that represent an event or value
  • Pushed through observables to observers
  • Also include metadata about the event or value, including the type of message:
    • next
    • error
    • completion

What are Observers?

  • Receives a Notification from an Observable
  • Managed by a Subscription
  • React to next, error and completion of observable

What are Subscriptions?

  • The link between an Observable and an Observer
  • Invoke unsubscribe() to stop listening to Notifications
  • Can add() child subscriptions
    • Child subscriptions are all unsubscribed when parent unsubscribe() method is invoked

Is this included in ES2016?

  • Not yet
  • RxJS provides ECMAScript Observable today
  • TC39 proposal is in stage 1 

What are Subjects?

  • Sources of notifications
  • Extends Observable
  • Have different behaviors

Dive into Subjects

subject.ts

async-subject.ts

behavior-subject.ts

replay-subject.ts

Unicast vs. Multicast

  • Each subscribed Observer owns an independent execution of the Observable
  • A Subject can multicast to multiple subscribed Observers

Dive into unicast vs multicast

observable-unicast.ts

subject-multicast.ts

Hot or Cold?

  • Observables may be either Hot or Cold
  • Cold is when the observable creates the source of events or values ("producer") only when subscribed to
  • Hot is when the observable closes around an already existing producer

Cold Observables

  • You have most likely already used them
  • The Http service in Angular returns cold observables
  • Subscribing to them more than once will create multiple instances of the producer
  • Multiple subscriptions to an Http observer result in multiple Http calls to the same endpoint!

Brrr

observable-cold.ts

Hot Observables

  • You may have already used them
  • The NGRX Actions observable is hot
  • Multiple subscriptions to actions$ process the same events from the same single source
  • Use .share() to make a cold observable hot

Yowza

observable-hot-1.ts

observable-hot-2.ts

Hot Observables

  • You may have already used them
  • The NGRX Actions observable is hot
  • Multiple subscriptions to actions$ process the same events from the same single source
  • Use .share() to make a cold observable hot

Why Unsubscribe?

  • Prevent memory leaks
  • You don't need to unsubscribe from:
    • HttpClient
    • ActivatedRoute

Subscription Management

  • Use AsyncPipe
  • Invoke unsubscribe() on Subscription
  • Use takeWhile() or takeUntil() operators

Unsubscribe

takewhile.ts

takeuntil.ts

Thanks

  • Jon Rista @ Briebug
  • Ben Lesh
  • Angular Community

What's Next?

  • Operators:
    • catchError()
    • concat()
    • debounceTime()
    • distinctUntilChanged()
    • filter()
    • first()
    • forkJoin()
    • map()
    • scan()
    • startWith()
    • switchMap()
    • take()
    • tap()
    • withLatestFrom()
  • Testing with Rx Marbles
  • Maybe more??

Introduction to RxJS

By Brian Love

Introduction to RxJS

Learn the basics of RxJS, Observables, Subjects, Notifications, Subscriptions, and more.

  • 1,163