RxJS - Mastering Observables, Subjects and Operators

What is an Observable?

• A special function which returns many values

• Returns values at its own pace

• Can return values asynchronously or synchronously

• Can finish by entering a complete or error state

• Starts to execute when an observer subscribes to it

Observers

• A function that reacts to data pushed by an observable

• Takes the form of a simple callback

• Can optionally define handlers for complete and error events

• Rule of thumb: an observer is (usually) just a function

• Create an observable that pushes a list of user names to subscribers

• Create an observer that subscribes to our observable

• Create an observable which represents clicking on a UI button

What are Subjects?

• Like observables, but don’t start automatically when subscribed to

• Sort of like a combination of observable and observer

• Can have multiple subscribers

• Can have multiple sources of data

• Metaphor: A town square where the king’s messenger (the subject) is making a series of proclamations to anyone who is around to hear it (the subscribers).
* Applies to the default kind of subject, and also implies you are limiting who can access the subject’s next() function

Observables vs. Subjects
Observables

• Starts to execute as soon as anything subscribes to it

• Impossible for more than one function to listen to it

• Subscribing to it multiple times sets in motion multiple chains of events

• Giving – springs into action to accommodate subscribers

Subjects

• There’s nothing to execute

• Something else decides what data it will push and passes it to the subject by calling next

• Selfish - not really concerned with its subscribers, it just does its own thing

• Create a subject and add a subscriber

    – Note how no action automatically begins on subscribe

• Push data with next, note how subscriber can receive data

• Add multiple subscribers and verify that multiple observers can subscribe to a single subject

Behavior Subjects

• All the features of a Subject, but also…

    – Remembers the last thing that was pushed

    – When a new subscriber appears, they’re automatically pushed the more recent thing

• Combination of many RxJS features in one, convenient package

• Often used as a utility knife event source, i.e., rx-ng (Angular 2)

• Metaphor: A king’s messenger delivering proclamations to a town square, but he staples the more recent one he makes to the wall in the same spot.

Behavior Subject Demo

• Create a behavior subject and subscribe to it

• Push some data from the subject using next()

• Add more subscribers

    – Note how the new subscribers are apprised of the latest thing that was sent

• Work like behavior subjects, but where behavior subject rebroadcasts the one most recent event, replay subjects rebroadcast several of the

most recent events

• Useful if new subscribers need to “catch up”

• Useful if only the last X events are interesting, i.e., a message board displaying new activity from newest to oldest

What are Operators?

• Convenient tools for transforming data incoming from observables and for creating new observables

• Two varieties…

    – Instance operators for transforming or aggregating data (map, pluck, sum)

    – Static operators for making new observables (create, interval, fromArray)

Instance Operators

• Instance operators consume data from an observable stream, but never modifies the observable in question

• If you’ve ever used built-in array operators like .map or .filter, you already understand instance operators

Instance Operators Demo

• Create an observable which outputs a regular stream of numeric data

• Try various instance operators to see how the data is transformed

    – Note that instance operators never change the original observable

Static Operators

• Usually found as a property of Rx.Observable, i.e., create

• Generally return a new, specialized observable instance

• All convenience tools  (nothing you couldn’t implement yourself at the expense of lots of time and effort)

Static Operators Demo

• Create observables using static operators

• Note…

    – Each static operator produces an observable with different properties

    – Each invocation of a static operator returns a new observable

• Schedulers define an execution context for observables

• The most common use case is taking the outputs of an observable that are a mix of synchronous and asynchronous, and making them all async so they’re easier to deal with (so they work like promises)

• Schedulers are not created but available as properties of Rx.Scheduler

• Not something you will need to use too often

Executive Summary

• RxJS is a tool that makes unpredictable streams of incoming data

less hard to deal with

• It replaces callbacks and promises, both of which are pretty annoying

• It only has a few key features (observables, subjects) but many side-attractions that are useful but can make it seem more complex than it is

• RxJS results in more complexity in a small, simple project, but much less complexity in a large, interconnected projects

Challenge Task

• Create a TodoMVC application (a todo list)

• Manage all events through observables

• Manage the state through a BehaviorSubject

• examples: https://github.com/danielstern/TodoMVC