RXJSから始める

あなたがフロントエンドJavascriptスペースで働いたならば、あなたは聞いたか、見られるか、使われるかもしれませんRxJS .
しかし、何が正確にrxjsですか?
簡単に言えば、それはlodash イベント用.
我々はその定義を拡張することができて、言います:「それはオブザーバブルを使用している反応プログラミングのためのライブラリです.そして、オブザーバーパターンに続きます.」しかし、それは本当にRXJSが何であるかを理解し、実際にそれを使用する方法を助けますか?おそらくない.
また、“なぜそれが有用ですか?”そして、私は、非同期コードが書き込み、維持、および理由をより簡単にするとあなたに言います.しかし、私はそれが最も役に立つ説明であることを疑います.
この記事はRXJSが何であるか、そしてどのようにそれから始めるかをあなたに理解しようとします.
しかしながら、RXJSは2つのプログラミングパラダイムの実装です、多くの開発者が彼らの頭を得るのに苦労しているということです.それで、あなたが失ったと感じるか、RXJsで働くとき、混乱するならば、freotしないでください.我々は皆そこにいた.
この記事の中で、私はReactive Programming とObserver Pattern Rxjsのいくつかの簡単なユースケースを設定する方法を詳述する前に、ライブラリを使用して実際の経験を与える.

反応プログラミング

リアクティブプログラミングは、データソースまたはイベントエミッタ(例えばマウスクリック)から生じるイベントに反応するためにコードが書き込まれるプログラミングパラダイムである.
JavaScriptのDOMで働いているならば、あなたはイベントを聞いたかもしれません.共通のイベントはclick イベントでは、onClick イベントハンドラ.次のようなもの

<div onClick="handleClick()"></div>

しかし、ユーザーがアクションを実行するとき、またはHTTP呼び出しが応答を受け取るときなど、非同期的に作成されるアクションとしてイベントを定義するのが最善だと思います.
したがって、我々は、反応プログラミングは、アプリケーションが実行されるときに作成されるイベントを処理することについてすべてを理解することができます.ユーザーがアプリケーションを使用するときに、ユーザーが作成するイベントに反応することができますので、ユーザーの対話性の多くを伴うアプリケーションを処理するのに最適な方法です.
これはフロントエンド開発のための理想的な候補になります.しかし、イベントに応答するアプリケーションを書いて、維持することは、適所に適切なパターンなしですぐに面倒になることができます.

オブザーバーパターン

オブザーバパターンは、通常、イベントハンドリングシステムを実装するときに使用されるパターン、またはアプリケーションライフサイクル全体のイベントに反応しなければならないシステムです.
最も基本的な形式では、subjects and observers , 代わりにpublishers and subscribers .
エーsubject はイベントのストリームと依存のリストからなるオブジェクトです.これらの依存症はobservers .
対象のストリームが新しいイベントを受け取ると、それぞれのobservers それは新しいイベントを受け取り、イベントのコピーを送るでしょう.The observers それから、彼らが合うどんなファッションででもこのイベントを扱います.言い換えれば、彼らが開発者によって設定されたもの.
これを明確にするために簡単な例をレビューしましょう.
ユーザーのクリック回数の記録を保持し、ユーザーがクリックしたたびにどれだけの時間が経過したかを記録することによって、アプリケーション内でユーザーの関与を追跡する機能を実装する必要があるとしましょう.
オブザーバーパターンでは、我々は非常に簡単にこれを行うことができますが、我々はまた、それははるかに簡単にテストし、維持するだけでなく、我々のアプリケーション内のユーザーのクリックに基づいてメトリックを記録する新しい方法を追加または削除できるようにすることは、はるかに簡単にすることができます.
私たちはsubject ユーザーがアプリケーション内でクリックするたびにイベントが受信されます.
我々はそれから2つをセットアップしたobservers . つは、ユーザーがアプリケーション内でクリックした回数を記録し、各クリック間の時間を記録する1つのレコードを更新します.それは2つの異なるとこれを処理するoverkillのように見えるかもしれませんobservers しかし、それは非常に我々のアプリケーション内のロジックのカップリングを削減します.

イベントストリームの作成と使用

さて、RXJSを使って上記のユースケースを実装する方法を見てみましょう.RXJSにはイベントストリームを設定する2つの方法があります.Subjects and Creation Operators

科目

被験者はすべての観測者に1つの実行パスを共有する

通常これらを手動で設定し、APIを使用して、すべてのオブザーバーにメッセージとして送られる値を指示します.

-これは、将来の記事で詳細にカバーされます！

作成演算子

これらはイベントストリームにほとんど何かを変えるのを助ける特別な機能です.

ロジックを実行するユースケースを実装するには、ユーザークリックに基づいて、アプリケーション内で fromEvent これはストリームを作成し、ユーザーがアプリケーション内でクリックするたびにストリームのオブザーバーに新しいメッセージを送信します.
まずストリームを設定しましょう.

const userClick$ = fromEvent(document, 'click');

ここで注意すべきことは$ サフィックス.これは、このプロパティがObservable . 本質的に、何かsubscribed へ.我々は今後の記事ので詳細を見るの詳細を見るオブザーバーをカバーします!
では、このイベントストリームを使用してアプリケーション内でユーザーが何回クリックしたかを追跡する方法を見てみましょう.

let numberOfClicks = 0;
const trackNumberClicksSubscription = userClick$.subscribe((event) => {
  numberOfClicks++;
  console.log(`User has clicked ${numberOfClicks} times!`);
});

たびにユーザーが我々のアプリをクリックしてnumberOfClicks が1増加し、合計値がコンソール出力に記録されます.

User has clicked 1 times! 
User has clicked 2 times! 
User has clicked 3 times! 

.subscribe() aを返す Subscription . このサブスクリプションはあなたに能力を与えるunsubscribe 必要に応じてイベントストリームから到着します.たとえば、あなたのアプリケーションがユーザーの最初の10回のクリックを気にしているなら、あなたはunsubscribe イベントストリームからnumberOfClicks === 10 . これは、ロジックが必要でないときに実行されるのを防ぎます.
サブスクリプションは、将来の記事で詳細に覆われる!

let numberOfClicks = 0;
const trackNumberClicksSubscription = userClick$.subscribe((event) => {
  numberOfClicks++;
  console.log(`User has clicked ${numberOfClicks} times!`);

  if(numberOfClicks === 10) {
    trackNumberClicksSubscription.unsubscribe();
    console.log(`No longer tracking number of user clicks!`);
  }
});

User has clicked 9 times! 
User has clicked 10 times!
No longer tracking number of user clicks!

さて、私たちの他のユースケースについては、どのように我々は、各ユーザーのクリックの間の時間を追跡?の新しいサブスクリプションを設定しましょうuserClick$ イベントストリーム.

let lastClickTime = -1;
const trackTimeBetweenClicksSubscription = userClick$.subscribe((event) => {
  // Wait until the first click has been received before we start tracking
  // the time between each click
  if (lastClickTime === -1) {
    lastClickTime = Date.now();
    return;
  }

  const difference = (Date.now() - lastClickTime) / 1000;
  console.log(`Time between user clicks: ${difference}s`);

  lastClickTime = Date.now();
});

我々は、単にユーザーがクリックした最後の時間を記録し、その時間の違いを確認し、我々は新しいclick イベント.Date.now() ミリ秒単位でエポック時間を返すので、1000 クリック間の秒数を取得します.
我々は現在、それが簡単に維持され、テストできるように個別のロジックを処理する2つのサブスクリプションを持っている!
上の例を見ることができますhere .

結論

ここではRXJSの表面をかすかにひっかきましたが、上記の例を見てみるとうまくいけません.この例では、非同期でイベントベースのコードを書いたり維持したりする際のパワーを見ることができます.
RXJsの本当の力は、その多くから来ますOperators その機能とユースケースをさらに拡張できます.我々は、別の記事では、ので、滞在をカバーします!
このドットラボは、企業のデジタル変換の努力を実現支援に焦点を当てた現代のWebコンサルティングです.専門家の建築指導、訓練、またはコンサルティング、角度、Vue、Webコンポーネント、Graphql、ノード、バゼル、またはポリマー、訪問thisdotlabs.com .
このドットメディアは、すべての包括的で教育的なウェブを作成することに集中します.我々は最新のイベント、ポッドキャスト、および無料のコンテンツを介して近代的なWebの進歩と最新の状態に保つ.学ぶthisdot.co .