Introduction to RxJS

Brian Love

Software Architect @ Briebug

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 instancess
  • 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

Marble Diagrams

Marbles for Testing

  • Marbles provide a simple way to describe observable streams.
  • They can be used to model and test observables
  • They can also be used to model and test subscriptions
  • Uses a scheduler to provide timing
  • Timing is done frame-by-frame
  • Each character in a marble is 10 frames
    • A frame is a virtual "millisecond" or "clock cycle" of the scheduler

Marble Observable Syntax

  • The first character is "zero frame"
  • A dash "-" represents the passage of 10 frames
  • A pipe "|" indicates completion (.complete())
  • A hash "#" indicates error (.error())
  • A carrot "^" indicates subscription point in a hot observable
  • Any other character indicates emitted value (.next())

Marble Subscription Syntax

  • Also uses the scheduler to provide timing
  • Each character in a marble is 10 frames
  • A dash "-" represents the passage of 10 frames
  • A carrot "^" indicates subscription
  • A bang "!" indicates unsubscription

Emit a value and complete

  • A dash "-" represents the passage of 10 frames
  • The letter "a" represents our first emitted value
  • A pipe "|" represents completion
  • The below observable is 60 frames

 

cold("--a--|")

Emit a value and error

  • A dash "-" represents the passage of 10 frames
  • The letter "a" represents our first emitted value
  • A pipe "#" represents error
  • The below observable is 60 frames

 

cold("--a--#")

Multiple values & complete

  • A dash "-" represents the passage of 10 frames
  • The letter "a" represents our first emitted value
  • The letter "b" represents our second emitted value
  • The below observable is 80 frames

 

cold("--a-b--|")

With Subscription

  • A dash "-" represents the passage of 10 frames
  • The letter "a" represents our first emitted value
  • A carrot "^" represents the point of subscription
  • The letter "b" represents our second emitted value
  • The below observable is 90 frames
  • The below subscription starts at frame 50 and is aligned with the observable stream
hot("--a-^-b-|")

    "    ^---!"

Demo Marbles Test

marbles.js

Thanks

  • Jon Rista @ Briebug
  • Ben Lesh
  • Angular Community

Me

  • http://brianflove.com
  • twitter.com/brian_love
  • github.com/blove

deck

By Jon Rista

deck

  • 698