RxJS Beyond the Basics: Creating Observables from scratch

38 minutes

There are plenty of introductions to RxJS, but few resources that take you deep into the library, providing an accurate understand of what each piece performs.

In this course we will gain intermediate knowledge of RxJS, focusing on one aspect: how to create Observables. We will see how Observables compare to functions, how they compare to ES6 generators, what are the empty(), throw() and never() Observables, and other static factories that help in making Observable sequences.

Start following this course if you have a superficial understanding of RxJS, but want to gain confidence in using it.

If you're new to RxJS, we highly recommend this Async JS course from Jafar Husain to get a solid intro to the concepts. From there, you can watch this Introduction to Reactive Programming using RxJS, and you will be prepared for this course!

pro-course-rss-logo

PRO RSS Feed

Let's learn RxJS

Observables are almost like Functions

P

Observables (push) compared to generator functions (pull)

P

Observables can throw errors

P

Observables can complete

P

Creation operator: of()

P

Creation operators: from, fromArray, fromPromise

P

Creation operators: fromEventPattern, fromEvent

P

Creation operators: empty, never, throw

P

Creation operators: interval and timer

P

Creation operator: create()

P

Returning subscriptions from the subscribe function

P

Observables are the foundation in RxJS

rx tutorial about Let's learn RxJS

Let's learn RxJS

1:00 rx

This lesson is to kickstart our course on RxJS Observables and their operators. Know what is the purpose of this series and which RxJS version we will use while learning.

rx tutorial about Observables are almost like Functions

Observables are almost like Functions

6:43 rx PRO

This lesson introduces the concept of an Observable. We will see how similar it behaves to a function and what is the fundamental difference between them.

rx tutorial about Observables (push) compared to generator functions (pull)

Observables (push) compared to generator functions (pull)

3:21 rx PRO

Observables are almost like functions, but allow you to return many values. There is another concept in JavaScript (ES6), called Generator Functions, which do something very similar. In this lesson we will see what Observables and Generators have in common, and how they differ.

rx tutorial about Observables can throw errors

Observables can throw errors

1:39 rx PRO

Whenever we are writing code, we need to remember that things may go wrong. If an error happens in a function, that error will be thrown. Errors can also happen in Observables, and in this lesson we will see what is the API for throwing and catching them.

rx tutorial about Observables can complete

Observables can complete

1:48 rx PRO

The Observer object has the functions next() and error(). In this lesson we will see the other (and last) function available on observers, complete(), and its purpose.

rx tutorial about Creation operator: of()

Creation operator: of()

2:06 rx PRO

RxJS is a lot about the so-called "operators". We will learn most of the important operators, one by one. In this lesson, we will see our first creation operator: of().

rx tutorial about Creation operators: from, fromArray, fromPromise

Creation operators: from, fromArray, fromPromise

3:41 rx PRO

The of() operator essentially converted a list of arguments to an Observable. Since arrays are often how we structure list of things in JavaScript, we should have a way of transforming arrays into Observables. This lesson teaches how you can convert from Arrays to Observables, from Promises to Observables, and from Iterators to Observables.

rx tutorial about Creation operators: fromEventPattern, fromEvent

Creation operators: fromEventPattern, fromEvent

3:49 rx PRO

Besides converting arrays and promises to Observables, we can also convert other structures to Observables. This lesson teaches how we can convert any addEventHandler/removeEventHandler API to Observables.

rx tutorial about Creation operators: empty, never, throw

Creation operators: empty, never, throw

2:48 rx PRO

This lesson introduces operators empty(), never(), and throw(), which despite being plain and void of functionality, are very useful when combining with other Observables.

rx tutorial about Creation operators: interval and timer

Creation operators: interval and timer

4:11 rx PRO

It is quite common to need an Observable that ticks periodically, for instance every second or every 100 miliseconds. We will learn about operators interval() and timer(), both of which are similar to setInterval() in JavaScript.

rx tutorial about Creation operator: create()

Creation operator: create()

3:03 rx PRO

We have been using Observable.create() a lot in previous lessons, so let's take a closer look how does it work.

rx tutorial about Returning subscriptions from the subscribe function

Returning subscriptions from the subscribe function

3:14 rx PRO

So far, when writing these subscribe functions, we haven't returned anything. It is possible return an unsubscribe function from a subscribe function. In this lesson we will see how to allow observers to subscribe and unsubscribe from an Observable.

rx tutorial about Observables are the foundation in RxJS

Observables are the foundation in RxJS

0:54 rx

Let's conclude this course by reviewing what an Observable is: a way of representing many values being delivered in push-style from a lazy producer to a consumer. Let's also see how the Observable alone is not everything in RxJS. It serves as the foundation to operators, which are the most useful feature of RxJS.

Presented by:

André Staltz

Andre is a user interface engineer at Futurice, with extensive knowledge
in reactive programming. He is a contributor to RxJS, has built
RxMarbles, written an introduction to reactive programming which went
viral, and collaborated to design ReactiveX.io. His current mission is
to redefine how we understand and structure user interfaces with the
reactive web framework Cycle.js.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?