Help us understand the problem. What is going on with this article?

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じゃないと採用できないなって感じもある。とりあえず納得できる理由が得られたのでよかった。

lacolaco
I play Angular and pray for Angular. No Breaking Changes, No Life.
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away