RxJS by Example: Part 1
Through example, we come to understand the definition of an Observable as a collision of a Promise and an Iterator (Array).
Right now, I am happy using Redux (state management) and Promises (handling asynchronous events) in JavaScript projects. At the same time, a recent opportunity has gotten me to think about native (Android and IOS) development. While I can likely use React Native to leverage my JavaScript approaches, I wondered if the native platforms offered anything comparable; searches turned up RxJava and RxSwift.
So, figured I would first learn the reactive extensions pattern using JavaScript; using RxJS. Having seen presentations on RxJS and skimmed some tutorials, I often find myself getting tangled up with their esoteric approach. Thought to document my learning RxJS through a series of examples.
In order to focus just on RxJS, I opted to write all my examples with Node.js and Yarn. To get started with them, download the repository, extract the folder and run the following command from it:
yarn installAll the examples are in the src directory and transpiled into runnable code the dist directory using the command (from the project’s root folder).
yarn run babel src -d distTo run any particular example, simply use commands like (from the project’s root folder).
node dist/hello-world.jshello-world
Given an array of numbers [1, 2, 3], we use normal JavaScript Array operations and then RxJS to transform and log them to the console as follows:
Normal
1 + !!!
2 + !!!
3 + !!!
RxJS
1 + !!!
2 + !!!
3 + !!!/* eslint no-console: "off" */
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/from';
import 'rxjs/add/operator/map';const myArray = [1, 2, 3];// NORMAL
console.log('Normal');
const myNewArray = myArray.map(o => `${o.toString()} + !!!`);
myNewArray.forEach(o => console.log(o));// RXJS
console.log('RxJS');
const myObservable = Observable.from(myArray).map(o => `${o.toString()} + !!!`);
myObservable.subscribe(o => console.log(o));
From its behavior, an Observable, e.g. myObservable, is like an Array; it has a notion of an order.
asynchronous
Given an asynchronous operation, we log its result to the console, e.g,. this example outputs the following after three seconds.
RxJS
Normal/* eslint no-console: "off" */
import { Observable } from 'rxjs/Observable';// NORMAL
const myPromise = new Promise((resolve) => {
setTimeout(() => resolve('Normal'), 3000);
});
myPromise.then(o => console.log(o));// RXJS
const myObservable = Observable.create((observer) => {
setTimeout(() => {
observer.next('RxJS');
observer.complete();
}, 3000);
});
myObservable.subscribe(o => console.log(o));
From its behavior, an Observable, e.g. myObservable, is like an Promise; it provides a convenient way of working with asynchronous events.
combined
Given three asynchronous operations, we perform them back to back; logging their output to the console with the results (each pair of lines appearing one second after the previous pair).
RxJS A
Normal A
RxJS B
Normal B
RxJS C
Normal C/* eslint no-console: "off" */
import { Observable } from 'rxjs/Observable';// NORMAL
const asyncA = () => new Promise((resolve) => {
setTimeout(() => resolve('Normal A'), 1000);
});
const asyncB = () => new Promise((resolve) => {
setTimeout(() => resolve('Normal B'), 1000);
});
const asyncC = () => new Promise((resolve) => {
setTimeout(() => resolve('Normal C'), 1000);
});
asyncA()
.then(o => console.log(o))
.then(asyncB)
.then(o => console.log(o))
.then(asyncC)
.then(o => console.log(o));// RXJS
const myObservable = Observable.create((observer) => {
setTimeout(() => {
observer.next('RxJS A');
setTimeout(() => {
observer.next('RxJS B');
setTimeout(() => {
observer.next('RxJS C');
observer.complete();
}, 1000);
}, 1000);
}, 1000);
});
myObservable.subscribe(o => console.log(o));
From its behavior, an Observable, e.g. myObservable, is like a Promise chain; it, however, is implemented as a single object.
Definition
With these examples in mind, let us look at the definition:
— RxJS
As we saw through the examples, an Observable is a collision between a Promise and an Iterator (Array). Given how important these two concepts are separately, I have an sense that their collision is going to be important.
Next Steps
In the next article, RxJS by Example: Part 2, we dig into the core concepts of RxJS.
