This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

An overview of RxJS reactive concepts

2:14 RxJS lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
dave

Hi

Yeah its me again. This video starts with 'lets zoom out a bit and see what we have accomplished' , where is the video before this , so I can see what it was we are doing ? The title is a bit mis-leading , as it seems to assume I know about the concepts already. thanks for your response. I am grateful for a series on reactive programming as its something I need to know more about

In reply to egghead.io
Avatar
Tony

This video is incomplete. It appears that the full video is ~4 minutes and this one is ~2 minutes. That would explain why it seems to start mid-lesson.

Avatar
Olivier Clément

To the two previous commenters:

This video is the last of a serie of 10
You should have the playlist displayed under the video;
If not, just go there:
https://egghead.io/series/introduction-to-reactive-programming

Avatar
Joel

Is this not what you see?

These comments confuse me a bit.

Avatar
anurag

How can I implement backoff technique in Reactive Programming? could you give a example for me?
Thanks, Anurag

Avatar
animeshjain

Excellent lessons André

Minor suggestion :
I think it is more elegant to use startsWith in creating the requestStream, instead of merging with a startStream. Just thought I'd add it here

var requestStream = refreshClickStream
  .startWith('https://api.github.com/users')
  .map(ev => {
    var randomOffset = Math.floor(Math.random()*500);
    return 'https://api.github.com/users?since=' + randomOffset;
  })
;
Avatar
Terry

Great course Andre, really helps to grasp this approach

Avatar
Alex

Interesting walkthrough for RxJS start. I did expect you join 3 users also under one roof as this would also help understand abstracting it better.

Avatar
Tadeusz

Same here - that's the part I'm missing.

In reply to Alex

Let's zoom out a bit and see what we accomplished. The first thing that you notice from this code, it basically only has var declarations and function definitions. It's a fully declarative code.

Apart from, of course, the subscribes here at the bottom. These look somewhat familiar. They are not that much different from document.addEventListener. Giving a custom event such as suggestion one, and a call back. This is pretty much the same idea as this.

How did we create our custom events? Well, we did that by applying functions, such as map and merge and flatMap, based on simpler events, such as response, stream, and close, click streams and refresh click streams. That kind of stuff.

We learned that everything can be an event stream. We can have an event streams of clicks. We can have event streams for promises, and we can have event streams, also, for data, such as these.

Then also look at how we have virtually no control flow keywords here. We don't have ifs, we don't have elses, we don't have for-loops. All of this was created with operators such as map and filter and flatMap. These operators are really important for programming, and they will be your new ifs and for-loops.

Finally, let's look how reactive programming brought true separation of concerns to our code. If you want to see how the first user data behaves over time, you only need to look at its declaration.

The declaration specifies the complete dynamic behavior over time. There cannot be any other code that will modify the user data. That's a really good guarantee. You can be sure you know, 100 percent, how the user data works just by looking at its definition.

That's it and I hope you enjoyed learning about reactive programming in JavaScript.

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