2 ポイント 投稿者 GN⁺ 2024-06-27 | 1件のコメント | WhatsAppで共有

Triplit の概要

Triplit は、サーバーとブラウザー間でデータをリアルタイムに同期するオープンソースのデータベースです。TypeScript パッケージとして提供され、サーバーにデータを保存し、クライアントへインテリジェントに同期します。

  • リアルタイム同期: プロパティレベルでの増分更新と競合解決を提供
  • ローカルキャッシュ: クライアント側データベースとして動作
  • 耐久性のあるサーバー側ストレージ: 管理ダッシュボードを含む
  • プラグイン型ストレージプロバイダー: SQLite、IndexedDB、LevelDB、Memory などをサポート
  • 楽観的更新: 高速なインタラクションを提供
  • リレーショナルクエリ: 複雑なデータモデルをサポート
  • オフラインモード: 自動再接続と一貫性を保証
  • ロールバックと再試行の管理: 更新失敗時に対応
  • スキーマ: データの安全性と TypeScript 自動補完を提供
  • 権限管理: サーバーで読み取り・書き込み権限を強制
  • コラボレーション / マルチプレイヤー: CRDTs で動作
  • 低レイテンシ: デルタパッチを使った最小限のネットワークトラフィック
  • シンプルな API: JavaScript と React でのデータクエリおよび変換をサポート
  • 完全なオープンソース

Monorepo の概要

triplit/packages には、Triplit を支えるさまざまなプロジェクトが含まれています。

  • TriplitDB: ブラウザー、Node、Deno、React Native などあらゆる JS 環境で実行可能で、ネットワーク上の複数の書き手間で一貫性を維持しながら、高速かつリアルタイムに更新されるクエリを提供
  • Client: ローカルおよびリモートの TriplitDB と相互作用するブラウザーライブラリ
  • CLI: プロジェクトのスキャフォールディング、フルスタック開発環境の実行、サーバーマイグレーションなどのためのコマンドを提供
  • React: @triplit/client のための React バインディング
  • Svelte: @triplit/client のための Svelte バインディング
  • Console: Triplit プロジェクトのデータ閲覧・変換、スキーマ管理アプリ
  • Server: Triplit クライアント間のデータ同期のための Node サーバー
  • Server-core: Triplit を実行するサーバーを構築するためのプロトコル非依存ライブラリ
  • Docs: Nextra で構築された Triplit ドキュメント
  • Types: さまざまな Triplit プロジェクト向けの共有型
  • UI: shadcn で構築された Triplit フロントエンドプロジェクト向けの共有 UI コンポーネント

クイックスタート

新しいプロジェクトを開始:

npm create triplit-app@latest my-app

既存プロジェクトに依存関係を追加:

npm install --save-dev @triplit/cli
npm run triplit init

スキーマ定義 (my-app/triplit/schema.ts):

import { Schema as S, ClientSchema } from '@triplit/client';

export const schema = {
  todos: {
    schema: S.Schema({
      id: S.Id(),
      text: S.String(),
      completed: S.Boolean({ default: false }),
    }),
  },
} satisfies ClientSchema;

Triplit 開発同期サーバーを起動:

npm run triplit dev

環境変数を設定 (.env ファイル):

VITE_TRIPLIT_SERVER_URL=http://localhost:6543
VITE_TRIPLIT_TOKEN=copied-in-from-triplit-dev

アプリでクエリを定義 (React の例):

import { TriplitClient } from '@triplit/client';
import { useQuery } from '@triplit/react';
import { schema } from '../triplit/schema';

const client = new TriplitClient({
  schema,
  serverUrl: import.meta.env.VITE_TRIPLIT_SERVER_URL,
  token: import.meta.env.VITE_TRIPLIT_TOKEN,
});

function App() {
  const { results: todos } = useQuery(client.query('todos'));

  return (
    <div>
      {Array.from(todos.values()).map((todo) => (
        <div key={todo.id}>
          <input
            type="checkbox"
            checked={todo.completed}
            onChange={() =>
              client.update('todos', todo.id, (todo) => ({
                todo.completed = !todo.completed,
              }))
            }
          />
          {todo.text}
        </div>
      ))}
    </div>
  );
}

アプリを起動し、別のブラウザータブを開いてリアルタイムのデータ同期を確認します。

GN⁺ の意見

  • Triplit はリアルタイム同期とローカルキャッシュを組み合わせることで、高速かつ一貫したユーザー体験を提供します。
  • さまざまなストレージプロバイダーをサポートしており、柔軟なデータ管理が可能です。
  • オフラインモードと自動再接続機能により、ネットワークが不安定な状況でもデータの一貫性を維持します。
  • シンプルな API と多様なフレームワーク対応により、開発者にとって扱いやすいです。
  • ただし、初期設定や環境変数の管理はやや複雑になる場合があります。

1件のコメント

 
GN⁺ 2024-06-27
Hacker Newsの意見
  • Triplitの使用経験の共有: Triplitをプロジェクトで使用しており、データモデルは分散型(P2P)によく適している。ただし、サーバー認証トークンの生成とクエリ言語の表現力不足が惜しい。

  • Evoluとの比較: TriplitとEvoluの違いとして、Triplitの.subscribe()機能、Evoluの高度なクエリ機能(SQLベース)、およびブラウザで使用するデータベースの種類が異なる。

  • オフライン同期とスキーマ進化: オフライン同期プロトコルを使用するデータベースで、クライアントのバージョンが異なる場合にスキーマ進化の問題をどのように解決するのか気になる。

  • クライアントがデータベースに直接書き込むことへの疑問: クライアントがデータベースに直接書き込むことが許されるアプリが理解できない。SupabaseやFirestoreについても同じ疑問がある。

  • Triplitのユーザー設定管理: Triplitを使ってユーザー設定を管理しており、オフラインでもアプリがうまく動作するようにしている。サポートチームの迅速な対応が印象的。

  • AGPLライセンスを選んだ理由: TriplitがAGPLライセンスを選択した理由が気になる。

  • ローカルファーストのアプローチ: ローカルファーストのアプローチをモバイルアプリで使用しており、他のソリューションと比べてTriplitがクライアント・サーバー同期ソリューションを提供する理由が気になる。

  • Rustバインディングの要望: Rustバインディングが追加されればTauriと一緒に使うことができ、オフラインファーストアプリの開発に役立つはず。

  • React NativeでのTriplit使用経験: TriplitをReact Nativeアプリで使用しており、クエリ言語、TypeScriptサポート、オフラインサポート、React Nativeサポートが優れている。オープンソースであり、セルフホスティング可能な点も長所。

  • 未来のアプリ開発: Triplitはアプリ開発の未来のように感じられるが、RethinkDBとの比較や、彼らが失敗した理由についてどう考えるか気になる。

  • MongoDBとTriplitの組み合わせ可能性: サーバー側でMongoDBを使い、React側でTriplitを使えるのか、それともTriplitを新しいデータベースとして使う必要があるのか気になる。