triplit

Ringkasan

Triplit adalah basis data sumber terbuka yang menyinkronkan data antara server dan browser secara real-time.

Triplit menyediakan datastore sinkronisasi real-time yang dapat Anda masukkan ke aplikasi Anda sebagai paket naskah. Triplit Handles Menyimpan data Anda di server dan secara cerdas menyinkronkan pertanyaan Anda kepada klien Anda. Kami menyebut jenis sistem ini sebagai "database tumpukan penuh" —kamu dapat menonton presentasi kami kepada komunitas pertama setempat tentang paradigma baru ini di sini.

Triplit menyatukan:

Sinkronisasi real-time dengan pembaruan tambahan dan resolusi konflik di tingkat properti

? Caching lokal yang ditenagai oleh database sisi klien penuh

? Penyimpanan sisi server yang tahan lama dengan dasbor admin

? Penyedia penyimpanan pluggable seperti sqlite, indexeddb, leveldb, memori, dll

? Pembaruan optimis untuk membuat setiap interaksi terasa cepat

? Permintaan relasional untuk model data yang kompleks

? Mode offline dengan koneksi ulang otomatis dan jaminan konsistensi

? Rollback dan coba lagi manajemen pada pembaruan yang gagal

Skema untuk Keselamatan Data dan TypeScript Autocompletion

? Otorisasi yang ditegakkan di server untuk membaca dan menulis

? Kolaborasi/Multiplayer Didukung oleh CRDTS

? ️ Latensi rendah dengan lalu lintas jaringan minimal menggunakan patch delta

API Sederhana Untuk Meminta dan Mutasi Data di Vanilla Javascript dan React

✅ Sumber terbuka sepenuhnya!

Tinjauan Monorepo

Dalam triplit/packages Anda dapat menemukan berbagai proyek yang menjadi triplit:

• TripLitDB - Dirancang untuk berjalan di lingkungan JS apa pun (browser, node, Deno, React Native, dll) dan memberikan kueri pembaruan yang ekspresif, cepat, dan langsung sambil mempertahankan konsistensi dengan banyak penulis melalui jaringan.
• Klien - Perpustakaan Browser Untuk berinteraksi dengan triplitdbs lokal dan jarak jauh.
• Alat CLI - CLI dengan perintah untuk perancah proyek, menjalankan lingkungan pengembangan full -stack, memigrasi server, dan banyak lagi.
• React - React Bindings untuk @triplit/klien.
• Svelte - Binding Svelte untuk @triplit/klien.
• Konsol - Aplikasi untuk melihat dan bermutasi data dalam proyek triplit dan mengelola skema mereka.
• Server - Node Server untuk menyinkronkan data antara klien triplit.
• Server -Core - Perpustakaan Agnostik Protokol untuk Server Bangunan Menjalankan Triplit.
• Documents - Triplit Docs, dibangun dengan Nextra.
• Jenis - Jenis Bersama untuk berbagai proyek triplit.
• UI - Komponen UI bersama untuk Proyek Frontend Triplit, dibangun dengan shadcn.

Awal yang cepat

Mulai proyek baru.

npm create triplit-app@latest my-app

Atau tambahkan dependensi ke proyek yang ada.

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

Tentukan skema di 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 ;

Mulai server sinkronisasi pengembangan triplit.

npm run triplit dev

Ini akan menghasilkan beberapa variabel lingkungan penting yang perlu disinkronkan oleh aplikasi Anda dengan server. Tambahkan ke file .env Anda (contoh vite di bawah).

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

Tentukan kueri di aplikasi Anda (reaksi contoh di bawah).

 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 >
  );
}

Mulai aplikasi Anda, buka tab browser lain, dan tonton sinkronisasi data secara real-time.

Baca Panduan Memulai Lengkap di sini. Untuk tutorial yang bahkan lebih rinci dan jelas, lihat panduan langkah demi langkah ini untuk membangun aplikasi TODO real-time dengan triplit, vite, dan bereaksi.

Hubungi kami

Jika Anda tertarik untuk mendapatkan akses awal ke Triplit Cloud (saat ini dalam pratinjau pengembang), daftar di sini untuk bergabung dengan daftar tunggu.

Cara terbaik untuk menghubungi kami adalah bergabung dengan perselisihan kami! Kami di sini untuk menjawab pertanyaan, membantu pengembang memulai dengan triplit dan pratinjau fitur baru.

Anda dapat mengikuti kami di Twitter/X untuk melihat pengumuman terbaru kami.