https://www.youtube.com/watch?v=MvwBw5p5vUU
- coordination of replicas, coordination and communication between the replicas.
- confirmation from authority or another developer가 필요할 수 있다.
- Example) Github source code: 사용자가 개입해서 뭐가 옳은 것인지 대답하는 프로세스가 필요하고, 이게 유일한 방법일 수 있다. 왜냐하면 자동적으로 모든 programming lang. conflict를 해결하는 건 어려운 문제니까. user steps in -> tell what the answer is (a manual process)
CRDT
- CRDT는 conflict-free replicated data type이다.
- yjs api를 제공하는데, crdt map을 제공함. 사용하기 쉽고, 원래 자주 쓰던 것들과 비슷한 data type을 제공하지만 내부적으로 알고리즘이 존재한다.
- collaborative editing app 을 만들기 위해서는 user step-in moment를 줄이고 오프라인에서 수정한 것을 일정 시간이 지나고 resynchronize를 하려고 할 때 conflict가 없어야함. CRDT는 consistent state를 수학적으로 보장하기 때문에, 어떤 과정을 거치더라도 마지막에는 eventual consistency를 얻을 수 있게 된다.
코드 설명
centralized state를 사용하는 것 같아 보이지만 manipulating 하는 데이타 타입이 CRDT라는 측면에서 코드에 차이가 있다. data structure만을 제공하는 것이 아니라 crdt 를 synchronize하는 networking code도 포함되어 있다. webrtc provider which comes with yjs lib. 와 indexdb를 사용했다. indexdb는 browser 내부에 있는 database이고, key-value type 을 제공한다. client side에서 indexdb를 사용해서 offline 작업을 지원한다. yjs provider를 사용해서 crdt database를 indexdb에 synchronize해서 offline작업이 가능하도록 한다. event handler안에서 state를 mutate할 때 crdt api를 사용한다.
Demonstration
- chrome, firefox 사이에서 collaborate 가능.
- offline support를 하기 때문에 chrome 에서 network 를 offline으로 해도 똑같이 유지된다.
- indexdb를 보면 여러개의 record가 있음. 하나의 레코드가 뭔지 알 필요는 없지만 single modification 과 연결되어있을 것.
- mashes the updates together 한다. 결과는 conflict-free, 결과적으로는 모든 사람이 same update를 가지고 마지막으로 보는 것이 같다는것을 보장한다.
- 또한 똑같은 object에 대해서 하나는 offline 에서 변경하고, 한 browser에서는 online 으로 변경해놓고 이후 offline-> online으로 하면 둘다 보는 화면이 똑같아진다.
코드 분석은 다음 글에서..!
- SolidJS 사용 (관련해서 공부하기) & vite 사용
- yjs library & y-indexeddb & y-webrtc 사용
Reference
https://github.com/dairyisscary/syn
What to read next
solid js 관련
https://typeofnan.dev/solid-js-feels-like-what-i-always-wanted-react-to-be/
https://ui.toast.com/posts/ko_20220331
'Collaborative Editing' 카테고리의 다른 글
| [동시 협업 툴-6] tldraw과 yjs를 사용한 multiplayer drawing app 예제 (TBU) (0) | 2023.03.12 |
|---|---|
| [동시 협업 툴-5] 간단한 Yjs사용한 앱 코드 분석 (3. y-websocket server with persistence) (0) | 2023.01.24 |
| [동시 협업 툴-4] 간단한 Yjs사용한 앱 코드 분석 (2. Yjs Docs 살펴보기) (0) | 2023.01.19 |
| [동시 협업 툴-3] 간단한 Yjs사용한 앱 코드 분석 (1. SolidJS 사용에 관해) (0) | 2023.01.17 |
| [동시 협업 툴-1] 여러명의 사용자가 동시에 같은 문서를 편집할 때 서버는 어떤 동작을 해야할까? (OT와 CRDT) (0) | 2023.01.13 |