Tujuan Pembelajaran

Memahami collaborative editing
Mengetahui CRDT dan OT

Analogi

Diagram


      Collaborative Editing = Rapat
Banyak orang edit dokumen sama

Conflict = Debat
Harus ada aturan untuk resolve

Collaborative editing memungkinkan multi-user edit dokumen secara simultan

Penjelasan Konsep

Collaborative Editing

Collaborative Editing memungkinkan banyak user mengedit dokumen secara simultan. Setiap perubahan terlihat oleh semua user secara real-time.

Dua approach utama

OT (Operational Transformation). Transformasi operasi untuk menghindari conflict. Google Docs pakai ini. Kompleks untuk implementasi.
CRDT (Conflict-free Replicated Data Type). Data structure yang otomatis resolve conflict. Lebih simpel dan reliable.

CRDT cara kerja

Setiap character punya unique ID dan timestamp. Kalau dua user edit simultaneously, CRDT merge berdasarkan ID dan timestamp. Tidak perlu central server untuk coordination.

Library collaborative editing

Yjs. CRDT library paling populer untuk JavaScript.
Automerge. CRDT dengan JSON-like API.
ProseMirror. Rich text editor dengan collaborative support.
Quill + Yjs. Quill editor dengan Yjs untuk collaborative.

Latency compensation

Local changes di-apply immediately (optimistic UI). Remote changes di-merge via CRDT. User selalu melihat response instan.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami collaborative editing., dan mengetahui CRDT dan OT. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Collaborative Editing, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Collaborative editing memungkinkan multi-user edit dokumen secara simultan. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa typescript. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. Yjs CRDT sync otomatis via WebSocket. Local change optimistic, remote merge via CRDT. Tidak perlu conflict resolution manual.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

typescript

// YJS COLLABORATIVE EDITING
import * as Y from 'yjs';
import { WebsocketProvider } from 'y-websocket';

const doc = new Y.Doc();
const yText = doc.getText('content');

// Connect ke sync server
const provider = new WebsocketProvider(
  'wss://demo.yjs.dev',
  'room-name',
  doc
);

// Local change → otomatis sync ke semua peer
yText.insert(0, 'Hello collaborative world!');

// Listen remote changes
yText.observe(() => {
  console.log('Content:', yText.toString());
});

Penjelasan Kode

Yjs CRDT sync otomatis via WebSocket. Local change optimistic, remote merge via CRDT. Tidak perlu conflict resolution manual.

Prompt AI

Implementasikan collaborative text editor dengan Yjs.

Pertanyaan Reflektif

Kenapa CRDT lebih baik dari OT untuk collaborative editing?