Edited at

Why angular2 uses not RxJS v4 but v5?

More than 3 years have passed since last update.

何でAngular2はReactive-Extentions/RxJS(v4)ではなくてReactiveX/RxJS(v5)を使ってるのか考えてもわからなかったので聞いてみた。


laco0416 18:03

Hi @robwormald . Can I ask you about why angular2 uses not RxJS v4 but v5 ? Are there some important differences?



robwormald 18:06

@laco0416 its about 10x faster and is designed to match the new Observable proposal for ES7


Angular2はObservableのpolyfillを内部に持ってるのでそこと親和性が高いと嬉しいのはわかる。


10x faster、本当か?

https://github.com/ReactiveX/RxJS


Reactive Extensions Library for JavaScript. This is a rewrite of Reactive-Extensions/RxJS and is intended to supersede it once this is ready. This rewrite is meant to have better performance, better modularity, better debuggable call stacks, while staying mostly backwards compatible, with some breaking changes that reduce the API surface.


つまり


have better performance


ここが10倍らしい。しかしベンチマーク結果の情報がどこにもなくて、Angular2のチームが最初の採用検討時に比較して10倍だったんだろうなと察することしか出来なかった。


実際に試してみる

しかし10倍も速かったらREADMEに書くよな?と思ったのでnot推測but計測。

幸いにもv5のほうにはperfというディレクトリがあって、その中にv4とv5のパフォーマンスを比較するテストコードがあったので実行してみた。


手順


  1. ReactiveX/RxJSをクローンする

  2. npm install

  3. npm run build_all

  4. npm run pref_micro


結果

長い!!!!!!!!

ベンチマーク終わるまでにアニメ2本見終わった。だいたい45分くらい待ったけどこれはマシンスペックなんだろうか…

すごく数が多くて全部並べるのもアレなのでよく使いそうな関数だけピックアップする。

RxJS 4.0.7
RxJS 5.0.0-alpha.14
factor
% improved

empty
1,036,853 (±1.06%)
2,454,672 (±1.82%)
2.37x
136.7%

fromarray
44,488 (±1.47%)
310,749 (±1.24%)
6.99x
598.5%

interval
264,092 (±6.21%)
292,182 (±6.08%)
1.11x
10.6%

of
42,642 (±1.53%)
293,122 (±1.39%)
6.87x
587.4%

range
45,170 (±1.85%)
238,897 (±1.51%)
5.29x
428.9%

throw
972,852 (±2.60%)
2,943,236 (±2.53%)
3.03x
202.5%

timer
117,289 (±2.28%)
314,684 (±5.46%)
2.68x
168.3%

buffercount
15,177 (±0.88%)
160,517 (±1.22%)
10.58x
957.6%

catch
180,390 (±2.02%)
695,733 (±1.94%)
3.86x
285.7%

combinelatest
14,020 (±1.80%)
62,911 (±1.29%)
4.49x
348.7%

concat-many
1,304 (±1.49%)
5,387 (±1.44%)
4.13x
313.1%

concat
16,455 (±1.70%)
72,476 (±1.17%)
4.40x
340.5%

concatall
1,367 (±1.45%)
6,138 (±1.43%)
4.49x
349.2%

defaultifempty
629,830 (±1.15%)
1,287,614 (±1.42%)
2.04x
104.4%

exhaust
17,140 (±2.79%)
6,022 (±1.27%)
0.35x
-64.9%

exhaustMap
12,791 (±1.20%)
5,709 (±2.26%)
0.45x
-55.4%

filter
18,888 (±2.09%)
71,366 (±1.63%)
3.78x
277.8%

groupby
25,357 (±1.43%)
76,508 (±2.04%)
3.02x
201.7%

ignoreelements
23,132 (±1.34%)
142,369 (±1.18%)
6.15x
515.5%

map
15,181 (±1.08%)
33,463 (±5.39%)
2.20x
120.4%

merge
1,674 (±5.12%)
7,836 (±3.64%)
4.68x
368.1%

mergeall
1,194 (±1.34%)
5,982 (±1.34%)
5.01x
400.9%

mergemap
1,169 (±1.15%)
5,529 (±1.68%)
4.73x
372.8%

reduce
36,233 (±1.24%)
152,962 (±1.61%)
4.22x
322.2%

skip
20,151 (±1.42%)
104,905 (±1.03%)
5.21x
420.6%

switch
10,076 (±1.83%)
5,661 (±1.56%)
0.56x
-43.8%

take
149,142 (±1.54%)
522,143 (±1.40%)
3.50x
250.1%

toarray
42,551 (±1.18%)
249,996 (±1.28%)
5.88x
487.5%


10x fasterはちょっと盛ってた

だいたいは2倍〜5倍くらいの範囲で速いのはわかったんだけどさすがにこれで10倍速いってのは言い過ぎでしょう。exhaustとか逆に遅くなってるし。

とはいえ特に重要なmap、reduce、filterはちゃんと速くなってるので安心した。


v5はコードベースがTypeScript

Angular2がRxJS v5を採用したのはコードベースがTypeScriptなのも理由としてあると思う。型情報がちゃんと公式に与えられてるのは安心ではある。Angular2側から呼び出す時に型安全だし。


結論

確かに速いしObservable親和性もわかるし型情報があるのも良いけど、Angular2じゃないと採用できないなって感じもある。とりあえず納得できる理由が得られたのでよかった。