Build Reactive Websites with RxJS: Master Observables and Wrangle/

...

/

Introducing Rx Concepts

Introducing Rx Concepts

Let's look at some basic Rx concepts like variables, arrays, promises, and observables.

We'll cover the following...

Rx basics

It’s time for Rx basics. First, we need to figure out where observables stand in the greater context of the JavaScript landscape.

Variable

This is an example of a variable:

Press + to interact
let myVar = 42; 
console.log(myVar);

As you probably know, a variable contains a single value, and that value can be used immediately after declaration. Variables are pretty simple. On the other hand, we have arrays.

Array

This is an example of an array.

Press + to interact
//Array represents a collection of values
let myArr = [42, 'hello world', NaN]; 
console.log(myArr);

This array represents a collection of values. Like the humble variable, an array also contains its data at the moment of creation.

Promise

If all of programming just used the above two concepts, life would be pretty easy. Everything needed to run a program would be immediately available when the program started.

Unfortunately, there are times when the data the program needs isn’t immediately available. For instance, a web page might need to make an AJAX request to get information about the current user:

let user = getUserFromAPI(); 
doSomething(user);

Running this code results in a fireball of cataclysmic proportions or a stack trace. Either is likely though, it’s probably the stack trace. In any case, it doesn’t ...