Skip to main content

面向前端的协同编程探索

低代码，无代码等概念已经不再新鲜。同时协同编程也会被经常提到。

虽然协同编程只是一个组合词 协同 + 编程，但是要做的事情远没有这么简单。

协同编程

  • 编辑 —— 协同编辑
  • 构建 —— 预置的构建方案
  • 运行 —— 在目标环境运行

编辑​

编辑在传统的编辑器的基础上要求更高，需要协同编辑。

  • 离线编辑

编辑器​

  • prosemirror
  • codemirror
  • monaco-editor

协同算法​

  • OT
    • @codemirror/collab
  • CRDT
    • yjs
    • automerge

相关文章

偏向数学理论

https://www.zxch3n.com/crdt-intro/design-crdt/

偏向实现细节

https://zhuanlan.zhihu.com/p/265074361

多窗口库​

构建​

构建工具​

文件系统​

  • 虚拟文件系统
    • memfs
      • memory
    • filer
      • indexdb
      • memory
    • unionfs
  • 文件系统
    • FileSystem
    • unionfs

运行​

  • dynamic import

  • IIFE (Immediately Invoked Function Expression)

    • iframe

使用了 构建 + 运行 的平台

  • codesandbox
  • codepen
  • stackblitz

既要也要的矛盾​

  • 离线优先 与 CAP

传统分布式软件中分区容错性被看的很重要。离线优先也可以被视作分区容错的子集。

但是离线优先的设计带来了无法在协同编程中解决的问题。

场景​

A B C 三人，P2P 协同编程。

存在一段错误的代码

let = "A"

username = "C"

当三人同时开始修复此问题时，A出现离线情况。

B C 二人协同修复得到的结果

let username = "A"

username = "C"

A 离线修复结果

let username = "A"

username = "C"

看上去 A 与 B C 是一致的。但是在 CRDT 与 OT 算法中，并不是。最终 A 恢复连接，得到的结果是

let usernameusername = "A"

username = "C"

对于协同编程来说，协同的好处是规避冲突。但是这种场景下，冲突被放大。

而这种情况在 git 的方案内，不会发生冲突。