This article is
RxJS Chinese communityOriginal article, if need to reprint, please indicate the source, thank you for cooperation!

The words written in the front:

Many RxJS evangelists have said on various occasions that “RxJS is hard”… “RxJS learning curve is high”, etc.

Even RxJS authors are no exception, so choosing the right way to learn RxJS is very important.

Because the way summarized below is from my own point of view and past experience, so may not be suitable for everyone, just for reference ~

By the way, since you want to learn RxJS, then there will be two high people on the way of learning is you can not bypass, so I first take out a simple introduction, behind in the body part will not repeat.

Ben Lesh: RxJS 5 leader, evangelist, often in various public places to speak openly about RxJS

Andre Staltz: Staltz for short, RxJS 5 core contributor, evangelist, pioneer of responsive programming, model mentor of RxJS

In the early

At this stage, you may only be aware of the four letters of RxJS and may not even know what the full name of RxJS means. Not to mention how or why. So how to learn and understand RxJS at this stage?

1. Look at the overview section of the official document. It’s a bit long, but it’s the best part of the document. It gives you a quick overview of the core concepts in RxJS (Observable, Observer, Subscription, Operators, And Subject) and is worth checking out three or five times. In addition, this part is almost entirely written by Staltz, who is clear and fluent in writing.

Go to Egghead and watch two egghead videos

RxJS Courses – staltz is responsible for 80% of Egghead’s RxJS courses. You can get a lot out of egghead’s RxJS courses, but a lot of them are paid videos… orz

Ben Lesh’s RxJS courses – Ben’s courses feature great entry points to get you started on RxJS

After the above two steps of #1 #2, I believe that your cognition of RxJS has further deepened, but at the same time, doubts will definitely increase. But at least you already have your own knowledge of RxJS, the next thing to do is to deepen this knowledge and adjust the correctness of the knowledge.

3. At this stage, there is no fixed sequence to follow in the following parts, which are basically interspersed with each other’s reading and learning.

  • Observable is the soul of RxJS, but what really powers RxJS are operators, also known as toolkits. However, RxJS 5 provides a wide variety of operators, there are about 100, not recommended like reading the overview section, not remember, recommend not to click where, look at the pinball diagram + text description + code examples, three parties to support each other, I believe there is always one you can understand. Once you understand what the operators are for, you need to get your hands dirty and see what they mean in code. The official document operator description part is very good, many are based on the underlying code implementation to explain, but the code example part is less. Learning the RxJS operator, on the other hand, is overly simple in the text section, but the point is that the code examples are plentiful and clearly explained. They complement each other and are good choices for learning operators.
  • Read the articles section in Awesome RxJS, many of which are some good RxJS articles by Ben on Medium, short and masterly. The purpose of these articles is to improve your knowledge of RxJS.
  • Read Gitbook – RxJS 5 Basic Principles, the author explains the basic concepts of RxJS and some operators in what kind of business scenarios, the author’s language is plain, concise, intriguing, is a good introduction to the book.
  • Watch the video section of RxJS Awesome RxJS, which is basically a series of developer conference presentations. Watch it at your leisure to get a better understanding of RxJS in general.

4. Practice, practice, practice, basically learn a lot of things, later you learn to use Observable, Subject, all kinds of operators, no matter how small practice is an accumulation.

Mid –

One of the most significant differences between the mid and early stages is mastering Marble Tests.

What the hell is a pinball test? It is the Domain Specific Language (DLS) for UNIT testing of RxJS. It would look something like this:

var e1 = hot('----a--^--b-------c--|');
var e2 = hot(  '---d-^--e---------f-----|');
var expected =      '---(be)----c-f-----|';

expectObservable(e1.merge(e2)).toBe(expected);
Copy the code

Without pinball testing you will face the following situations:

  • Unit test code that is completely indecipherable to operators written by others
  • Not every operator can be thoroughly understood
  • There is no way to write unit test code for a new operator you write
  • Unable to contribute operators to the official RxJS library

So, must learn pinball test, in order to RxJS this road to continue to go on.

However, due to this aspect of the information is very few, the only reference is the official provision of writing pinball test, later we RxJS Chinese community will also publish relevant articles, to help you better understand the pinball test.

By the way, the official operator’s pinball graph is actually generated by the pinball test

The filter operator is an example:

Marble figure:

Marble test code:

asDiagram('filter(x => x % 2 === 1)')('should filter out even values', () => { const source = hot('--0--1--2--3--4--|');  const subs = '^ ! '; const expected = '-----1-----3-----|'; expectObservable(source.filter(oddFilter)).toBe(expected); expectSubscriptions(source.subscriptions).toBe(subs); });Copy the code

In the late

In view of the personal level is limited, can not give a very good specific guidance, can only give some directional suggestions.

After mastering the pinball test, you can basically do some things that can be done later, such as:

1. Contribute to RxJS 5

  • Test code that helps complement the operators
  • Write your own operator and follow the official required steps to submit it
  • Give your suggestions for the next version of RxJS

2. Develop some practical tools based on RxJS, such as React + RxJS binding. There is no elegant implementation in the community.

3. Think about the use direction of RxJS and combine them deeply in work to enjoy the convenience brought by Rx.

4. You are welcome to add.

Finally, and most importantly, there is the shift to responsive Thinking, “Thinking in Rx “, “Everything is a stream”. This is a kind of accumulation and practice, and everything will come naturally.