triplit

Aperçu

TripLit est une base de données open source qui synchronise les données entre le serveur et le navigateur en temps réel.

TripLit fournit un montant de données de synchronisation en temps réel que vous pouvez déposer dans votre application en tant que package TypeScript. TripLit gère le stockage de vos données sur le serveur et synchronise intelligemment vos requêtes avec vos clients. Nous appelons ce type de système une «base de données complète» - vous pouvez regarder notre présentation à la première communauté locale sur ce nouveau paradigme ici.

Triplit se rassemble:

Synchronisation en temps réel avec des mises à jour incrémentielles et une résolution des conflits au niveau de la propriété

? Cache locale propulsée par une base de données côté client à part entière

? Stockage côté serveur durable avec un tableau de bord d'administration

? Proviseurs de stockage enfichables comme SQLite, indexDDB, niveaudb, mémoire, etc.

? Mises à jour optimistes pour faire en sorte que chaque interaction se sente rapide

? Interrogation relationnelle pour les modèles de données complexes

? Mode hors ligne avec garanties de reconnexion et de cohérence automatique

? Rollback and Rerying Management sur les mises à jour défaillantes

Schémas pour la sécurité des données et la complétion automatique de type dattecript

? Autorisation qui est appliquée sur le serveur pour la lecture et les écritures

? Collaboration / multijoueur alimenté par CRDTS

? ️ faible latence avec un trafic réseau minimal en utilisant des correctifs delta

API simple pour interroger et muter les données dans la vanille JavaScript et réagir

✅ Entièrement open-source!

Aperçu de Monorepo

Dans triplit/packages vous pouvez trouver les différents projets qui alimentent le triplit:

• TripLitDB - Conçu pour s'exécuter dans n'importe quel environnement JS (navigateur, nœud, deno, natif React, etc.) et fournir des requêtes de mise à jour expressives, rapides et en direct tout en maintenant la cohérence avec de nombreux écrivains sur un réseau.
• Client - Bibliothèque du navigateur pour interagir avec les triplitdbs locaux et distants.
• L'outil CLI - CLI avec des commandes pour échafaudager un projet, exécuter l'environnement de développement complet, migrer un serveur, etc.
• React - react liaisons pour @ triplit / client.
• Svelte - Svelte Bindings pour @ TripLit / Client.
• Console - App pour visualiser et muter les données dans les projets triplits et gérer leurs schémas.
• Server - Node Server pour la synchronisation des données entre les clients triplits.
• Server-core - Protocole Bibliothèque agnostique pour la construction de serveurs exécutant Triplit.
• Docs - Triplit Docs, construit avec Nextra.
• Types - Types partagés pour divers projets triplits.
• UI - Composants d'interface utilisateur partagés pour les projets de frontend triplit, construits avec shadcn.

Démarrage rapide

Démarrez un nouveau projet.

npm create triplit-app@latest my-app

Ou ajoutez les dépendances à un projet existant.

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

Définissez un schéma dans 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 ;

Démarrez le serveur Sync Development TripLit.

npm run triplit dev

Cela publiera certaines variables environnementales importantes que votre application devra synchroniser avec le serveur. Ajoutez-les à votre fichier .env (VITE Exemple ci-dessous).

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

Définissez une requête dans votre application (exemple réagi ci-dessous).

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

Démarrez votre application, ouvrez un autre onglet de navigateur et regardez la synchronisation des données en temps réel.

Lisez le guide complet de démarrage ici. Pour un tutoriel encore plus détaillé et explicatif, consultez ce guide étape par étape pour construire une application TODO en temps réel avec Triplit, Vite et React.

Contactez-nous

Si vous souhaitez obtenir un accès précoce à Triplit Cloud (actuellement dans le développeur Aperçu), inscrivez-vous ici pour rejoindre la liste d'attente.

La meilleure façon de nous contacter est de rejoindre notre discorde! Nous sommes là pour répondre aux questions, aider les développeurs à démarrer avec Triplit et prévisualiser de nouvelles fonctionnalités.

Vous pouvez nous suivre sur Twitter / X pour voir nos dernières annonces.