OT vs CRDT：前端开发者的协同编辑技术选择

// 用户A在位置5插入"Hello"
// 用户B同时在位置5插入"World"
// OT需要转换：谁的操作先执行？位置如何调整？

// 每个操作都有全局唯一ID，自动排序合并
// 不需要复杂的转换逻辑

// OT需要为每种操作组合写转换函数
function transformInsertInsert(op1, op2) {
  if (op1.position <= op2.position) {
    return [op1, { ...op2, position: op2.position + op1.length }]
  } else {
    return [{ ...op1, position: op1.position + op2.length }, op2]
  }
}
 
function transformInsertDelete(op1, op2) {
  // 又是一堆复杂逻辑...
}
 
function transformDeleteDelete(op1, op2) {
  // 更多复杂逻辑...
}
// 还有很多很多组合...

// OT的bug很难追踪
// 操作A + 操作B = 正常
// 操作B + 操作A = 出错？
// 需要检查所有转换函数的组合

// 使用Yjs，几行代码搞定协同编辑
import * as Y from 'yjs'
import { WebsocketProvider } from 'y-websocket'
 
const ydoc = new Y.Doc()
const ytext = ydoc.getText('content')
const provider = new WebsocketProvider('ws://localhost:1234', 'room', ydoc)
 
// 插入文本
ytext.insert(0, 'Hello World')
 
// 就这么简单！

// React + TipTap + Yjs
import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import Collaboration from '@tiptap/extension-collaboration'
 
function CollaborativeEditor() {
  const editor = useEditor({
    extensions: [
      StarterKit,
      Collaboration.configure({
        document: ydoc, // 直接传入Yjs文档
      }),
    ],
  })
 
  return <EditorContent editor={editor} />
}

// OT需要保证操作顺序，网络延迟会影响体验
class OTEditor {
  sendOperation(op) {
    // 必须等待服务器确认才能继续
    this.waitingForAck = true
    this.socket.send(op)
  }
  
  onAck() {
    this.waitingForAck = false
    // 处理缓存的操作...
  }
}

// CRDT可以立即应用操作，后台同步
class CRDTEditor {
  insert(pos, text) {
    // 立即在本地显示
    this.ytext.insert(pos, text)
    // 自动同步到其他客户端，无需等待
  }
}

// OT离线后重连很复杂
class OTEditor {
  goOffline() {
    // 需要缓存所有操作
    this.offlineOps = []
  }
  
  goOnline() {
    // 重连时需要重新计算所有转换
    this.resyncAllOperations()
  }
}

// CRDT天然支持离线
import { IndexeddbPersistence } from 'y-indexeddb'
 
// 自动本地存储
const persistence = new IndexeddbPersistence('doc-id', ydoc)
 
// 离线编辑，上线自动同步
// 无需额外代码！

// 适合大部分前端项目
const shouldUseCRDT = {
  richTextEditor: true,    // 富文本编辑器
  codeEditor: true,        // 代码协同编辑
  drawingApp: true,        // 绘图应用
  mobileApp: true,         // 移动端应用
  offlineFirst: true,      // 需要离线支持
  rapidDevelopment: true   // 快速开发
}

// 只在特殊情况下考虑
const shouldUseOT = {
  extremeBandwidthLimit: true,  // 极端带宽限制
  simpleTextOnly: true,         // 只有纯文本
  legacySystem: true            // 已有OT系统
}

// 丰富的前端工具链
import * as Y from 'yjs'                          // 核心库
import { WebsocketProvider } from 'y-websocket'   // WebSocket同步
import { IndexeddbPersistence } from 'y-indexeddb' // 本地存储
import { TiptapCollabExtension } from '@tiptap/extension-collaboration' // TipTap集成
 
// Vue集成
import { VueEditor } from '@tiptap/vue-3'
 
// React集成  
import { useEditor } from '@tiptap/react'

// 一个完整的协同编辑器组件
import React, { useEffect } from 'react'
import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import Collaboration from '@tiptap/extension-collaboration'
import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
import * as Y from 'yjs'
import { WebsocketProvider } from 'y-websocket'
 
export default function CollaborativeEditor({ roomId, userName }) {
  const ydoc = new Y.Doc()
  
  const editor = useEditor({
    extensions: [
      StarterKit.configure({ history: false }),
      Collaboration.configure({ document: ydoc }),
      CollaborationCursor.configure({
        provider: new WebsocketProvider('ws://localhost:1234', roomId, ydoc),
        user: { name: userName, color: '#f783ac' },
      }),
    ],
  })
 
  return <EditorContent editor={editor} />
}
 
// 就这么简单，一个协同编辑器就完成了！

// CRDT支持现代前端需求
const modernFeatures = {
  offlineFirst: '✅ 天然支持',
  mobileOptimized: '✅ 移动端友好', 
  frameworkAgnostic: '✅ 框架无关',
  typescript: '✅ 完整类型支持',
  ssr: '✅ 服务端渲染支持'
}