Code

2017年7月8日土曜日

Observable Lib Rx.js ってなに?

 結構前から、Microsoft が Observable という概念の元に、いろんな Lib を開発し始めました。そのあと、約 3 年前、Rx.js が出てきました。いわゆる Reactive Programming の JavaScript バージョンです。Angular 4 は基本的に Observable を使って、Data Binding を行なっています。
 Rx.js 今のバージョンは 4.0 です。Netflix のエンジニアが 5.0 を開発しています。Observer Pattern を元に、Browser の Scroll Event や、Promise、Array などのデータタイプから Observable に変更する関数がありますし、map、filter などデータの操作関数、flatMap, flatMapLatest などの関数も実装されています。
 Event Stream を操作するので、やや抽象的ですが、実際使ってみると、そんなに難しいことではないそうです。
 例えば、ajax 関数を使うと、request を送って、response が帰ってきたら、subscribe() したlistener 関数を自動的に呼び出します。一見 Promise と変わらないですが、Event になると、結構変わります。
 例として、
    obs$.debounceTime(500)
    .map(ev => ev.key)
    .distinctUntilChanged()
    .scan((acc, one) => acc + one)
    .subscribe(term => this.search(term));
debounce などの機能は簡単にできます。

 それだけではない。Observable は chain, merge, zip などの関数もあるので、複雑な操作は簡単にできます。
 例えば、Promise ではできない、ajax call キャンセルするという機能も簡単にできます。

 ただ、Rx.js Lib かなり大きいなので、使う時は、こまめに operator など import すべきです。
 それでは。