feat: update docs
This commit is contained in:
1 parent
72ead317fe
commit
746fcb07ff
2 files changed
+138
No files matched your search
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
@@ -0,0 +1,138 @@
|
|||||||
|
---
|
||||||
|
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 的方案内,不会发生冲突。
|
||||||
Reference in new issue
Block a user