---
sidebar_position: 6
---

# 面向前端的协同编程探索

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

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

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

## 编辑

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

- 离线编辑

### 编辑器

- prosemirror
- codemirror
- monaco-editor

### 协同算法

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

相关文章

偏向数学理论

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

偏向实现细节

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

### 多窗口库

- https://github.com/caplin/FlexLayout
- https://github.com/ticlo/rc-dock
- https://github.com/golden-layout/golden-layout
- https://github.com/nomcopter/react-mosaic
- https://github.com/idealjs/layout-manager

## 构建

### 构建工具

- esbuild
- swc
- webpack https://github.com/webpack/playground 已过时

### 文件系统

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

## 运行

- dynamic import

- IIFE (Immediately Invoked Function Expression)
  - iframe

使用了 `构建` + `运行` 的平台

- codesandbox
- codepen
- stackblitz


## 既要也要的矛盾

- 离线优先 与 CAP

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

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

### 场景

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

存在一段错误的代码

```js
let = "A"

username = "C"
```

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

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

```js
let username = "A"

username = "C"
```

A 离线修复结果

```js
let username = "A"

username = "C"
```

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

```js
let usernameusername = "A"

username = "C"
```

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

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