2P by neo 3달전 | favorite | 댓글 1개

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와 다양한 프레임워크 지원으로 개발자 친화적임.
  • 그러나 초기 설정과 환경 변수 관리가 다소 복잡할 수 있음.
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을 새로운 데이터베이스로 사용해야 하는지 궁금함.