The Array forEach method

4:03 rxjs

Most JavaScript developers are familiar with the for loop. One of the most common uses of the for loop is to iterate through the items in an array. In this lesson, we will learn how to replace the for loop with the Array's forEach method - and shorten your code in the process.

The Array map method

3:02 rxjs

One very common operation in programming is to iterate through an Array's contents, apply a function to each item, and create a new array containing the results. For example, let's say you wanted to loop through an array of stock objects and select only the name for display on screen. In this lesson we will demonstrate how to use the Array's map method to easily perform this operation with less code than a loop would require.

The Array filter method

4:42 rxjs

One very common operation in programming is to iterate through an Array's contents, apply a test function to each item, and create a new array containing only those items the passed the test. For example, let's say you wanted to loop through an array of stocks and select only those with the price larger than a certain value. In this lesson we will demonstrate how to use the Array's filter method to easily perform this operation with less code than a loop would require.

Chaining the Array map and filter methods

3:05 rxjs

Both map and filter do not modify the array. Instead they return a new array of the results. Because both map and filter return Arrays, we can chain these functions together to build complex array transformations with very little code. Finally we can consume the newly created array using forEach. In this lesson, we will learn how to build nontrivial programs without using any loops at all.

Create an Array concatAll method

4:17 rxjs

In addition to flat Arrays, programmers must often deal with nested Arrays. For example let's say we have an Array of stock exchanges, each of which is represented by an array of all the stocks listed on that exchange. If we were looking for a stock that matched a certain criteria, we would first need to loop through all of the exchanges, and then all of the stocks within.

In these situations, most developers would nest two loops. However in this lesson we will write a new Array function concatAll which will automatically flatten nested arrays buy one dimension. This will remove the need to ever use a nested loop to flatten a nested array.

Introducing the Observable

11:59 rxjs

In this lesson we will get introduced to the Observable type. An Observable is a 'collection that arrives over time'. Observables can be used to model events, asynchronous requests, and animations. Observables can also be transformed, combined, and consumed using the Array methods we learned in the previous lessons. We can write powerful and expressive asynchronous programs using the few simple methods we've learned so far.

Using the map method with Observable

3:45 rxjs

Like an array, Observable has a map method that allows us to transform a sequence into a new Observable.

Simple drag and drop with Observables

12:35 rxjs

Armed with the map and concatAll functions, we can create fairly complex interactions in a simple way. We will use Observable to create a simple drag and drop example with basic DOM elements.

Advanced Flattening

11:58 rxjs

In this lesson we solidify our understanding of how to flatten collections. This is perhaps the most important skill when learning to program without loops. We will try our hand at flattening not just a two dimensional collection, but a three-dimensional collection. Later on it will become clear how these skills relate to asynchronous programming.

Understand Reactive Programming using RxJS

4:31 rxjs

This lesson introduces Reactive Programming using RxJS in simple terms, with a concrete example and no scary terminology.

Use an event stream of double clicks in RxJS

4:36 rxjsPRO

See a practical example of reactive programming in JavaScript and the DOM. Learn how to detect double clicks with a few operators in RxJS. We will use .bufferWhen to accumulate events into an array to determine if a double click occurred.

Reactive Programming - Why choose RxJS?

4:05 rxjsPRO

This lesson helps you think in Reactive programming by explaining why it is a beneficial paradigm for programming. See how reactive programming helps you understand the dynamic behavior of a value evolving over time.

Use RxJS Async Requests and Responses

7:14 rxjsPRO

In this lesson we start building a small UI widget: suggestions box displaying users to follow in Github. We will learn how to perform network requests to a backend using RxJS Observables.

Render on the DOM with RxJS

5:22 rxjsPRO

Learn how to take data from a network response and display it on the DOM using RxJS reactive event streams.

Send new requests from refresh clicks in RxJS

5:07 rxjsPRO

In this lesson we learn how to fetch new data whenever the refresh button is clicked. This lessons starts to give us a feeling of how is it to develop reactive applications in RxJS.

Clear data while loading with RxJS startWith

6:28 rxjsPRO

Let's fix a small UI glitch that was occurring on startup and whenever the refresh button was clicked. In this lesson we will see how to avoid common bad habits of imperative programming, and how to use reactive programming to keep the complete dynamic behavior of a value specified in one convenient place.

Share Network Requests with RxJS merge

3:34 rxjsPRO

This lesson teaches how to control whether network requests are cached or are pessimistically re-executed, with the help of the RxJS merge operator.

Use cached network data with RxJS

7:44 rxjsPRO

In this lesson, we learn how to build the final feature of our user interface: how to use the cached network response to replace a suggested user when the user clicks on the 'x' close button for that user.

An overview of RxJS reactive concepts

2:14 rxjsPRO

This video gives an overview of the concepts of reactive programming we saw during this series, and explains how reactive programming can provide true separation of concerns.

Let's learn RxJS

1:00 rxjs

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.

Return Multiple Values from Observables in RxJS

6:43 rxjsPRO

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.

Push Values from Observables in RxJS

3:21 rxjsPRO

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.

Throw Errors with RxJS Observables

1:39 rxjsPRO

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.

In this lesson we will see what the API is for throwing and catching Errors with Observables.

Perform an Action on Completion with RxJS Observables

1:48 rxjsPRO

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.

Deliver Synchronous Values with the RxJS of() Operator

2:06 rxjsPRO

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().

If you want to deliver synchronous values in the sequence, you use of() instead of writing boilerplate.

Convert JavaScript Values to RxJS Observables

3:41 rxjsPRO

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. We will look at the API RxJS has for doing that: from, fromPromise, and fromArray.

Convert DOM and Node.js Streams to RxJS Observables with fromEvent

3:49 rxjsPRO

Besides converting arrays and promises to Observables, we can also convert other structures to Observables.

This lesson teaches how we can convert any addEventHandler or removeEventHandler API to Observables. We will see how fromEvent does just that.

Combine empty, never, and throw Operators with Observables in RxJS

2:48 rxjsPRO

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

Set Intervals with RxJS interval and timer Operators

4:11 rxjsPRO

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.

Understand the RxJS create Operator

3:03 rxjsPRO

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

Return Subscriptions from the Subscribe Function in RxJs

3:14 rxjsPRO

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.

Observables are the foundation in RxJS

0:54 rxjsPRO

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.

Understand RxJS Operators

5:38 rxjs

We have covered the basics of what is Observable.create, and other creation functions. Now lets finally dive into operators, which are the focus of this course. We will see how operators are simple pure functions attached to the Observable type.

Use Marble Diagrams to Understand RxJS Operators

4:29 rxjsPRO

There are many operators available, and in order to understand them we need to have a simple way of communicating how they transform a source Observable into a result Observable over time. To show this we use Marble Diagrams to easily explain what is happening. Throughout this course we are going to see the so-called marble diagrams.

Use RxJS mapTo and map to Transform Values Emitted by Observables

3:34 rxjsPRO

transforming the values emitted by observables.
We made our first operator called multiplyBy, which looks a bit useful, but in practice we don't need it because it's too specific: it only does simple multiplication on numbers. In this lesson we will see how the map() operator is useful for any calculation on delivered values.

Inspect the Behavior of Operators with RxJS do

4:25 rxjsPRO

inspect the behavior of other operators
We just saw map which is a transformation operator. There are a couple of categories of operators, such as filtering, combination, flattening, etc. One of these categories is the utility operators. The most important utility operator is do, useful for debugging.

Filter Events Based on a Predicate with RxJS filter

2:06 rxjsPRO

through a predicate function that tells what is the criteria to pass or reject an event.
This lesson introduces filter: an operator that allows us to let only certain events pass, while ignoring others.

Filter Events with RxJS Operators take, first, and skip

2:51 rxjsPRO

There are more operators in the filtering category besides filter(). This lesson will teach how take(), first(), and skip() are simply operators to ignore or pass a certain amount of events from the source Observable.

Filter Events with RxJS Operators takeLast and last

3:10 rxjsPRO

Operators take(), skip(), and first() all refer to values emitted in the beginning of an Observable execution. In this lesson we will see similar operators which refer instead to the end of an Observable execution, such as takeLast().

Prepend/Append Data with RxJS Operators concat and startWith

6:22 rxjsPRO

Some Observables may complete, and we may want to append another Observable to the one which just completed. This lesson teaches you how to use the concat() operator for either appending or prepending, and how the shortcut operator startWith() is an easy way of prepending values to an Observable.

Merge Values in Parallel with RxJS Operator merge

3:57 rxjsPRO

In the category of combination operators, concat executes Observables sequentially, while merge executes them in parallel. This lesson will teach you how the merge operator is an OR-style combination operator that blends two or more Observables together.

Join Values from Multiple Observables with RxJS combineLatest

4:21 rxjsPRO

While merge is an OR-style combination operator, combineLatest is an AND-style combination operator. This lesson explains what AND-style combination means, and how you can join values from two or more Observables in a formula.

Control the Output of Values with RxJS Operator withLatestFrom

4:02 rxjsPRO

Operator combineLatest is not the only AND-style combinator. In this lesson we will explore withLatestFrom, another AND-style combination operator, and how it works essentially as map() operator, with some combination properties.

Combine Values with RxJS Operator zip

5:10 rxjsPRO

CombineLatest and withLatestFrom are both AND-style combination operators. In this lesson, we will learn about zip, our last AND-style combinator. It uses the n-th value of each member Observable to produce the n-th output value.