Local-first & CRDT

Architecture 🔴 Senior

Définition

Approche où l'application stocke et modifie les données d'abord sur l'appareil de l'utilisateur, puis synchronise quand le réseau le permet : zéro attente, fonctionnement hors ligne, collaboration en temps réel, données qui survivent au service. Le terme vient de l'essai d'Ink & Switch de 2019. Les CRDT (Conflict-free Replicated Data Types) rendent la fusion automatique et sans conflit : Yjs domine l'édition de texte collaborative (ProseMirror, TipTap, CodeMirror), Automerge les documents structurés.

Analogie

Chacun écrit sur son carnet dans le train sans réseau ; à l'arrivée, les carnets se fusionnent tout seuls, sans que personne perde une ligne.

Exemple de code

import * as Y from 'yjs';

// Deux répliques déconnectées modifient le même texte
const a = new Y.Doc(), b = new Y.Doc();
a.getText('note').insert(0, 'Bonjour');
b.getText('note').insert(0, 'Salut ');

// Échange des mises à jour (peu importe l'ordre, ni le nombre de fois)
Y.applyUpdate(b, Y.encodeStateAsUpdate(a));
Y.applyUpdate(a, Y.encodeStateAsUpdate(b));

console.log(a.getText('note').toString() === b.getText('note').toString());
// true : convergence garantie sans serveur arbitre

Cas d'usage

Éditeurs collaboratifs, applications de prise de notes ou de terrain avec réseau intermittent, outils où la latence du serveur est inacceptable.

Anti-pattern

Appliquer un CRDT à des invariants métier forts (solde bancaire, stock) : la fusion automatique produit des états valides mais commercialement absurdes.
#architecture#distributed#frontend

Fiche mise à jour le 2026-09-27

← → au clavier pour passer d'une fiche à l'autre