Collaborative Editing (OT vs CRDT) — Realtime

Collaborative Editing Google Docs, Figma, Notion — multiple users edit dokumen yang sama secara bersamaan. Dua pendekatan utama: OT dan CRDT. Problem: Concurren

Collaborative Editing

Google Docs, Figma, Notion — multiple users edit dokumen yang sama secara bersamaan. Dua pendekatan utama: OT dan CRDT.

Problem: Concurrent Edits

// Document: "Hello"
// User A (posisi 5): insert " World" → "Hello World"
// User B (posisi 0): insert "Say " → "Say Hello"
// Concurrent! Kedua edit valid tapi harus dimerge

// Tanpa coordination: chaos
// Dengan OT/CRDT: "Say Hello World" (correct merge)

OT (Operational Transformation)

Digunakan oleh Google Docs. Operasi di-transform berdasarkan operasi concurrent lain.

// A: insert("World", 5)
// B: insert("Say ", 0)

// Transform A against B:
// B menambah 4 karakter sebelum posisi A
// A menjadi: insert("World", 5 + 4) = insert("World", 9)

// Result: "Say Hello World" ✅

CRDT (Conflict-free Replicated Data Type)

Digunakan oleh Figma. Operasi bisa merge tanpa coordination — mathematically guaranteed convergence.

// Yjs — popular CRDT library
import * as Y from "yjs";
import { WebsocketProvider } from "y-websocket";

// Shared document
const doc = new Y.Doc();
const text = doc.getText("content");

// Connect to server
const provider = new WebsocketProvider("ws://localhost:1234", "room-1", doc);

// Edit (automatically synced)
text.insert(0, "Hello ");

// Listen for remote changes
text.observe(event => {
  console.log("Text changed:", text.toString());
});

Libraries

Yang akan kamu pelajari