React Native を使用した RxDB

Apr 26 2023

RxDB を使用した JavaScript アプリケーション用のリアルタイムデータベース

私たちが日常生活でテクノロジーにますます依存し続けるにつれて、デジタル体験とシームレスに統合する革新的なソリューションに対する需要がかつてないほど高まっています。モバイルアプリから Web アプリケーション、そしてその間のあらゆるものに至るまで、信頼性が高く、効率的でスケーラブルなデータベースの必要性がますます明らかになってきています。

RxDB は、クライアントとサーバー間でデータをレプリケートするために、データベース準拠のエンドポイントおよび特定の GraphQL エンドポイントとのリアルタイムレプリケーション用のモジュールを提供します。

RxDBとは何ですか?

RxDB はReactive Data baseの略で、Web サイト、モバイルアプリ、エレクトロアプリ、Web アプリ、node.js などのJavaScript アプリケーション用の NoSQL データベースです。

RxDB は、JavaScript アプリケーション専用に設計されたリアクティブデータベースです。offline機能と互換性に重点を置いていますcross-platform。

RxDB は、ワークフローを合理化し、可能な限り最高のユーザーエクスペリエンスを提供したいと考えている開発者にとって、頼りになるソリューションになりつつあります。したがって、新しいモバイルアプリを構築する場合でも、既存のアプリケーションを改良する場合でも、RxDB は、探し求めていたパズルの欠けているピースとなる可能性があります。

RxDB では、現在の状態をクエリし、クエリの結果やリアクティブな場合はドキュメントの単一フィールドなど、すべての状態の変更をサブスクライブできます。UI-based real-timeこれは作成が簡単で、何もしなくても優れたパフォーマンス上の利点があるため、アプリケーションに適していますbackend。

コレクションは RxDatabase-Object に含まれており、変更イベントの同期も管理します。RxDB は純粋にクライアント側で利用できます。

レプリケーションプリミティブプラグインを使用すると、REST、Web ソケットなどの任意のプロトコルで動作するオリジナルのレプリケーションを作成することもできます。

では、RxDB の顕著な機能は何なのか見てみましょう。

Offline-firstこのデータベースはサーバー側のデータベースと同期し、ユーザーがインターネットに接続できない場合でもアプリを動作させることができます。
PouchDB、CouchDB、IBM Cloudant と互換性があります。のプラグインもありますGraphQL replication。
Encryptionユーザーのデータを保護するために単一のデータフィールドを使用します。
高速かつ安全なコーディングをサポートしますTypeScript 。
ReactiveRxJS に基づくデータ処理 (マップ、フィルター、リデューサー操作など、非同期イベントをコレクションとして処理できるようにします)
Platform-Support the same codeRxDB はブラウザ、node.js、react-native などで使用できるように作られています。
RxDB はクライアント側のデータベースとして機能します。
RxDB はデータをリアクティブに処理するため、rxjsに依存します。

Todo の例からやり直します

まず、次のコマンドを実行して React Native プロジェクトを作成します。

npx react-native init RxDBProject

ステップ 1: 依存関係をインストールする⤵️

次に、上記のパッケージを React Native プロジェクトにインストールする必要があります。

npm install rxdb --save

# peerDependencies
npm install rxjs --save

データベース用に、次の名前InitializedDB.tsxまたは別の適切な名前のファイルを作成します。以下の図に示すように、名前、ストレージ用アダプター、およびパスワード (8 文字以上である必要があり、オプション) を指定してデータベースを構築する方法は次のとおりです。

ステップ 3 :データベースのコレクションのスキーマを作成する

ドキュメントデータがリポジトリによって提供される JSON スキーマと常に一致することを確認するにはRxCollection、RxDB が提供するいくつかの検証実装のいずれかを使用できます。

以下は、このスキーマにおけるTodoSchemaa の定義として機能します。Todo collection

スキーマのはversion numberゼロ (0) です。
このprimary keyフィールドには、コレクション全体の主キーとして使用されるプロパティのフィールド名が含まれます。
主キーは、単一のドキュメントを検索するために使用できる、インデックス付きの一意の必須文字列です。たとえば、ID、タイトル、名前など…
以下のスキーマには、 type の 2 つのプロパティとtitle、todo が完了したかどうかを示すdescription,フラグがあります。done
最初のプロパティtitleは主キーで、メッセージが挿入された日付をミリ秒単位で表します。
検証に必要なプロパティをスキーマに追加することもできます。

ステップ 4: スキーマを使用してコレクションを作成し、ドキュメントを挿入する

以下の例のように、データベースから既存のコレクションを取得し、データベース上でコレクション名を直接呼び出します。

// create collections
await db.addCollections({
   [todoCollectionName]: {
     schema: TodoSchema,
   },
});
// insert a document
await db[todoCollectionName].insert({
  title: 'Antibiotics',
  description: 'Bring Medicine from store',
  done: 'true',
});

クエリを使用すると、コレクション内のドキュメントを検索できます。他のほとんどの NoSQL データベースと同様に、RxDB は、プラグインmango-query-syntax.で連鎖メソッドを使用することも可能ですquery-builder。基本的なを作成するにはRxQuery、.find()コレクションでメソッドを呼び出し、セレクターを挿入します。通常のクエリの結果セットはドキュメントの配列です。

上のコードでは、上の画像にあるように、TodoList の関数を含むatitleと aを出力に入力します。さらに、この機能を使用すると、削除ボタンをクリックするだけでドキュメントを削除できます。descriptioninsert()remove()

findone()タイトルと説明に記載されているデータを検索し、取得してデータベースから削除します。また、Todo の説明とタイトルをで変更する更新機能も追加されましたupsert()。

RxQueryさらに詳しく知るために調べることもできます。ここでは、Todo タスクの追加、削除、編集の出力を確認できます。

RxDB TodoList の例

オフラインファーストの欠点

でのみ動作しますsmall datasets。
ブラウザのストレージは永続的ではありません。
Deterministic conflict解決は、複数のユーザーがオフライン中に同じドキュメントを変更したときに発生する可能性のある競合を解決するために、オフラインファーストデータベースで使用される一般的な戦略です。
このアプローチには、ドキュメントの競合する両方のバージョンをストレージに保存し、それらのハッシュを比較して勝者を決定することが含まれます。ドキュメントがクエリされると、勝ったドキュメントが返されます。
決定論的な競合解決は、競合がまれで競合する変更の 1 つを削除することが重要ではないユースケースには適しているかもしれませんが、より複雑または重要なアプリケーションにとっては最適なアプローチではない可能性があります。
そうしなければなりません。アプリを開発するとき、遅かれ早かれデータレイアウトを変更したくなることがあります。ドキュメントに新しいフィールドを追加するか、ドキュメントの形式を変更したいと考えています。したがって、データベーススキーマを更新し、保存されているドキュメントも移行する必要があります。 migrate the client database
パフォーマンスがネイティブではない: Web ベースのオフラインの最初のアプリを作成する場合、データをユーザーのファイルシステムに直接保存することはできません。実際、JavaScript コードとオペレーティングシステムのファイルシステムの間には多くの層があります。

上記のソースコードは GitHub リポジトリで見つけることができます。

結論

RxDB の機能は、や操作などencryption、ここで説明した内容をはるかに超えています。middleware hooks,atomic update

機能を追加、編集、更新し、データをまたはサーバーと同期することで、このアプリケーションの機能を強化できます。 IBM CloudantCouchDB

詳細については、公式 RxDB GitHub リポジトリをチェックしてください。

Simform のエンジニアリングの詳細については、エンジニアリングブログの残りの部分を確認し、Simformサイトにアクセスしてください。募集中の案件を確認して応募するには、採用ページにアクセスしてください。