RxJS：フロントエンド開発のための事後対応型拡張

リアクティブプログラミングについてはすでに何百もの記事が書かれています。 フロントエンドはこの傾向を回避できませんでしたが、このトピックに対する関心は依然として非常に高くなっています。 したがって、私たちは単に将来の講演者の一人にインタビューせざるを得ませんでした。



ビクター・ルサコビッチ もともとミンスク出身で、GP Software.travelで働いています。

過去5年間、Victorは（主に）フロントエンド開発に携わってきました。 さて、私たちのほとんどがそうであるように、jQueryから始めました。



次に、バックボーン、角度v1がありました。 過去6か月間、彼はRedux / React.jsのプロジェクトに取り組んでいます（RxJSと混同されることがよくありますが、これは少し異なります）。

試薬はプロジェクトで積極的に使用されています。 それが何であり、どのように始まったのか説明できますか？ RxBrainfuckがそうでないことを除いて、誰もがRxJS、RxJava、RxPython、RxBasicをよく聞いています。

実際、以前のプロジェクトの1つは、RxJSライブラリを使用して完全に浸透しました。 すべてのAJAXリクエストは、DOMイベントで動作し、静的データを処理することもあります-これらはすべてRxJSを経由しました。



はじめに、「リアクティブプログラミング」などについて少し説明します。 たとえば、「反応性」のある生活の中で、Excelで出くわすことがあります。







ご覧のとおり、金額を自動的に計算するための数式を含むセルが作成されました。 リアクティブプログラミング言語では、これは2つのデータストリーム（グロスと税）、および3番目のネットストリームとして表すことができます。

非常に便利なオンラインエディターを使用して、すべての例を表示します。 このエディターは、ブラウザーでアプリケーションの結果を直接レンダリングするため、優れています。 さて、ラジオエディターの最も優れた機能は、すべてのスニペットが直接リンクから引き続き利用できることです。 私の最初の例はこちらです。

var gross = Rx.Observable.just(5000) var taxes = Rx.Observable.just(13) var net = gross.combineLatest(taxes, (g, t) => g - t / 100 * g) net.subscribe(money => document.getElementById('out').value = money)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

インターネットでは、「リアクティブプログラミング」の定義に関する多くのオプションを見つけることができます。WikipediaのHabreにあります。 トピックは深刻で、彼のアイデアに同意すれば署名できる特別なマニフェストさえありますが、なぜですか？ 個人的には、これらすべての定義が気に入らないので、自分で定義しました。

リアクティブプログラミングとは、イベントを処理するのではなく、イベントを1つずつ組み合わせてストリームにし、それだけで作業する場合です。

（日付、署名、シール）。

このすべてがどのように発生したのかを説明すると、RxJSの外観のストーリーはそのようになります。

2010年から2011年にかけて、.NETで働いていたMicrosoftの関係者は、JS用のリアクティブライブラリを作成することも良いと判断しました。 実際、.NET LINQはかなり前から人気があります。 たとえば、LINQを使用して、文字列内の特定の単語の出現回数をカウントする方法は次のとおりです。

  string searchTerm = "data"; //Convert the string into an array of words string[] source = text.Split(new char[] { '.', '?', '!', ' ', ';', ':', ',' }, StringSplitOptions.RemoveEmptyEntries); // Create the query. Use ToLowerInvariant to match "data" and "Data" var matchQuery = from word in source where word.ToLowerInvariant() == searchTerm.ToLowerInvariant() select word; // Count the matches, which executes the query. int wordCount = matchQuery.Count();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最初のバージョンのライブラリで作業を開始できたのは幸運でした。 コードはまだGitHubではなく、Microsoft独自のリポジトリにありました。 さらに、ライセンスの機能により、プロジェクトに縮小されていないバージョンを含めることはできませんでした。 ドキュメントは大きな問題でした。言語の違いにもかかわらず、.NET向けに書かれた記事を読み、概念レベルで理解しようとする必要がありました。 その時、私はどんなプログラミング言語でも書くことができることに気づきました。

RxJSを使用するというアイデアをどのようにして思いついたのですか？

各プロジェクトには、特定のテクノロジーの選択に影響する独自の特性があります。 解決策は、インターフェースの複雑さ、一貫したロードマップの有無によって決定できます。これは、プロジェクトが少なくとも数年間は発展し複雑になることを示しています。 2012年には、RxJSに似たものは他に見つかりませんでした。 良い技術サポートは私たちにとって重要であり、マイクロソフトブランドに負けました。



なぜその時点でRxJSが必要なのですか？

多くの独立したUIコンポーネントがあるアプリケーションを想像してください。

ここで、約10件のAPIリクエストを追加します（認証から製品の価格確認まで）。 そこにあります。

次に、ビュー内のコンポーネントをグループ化し、一部が異なるビューで使用され、一部が使用されないようにします。 よくわかりました。



次に、リクエスト間で状態を変更するようにコンポーネントに教える必要があります。 誤った要求が返されたときに、スピナーレイヤーをどこかに表示し、データをどこかに非表示にします。 さらに、コンポーネントは複数のAPIに依存する場合があり、さらに、重要なのは単一のリクエストではなく、一連のリクエストとその回答である場合があります。 そして、私たちのケーキの桜-2012年の路上では、Angularは存在せず、Backboneは適切ではありません-これは、jQueryでのみ作業することを意味します。 フレームワークなし。



RxJSは完璧に行きました。 個々のイベントをキャッチし、コールバックの巨大なピラミッドを構築することを止めました。 コールバックからのピラミッドは何を説明する必要がないのでしょうか？



代わりに、コンポーネント間に、特定の状況で必要な新しいストリームを作成できるデータを含むストリームがありました。 たとえば、製品を選択できるストリームがあります。 ユーザーがバスケットに何かを追加すると、追加された製品のイベントがこのスレッドに表示されます。 ユーザーが製品を削除すると、空の配列を持つイベントがストリームに表示されます。 ごみ箱から何かが取り除かれるたびに、テーブルを赤く点滅させたいとします：

 var cart = require('streams/cart') var removalsFromCart = cart .bufferWithCount(2,1) .where(history => history[1].length < history[0].length) removalsFromCart.subscribe(() => $('table').setClassFor1Sec('warning))
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

スニペットへのリンク。



.bufferWithCount（）は、前のイベントと現在のイベントを受け取り、さらに配列を渡します。 .where（）では、現在のバスケット（.bufferWithCountの後の配列の2番目のバスケット）に含まれる要素が前のものより少ないことを確認します。 条件が真の場合、データは.subscribe（）メソッドに渡されます。これは、ストリーム内の各イベントの目標です。 .where（）メソッドを使用しない場合、バスケットを変更するたびにまばたきが発生します。

だから、その理由はまさにそのようなものでした。 あなたはどう思いますか、そして他のどのような理由で、プロジェクトで事後対応的なアプローチを使い始めるのが理にかなっていますか？

最初は、すべてのイベントをRx.Observableに変更しました。 時間が経つにつれて、これが常に正当化されるわけではないことに気付きました。 たとえば、このボタンをクリックするとページがリロードされることを100％確信している場合、ページで追加の変更は必要ありません。 次に、RxJSを使用せずに、このような単純で関係のないイベントを処理します。



しかし、多くのイベントをフォローする必要があるとすぐに、RxJSはここで不可欠です。

たとえば、大量のデータストリームを作成するWebソケットにすることができます。

これらは、1つの要求を受信したときに開始し、最後に次の要求を開始する必要があるアニメーションにすることができます。



しかし、これがRxJSを特に愛した理由です。これらすべての.where（）、. buffer（）、. map（）などのメソッドを記述するために、データソースが何であるかは重要ではありません。 配列またはWebソケットで、1秒あたり100個のオブジェクトを送信し、その後1分間突然停止する可能性があります。 これらのイベントはすべて私たちにとって平等であり、平等に扱われます。



そしてこれは、非同期のものを整理して、RxJSを使用して完全に同期したデータの処理を開始できることを意味します。たとえば、すべての外部リンクを太字でマークします。

 Rx.Observable.from(document.querySelectorAll('a')) .where(el => el.getAttribute('href').indexOf('http') === 0) .subscribe(el => el.style.fontWeight = 'bold')
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

スニペットへのリンク。

要約すると、RxJSは、応答が必要な大量のデータフローを持つプロジェクト（ゲーム、チャット、ページに何らかの複雑な更新があるシンプルなサイト）に最適です。 RxJSはAngular 2に含まれていたと思います。

JSには他にどのようなソリューションがありますか？

すぐにいくつかの選択肢を思い出します。 まず、これはBaconJSです。 ライブラリは、RxJSとほぼ同時に作成されました。 興味深いことに、RxJSとBaconのどちらかを選択しようとしたプロジェクトの1つで、両方のライブラリがリリースされたばかりの約4年前です。 しかし、Baconは標準メソッドの数と全体としてよりシンプルなAPIを失ったため、RxJSを選択しました。 さて、私が言ったように、もう1つの重要な要素は、Juha Paananenだけが開発とサポートに携わっており、MicrosoftはRxJSの後ろにいたということです。 優れたコミュニティが既に形成されており、APIが十分に文書化されており、多くの優れたサンプルを見つけることができるため、今日、恐れることなくBaconJSを使用できます。



次の選択肢はKefirJSです（JSによって追加されていない言語の単語がまだありますか？:)。 同胞のRoman Pominovがサポートするリアクティブプログラミングのための素晴らしいライブラリ。 この小説はKefirJSを作成し、 BaconJSからAPIのシンプルさを（RxJSと比較して）取得し、すぐにパフォーマンスエラーを修正しようとしました。 そして、あなたは知っています、それはうまくいきました！ たとえば、プロジェクトの1つで毎日kefirを使用しています。

すべてが本当にバラ色ですか？ これらのフレームワークをそのまま使用できますか？

ニュアンスがあります。

約3年前、会議でRxJSについて報告した後、「リアクティブプログラミングを使用するには考え方を変える必要があることを正しく理解しましたか？」と尋ねられました。これはすべての報告で最も正しい質問でした。 観客の目には非常に頻繁に読まれましたが、一度だけ尋ねられました。 それに対する答え：「はい！」



対処的アプローチは、プログラムの作成に慣れている方法とは大きく異なります。 ここで、最初にイベントのパスを記述するコードを作成し、これらのイベントをプログラムに実行するだけで、必要なアクションが自動的にトリガーされます。

これが最初の問題です。



2番目の問題は、特定の場合にどの方法を適用できるかを理解することが難しい場合があることです。 たとえば、一部のスカラーデータをクエリに変換しました。 サーバーレスポンスにアクセスする方法 RxJSのすべてのメソッドの説明を読み、さらに.switch（）を記憶しているとしましょう：「観測可能なシーケンスの観測可能なシーケンスを、最新の観測可能なシーケンスのみから値を生成する観測可能なシーケンスに変換します」...

そうですね、 jsfiddleがなければ理解できません。



これに対処することは困難です。APIの知識がノンストップコーディングに十分ではない瞬間を生き抜く必要があります。 rxmarbles.comプロジェクトは便利です。その著者（ AndréStaltz ）は、データの順序が最終ストリームにどのように影響するかを追跡するために使用できる多数の動的なタイムチャートを作成しました。 ただし、そこには.switch（）メソッドが見つかりませんでした。



幸いなことに、reactx.io/documentation/operators/switch.htmlがあります。ここでは、主要なメソッドとそのタイミング図の詳細で人間的な説明を見つけることができ、switch（）を含む：







.switch（）メソッドはネストされたストリームからデータを返すことがわかります。 さらに重要なことは、ネストされたストリームからのデータは、新しいネストされたストリームが表示されるまで出力され、すぐにデータが生成されることです。黄色の三角形はまだ表示されていませんが、黄色の円は通過していません。

これは、通常ajaxで作業するときに使用する方法です。新しいリクエストが送信されるとすぐに、以前のリクエストから返される可能性のあるデータには興味がなくなります。 これで、古いサーバーの応答は表示されなくなります。

適切なスキルと欲求があれば、それを使用して本番環境で使用することが非常に可能です。 どこから始めて、どのリソースを読むことができますか？

今日、多くのリソースがあります。 すべての好みに合わせて、リソースへのリンクを含む多数のリソースがあります。ビデオコースが好きな人、例付きのドキュメントを読むのが好きな人、誰かに本を渡す人などです。 私はこのリストから始めます：

• egghead.io/series/introduction-to-reactive-programming-RxMarblesの著者による優れた入門コース。
• reactx.io/intro.html-RxJSの著者による多くの理論。
• www.reactivemanifesto.org-マニフェスト（それがない場所）;
• xgrommx.github.io/rx-book-RxJSリポジトリからの多くのドキュメントがありますが、たとえば、RxJSのBackpresure（および、これはマニフェストの一部です！）に関する独自の優れた記事が多数あります。
• www.introtorx.com-同名の本に含まれる記事のコレクション（サイトにはKindle用の無料のmobiバージョンがあります）。 .NETのすべてがこの概念を理解するための素晴らしい読み物であることを恐れないでください。 .NETはTypeScriptと非常によく似ています。
• HabréのFRPタグに関する記事。
• そして、rx.lite.jsプロジェクトに接続し、Ajax（フェッチ）リクエストをRx.Observableに変換することから始めることをお勧めします。

---

命令型アプローチを放棄し、最終的に反応型パラダイムに従うようにしたいという願望を喚起したことを願っています！ データのプルを停止します！ 作成されたチェーンをデータが通過できるようにします！

ちなみに、 holyjs.ruのレポートは準備ができており、いくつかのマイナーな改善があります。 レポートでは、プロジェクトでのRxJSの実用的な例について説明します。 6月5日の会議でサンクトペテルブルクでお会いしましょう！