138 lines
2.3 KiB
Markdown
138 lines
2.3 KiB
Markdown
---
|
|
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 的方案内，不会发生冲突。 |