何で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、本当か？
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のパフォーマンスを比較するテストコードがあったので実行してみた。
手順
- ReactiveX/RxJSをクローンする
- npm install
- npm run build_all
- 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じゃないと採用できないなって感じもある。とりあえず納得できる理由が得られたのでよかった。