เปิดตัวบน HN: Triplit – ฐานข้อมูลซิงก์แบบโอเพนซอร์สที่ทำงานทั้งบนเซิร์ฟเวอร์และไคลเอนต์

ภาพรวมของ Triplit

Triplit เป็นฐานข้อมูลโอเพนซอร์สที่ซิงก์ข้อมูลระหว่างเซิร์ฟเวอร์และเบราว์เซอร์แบบเรียลไทม์ มาในรูปแบบแพ็กเกจ Typescript โดยจัดเก็บข้อมูลไว้บนเซิร์ฟเวอร์และซิงก์ไปยังไคลเอนต์อย่างชาญฉลาด

• การซิงก์แบบเรียลไทม์: รองรับ incremental updates ระดับพร็อพเพอร์ตีและการแก้ไขความขัดแย้ง
• การแคชภายในเครื่อง: ทำงานเป็นฐานข้อมูลฝั่งไคลเอนต์
• ที่เก็บข้อมูลฝั่งเซิร์ฟเวอร์ที่ทนทาน: มาพร้อมแดชบอร์ดผู้ดูแลระบบ
• ผู้ให้บริการสตอเรจแบบปลั๊กอิน: รองรับ SQLite, IndexedDB, LevelDB, Memory เป็นต้น
• Optimistic updates: ช่วยให้การโต้ตอบรวดเร็ว
• Relational queries: รองรับโมเดลข้อมูลที่ซับซ้อน
• โหมดออฟไลน์: เชื่อมต่อใหม่อัตโนมัติและรับประกันความสอดคล้อง
• การจัดการ rollback และ retry: รองรับกรณีอัปเดตล้มเหลว
• สคีมา: เพิ่มความปลอดภัยของข้อมูลและ Typescript autocomplete
• การจัดการสิทธิ์: บังคับใช้สิทธิ์อ่านและเขียนจากฝั่งเซิร์ฟเวอร์
• การทำงานร่วมกัน/มัลติเพลเยอร์: ขับเคลื่อนด้วย CRDTs
• ค่าหน่วงต่ำ: ใช้ delta patches เพื่อลดทราฟฟิกเครือข่ายให้น้อยที่สุด
• API ที่เรียบง่าย: รองรับการ query และ transform ข้อมูลใน Javascript และ React
• โอเพนซอร์สเต็มรูปแบบ

ภาพรวมของ Monorepo

triplit/packages มีหลายโปรเจ็กต์ที่ใช้ขับเคลื่อน Triplit:

• TriplitDB: รันได้ในทุกสภาพแวดล้อม JS เช่น เบราว์เซอร์, Node, Deno, React Native ฯลฯ และให้ query ที่เร็ว อัปเดตแบบเรียลไทม์ พร้อมคงความสอดคล้องระหว่างผู้เขียนหลายคนผ่านเครือข่าย
• Client: ไลบรารีฝั่งเบราว์เซอร์สำหรับโต้ตอบกับ TriplitDB ทั้งแบบภายในเครื่องและระยะไกล
• CLI: มีคำสั่งสำหรับ scaffold โปรเจ็กต์, รันสภาพแวดล้อมพัฒนาแบบ full-stack, ทำ server migration เป็นต้น
• React: React binding สำหรับ @triplit/client
• Svelte: Svelte binding สำหรับ @triplit/client
• Console: แอปสำหรับดูและแปลงข้อมูลของโปรเจ็กต์ Triplit และจัดการสคีมา
• Server: เซิร์ฟเวอร์ Node สำหรับซิงก์ข้อมูลระหว่าง Triplit clients
• Server-core: ไลบรารีที่ไม่ผูกกับโปรโตคอล สำหรับสร้างเซิร์ฟเวอร์ที่รัน Triplit
• Docs: เอกสารของ Triplit ที่สร้างด้วย Nextra
• Types: ชุด type ที่ใช้ร่วมกันสำหรับโปรเจ็กต์ต่าง ๆ ของ Triplit
• UI: คอมโพเนนต์ UI ที่ใช้ร่วมกันสำหรับโปรเจ็กต์ฟรอนต์เอนด์ของ Triplit ที่สร้างด้วย shadcn

เริ่มต้นอย่างรวดเร็ว

เริ่มโปรเจ็กต์ใหม่:

npm create triplit-app@latest my-app

เพิ่ม dependencies ให้โปรเจ็กต์ที่มีอยู่แล้ว:

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

กำหนด query ในแอป (ตัวอย่าง 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 ที่เรียบง่ายและรองรับเฟรมเวิร์กหลากหลาย จึงเป็นมิตรกับนักพัฒนา
• อย่างไรก็ตาม การตั้งค่าเริ่มต้นและการจัดการตัวแปรสภาพแวดล้อมอาจค่อนข้างซับซ้อน

[GN⁺]

ความคิดเห็นจาก Hacker News

• แชร์ประสบการณ์การใช้ Triplit: กำลังใช้ Triplit ในโปรเจ็กต์อยู่ และมองว่าโมเดลข้อมูลเข้ากับแบบกระจายศูนย์ (P2P) ได้ดี อย่างไรก็ตาม ยังรู้สึกเสียดายที่การสร้างโทเค็นยืนยันตัวตนฝั่งเซิร์ฟเวอร์และความสามารถในการแสดงออกของภาษาคิวรียังมีข้อจำกัด

• เปรียบเทียบกับ Evolu: ความแตกต่างระหว่าง Triplit กับ Evolu คือฟังก์ชัน .subscribe() ของ Triplit, ความสามารถคิวรีขั้นสูงของ Evolu (อิง SQL) และชนิดของฐานข้อมูลที่ใช้ในเบราว์เซอร์ก็แตกต่างกัน

• การซิงก์แบบออฟไลน์และการเปลี่ยนแปลงสคีมา: สงสัยว่าฐานข้อมูลที่ใช้โปรโตคอลซิงก์แบบออฟไลน์จัดการปัญหาการเปลี่ยนแปลงสคีมาอย่างไรเมื่อเวอร์ชันของไคลเอนต์แตกต่างกัน

• ข้อสงสัยเรื่องการที่ไคลเอนต์เขียนลงฐานข้อมูลโดยตรง: ไม่ค่อยเข้าใจแอปที่อนุญาตให้ไคลเอนต์เขียนลงฐานข้อมูลโดยตรงได้ และมีคำถามเดียวกันกับ Supabase และ Firestore เช่นกัน

• การจัดการการตั้งค่าผู้ใช้ของ Triplit: ใช้ Triplit เพื่อจัดการการตั้งค่าผู้ใช้ ทำให้แอปทำงานได้ดีแม้ตอนออฟไลน์ และประทับใจกับการตอบสนองที่รวดเร็วของทีมซัพพอร์ต

• เหตุผลที่เลือกไลเซนส์ AGPL: สงสัยว่าทำไม Triplit จึงเลือกใช้ไลเซนส์ AGPL

• แนวทางแบบ local-first: กำลังใช้แนวทางแบบ local-first กับแอปมือถือ และสงสัยว่าเมื่อเทียบกับโซลูชันอื่น ๆ แล้ว ทำไม Triplit จึงเลือกนำเสนอโซลูชันซิงก์แบบไคลเอนต์-เซิร์ฟเวอร์

• คำขอ Rust binding: หากมี Rust binding เพิ่มเข้ามา ก็จะสามารถใช้ร่วมกับ Tauri ได้ และน่าจะช่วยในการพัฒนาแอปแบบ offline-first

• ประสบการณ์การใช้ Triplit บน React Native: กำลังใช้ Triplit ในแอป React Native และมองว่าภาษาคิวรี, การรองรับ TypeScript, การรองรับออฟไลน์ และการรองรับ React Native ทำได้ดีมาก ความเป็นโอเพนซอร์สและการโฮสต์เองได้ก็เป็นข้อดีเช่นกัน

• การพัฒนาแอปในอนาคต: Triplit ให้ความรู้สึกเหมือนอนาคตของการพัฒนาแอป แต่ก็อยากรู้ว่ามันเทียบกับ RethinkDB อย่างไร และพวกเขาล้มเหลวเพราะอะไร

• ความเป็นไปได้ในการใช้ MongoDB ร่วมกับ Triplit: สงสัยว่าสามารถใช้ MongoDB ฝั่งเซิร์ฟเวอร์และใช้ Triplit ฝั่ง React ได้หรือไม่ หรือจำเป็นต้องใช้ Triplit เป็นฐานข้อมูลใหม่ไปเลย