Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Science of Etherpad

Avatar for Tim Cameron Ryan Tim Cameron Ryan
May 14, 2012
Programming
2
62

The Science of Etherpad

How does Operational Transform work?
Avatar for Tim Cameron Ryan

Tim Cameron Ryan

May 14, 2012
Tweet

More Decks by Tim Cameron Ryan

See All by Tim Cameron Ryan
BayNode Meetup June 2014
Avatar for Tim Cameron Ryan tcr
1
79
Elevator redesign: Team Unibros Final Presentation
Avatar for Tim Cameron Ryan tcr
0
430

Other Decks in Programming

See All in Programming
ニーリーにおけるプロダクトエンジニア
Avatar for Nealle nealle
0
620
AIコーディング道場勉強会#2 君（エンジニア）たちはどう生きるか
Avatar for misaki.otb misakiotb
1
260
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
Avatar for shiro seike seike460
PRO
1
710
LINEヤフー データグループ紹介
Avatar for LINEヤフー株式会社 採用情報 lycorp_recruit_jp
0
1.3k
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
Avatar for Takuya Katsusa takuyakatsusa
2
440
Java on Azure で LangGraph！
Avatar for Kohei Saito kohei3110
0
170
都市をデータで見るってこういうこと　PLATEAU属性情報入門
Avatar for nokonoko1203 nokonoko1203
1
580
CursorはMCPを使った方が良いぞ
Avatar for taiga taigakono
1
190
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
Avatar for panda_program panda_program
6
1.7k
既存デザインを変更せずにタップ領域を広げる方法
Avatar for Tiphaine tahia910
1
240
すべてのコンテキストを、 ユーザー価値に変える
Avatar for Michiru Kato applism118
2
950
Node-RED を（HTTP で）つなげる MCP サーバーを作ってみた
Avatar for High U highu
0
110

Featured

See All Featured
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.7k
Designing for Performance
Avatar for Lara Hogan lara
609
69k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
710
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
524
40k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
51
8.5k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.5k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
328
39k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
2.9k

Transcript

  1. THE SCIENCE OF ETHERPAD MAKING ANY DOCUMENT COLLABORATIVE, ANYWHERE

  2. Operations

  3. app

  4. apple

  5. “app” + ”le”

  6. app Operation 1 1.  insertCharacter “a” 2.  insertCharacter “p” 3. 

    insertCharacter “p“

  7. apple Operation 2 1.  retain (skip character) 2.  retain (skip

    character) 3.  retain (skip character) 4.  insertCharacter “l” 5.  insertCharacter “e“

  8. applecore Operation 2 1.  retain (skip character) 2.  retain (skip

    character) 3.  retain (skip character) 4.  retain (skip character) 5.  retain (skip character) 6.  insertCharacter “c” 7.  insertCharacter “o“ 8.  insertCharacter “r“ 9.  insertCharacter “e“

  9. Composition

  10. appl Operation 1 1.  retain (skip character) 2.  retain (skip

    character) 3.  retain (skip character) 4.  insertCharacter “l” apple Operation 2 1.  retain (skip character) 2.  retain (skip character) 3.  retain (skip character) 4.  retain (skip character) 5.  insertCharacter “e”

  11. Operation 1+2 1.  retain (skip character) 2.  retain (skip character)

    3.  retain (skip character) 4.  insertCharacter “l” 5.  insertCharacter “e“ appl apple

  12. Concurrency

  13. app app CLIENT A CLIENT B

  14. appl appe CLIENT A CLIENT B

  15. appl Operation A 1.  retain (skip character) 2.  retain (skip

    character) 3.  retain (skip character) 4.  insertCharacter “l” appe Operation B 1.  retain (skip character) 2.  retain (skip character) 3.  retain (skip character) 4.  insertCharacter “e” CLIENT A CLIENT B

  16. appl Operation B 1.  retain (skip character) 2.  retain (skip

    character) 3.  retain (skip character) 4.  insertCharacter “e” appe Operation A 1.  retain (skip character) 2.  retain (skip character) 3.  retain (skip character) 4.  insertCharacter “l” CLIENT A CLIENT B

  17. appel Operation B 1.  retain (skip character) 2.  retain (skip

    character) 3.  retain (skip character) 4.  insertCharacter “e” apple Operation A 1.  retain (skip character) 2.  retain (skip character) 3.  retain (skip character) 4.  insertCharacter “l” CLIENT A CLIENT B

  18. appel apple CLIENT A CLIENT B

  19. Operational Transform

  20. “A theoretical framework of concurrency control” that “provides a mechanism

    for sanely resolving [editing] conflicts so that neither user intervention or locking become necessary.” A mechanism to “transform” two operations in conflict, resulting in two new operations which bring both clients into a common state.

  21. app app CLIENT A CLIENT B SERVER

  22. appl Operation A 1.  retain (skip character) 2.  retain (skip

    character) 3.  retain (skip character) 4.  insertCharacter “l” CLIENT A SERVER 1 appe Operation B 1.  retain (skip character) 2.  retain (skip character) 3.  retain (skip character) 4.  insertCharacter “e” CLIENT B 2

  23. Operation A 1.  retain (skip character) 2.  retain (skip character)

    3.  retain (skip character) 4.  insertCharacter “l” SERVER TRANSFORM Operation B 1.  retain (skip character) 2.  retain (skip character) 3.  retain (skip character) 4.  insertCharacter “e” Operation B` 1.  retain (skip character) 2.  retain (skip character) 3.  retain (skip character) 4.  retain (skip character) 5.  insertCharacter “e” Operation A` 1.  retain (skip character) 2.  retain (skip character) 3.  retain (skip character) 4.  insertCharacter “l” 5.  retain (skip character)

  24. appl Operation B` 1.  retain (skip character) 2.  retain (skip

    character) 3.  retain (skip character) 4.  retain (skip character) 5.  insertCharacter “e” CLIENT A SERVER appe Operation A` 1.  retain (skip character) 2.  retain (skip character) 3.  retain (skip character) 4.  insertCharacter “l” 5.  retain (skip character) CLIENT B B` A`

  25. apple Operation B` 1.  retain (skip character) 2.  retain (skip

    character) 3.  retain (skip character) 4.  retain (skip character) 5.  insertCharacter “e” CLIENT A SERVER apple Operation A` 1.  retain (skip character) 2.  retain (skip character) 3.  retain (skip character) 4.  insertCharacter “l” 5.  retain (skip character) CLIENT B B` A`

  26. apple apple CLIENT A CLIENT B

  27. CLIENT A CLIENT B A1: retain 3, insert “l” Broadcast

    A1 Apply A1` SERVER

  28. CLIENT A CLIENT B SERVER A1: retain 3, insert “l”

    B1: retain 3, insert “e” Transform A1 x B1 Apply A1` Apply B1`

  29. CLIENT A CLIENT B SERVER A1: retain 3, insert “l”

    B1: retain 3, insert “e” A2: retain 4, insert “core” Transform A1 x B1 Apply A1` Transform A2 x B1` Apply B1`` Broadcast A2 Apply A2`

  30. CLIENT A CLIENT B SERVER A1: retain 3, insert “l”

    B1: retain 3, insert “e” A2: retain 4, insert “core” Transform A1 x B1 B2: retain 4, insert “sauce” Transform B2 x A1` Apply A1`` Transform A2 x B1` Apply B1`` Transform A2` x B2` Apply A2`` Apply B2``

  31. CLIENT A CLIENT B SERVER A1: retain 3, insert “l”

    B1: retain 3, insert “e” A2: retain 4, insert “core” Transform A1 x B1 B2: retain 4, insert “sauce” Transform B2 x A1` Apply A1`` Transform A2 x B1` Apply B1`` Transform A2` x B2` Apply A2`` Apply B2``

  32. Markup

  33. big apple

  34. big apple

  35. <i>big</i> <b>apple</b>

  36. <i>big</i> <b>apple</b>

  37. <i>big</i> <b>apple</b> Operation 1.  insertStartTag “i” 2.  insertCharacter “b” 3. 

    insertCharacter “i” 4.  insertCharacter “g” 5.  insertEndTag “i” 6.  insertCharacter “ ” 7.  insertStartTag “b” 8.  insertCharacter “a” 9.  insertCharacter “p” 10.  insertCharacter “p” 11.  insertCharacter “l” 12.  insertCharacter “e” 13.  insertEndTag “b”

  38. a big word a big word CLIENT A CLIENT B

  39. a <b>big</b> word Operation A 1.  retain 2 2.  insertStartTag

    “b” 3.  retain 3 4.  insertEndTag “b” a biiiiig word Operation B 1.  retain 3 2.  insertCharacters “iiii” CLIENT A CLIENT B

  40. a <b>big</b> word Operation B` 1.  retain 4 2.  insertCharacters

    “iiii” a biiiiig word Operation A` 1.  retain 2 2.  insertStartTag “b” 3.  retain 5 4.  insertEndTag “b” CLIENT A CLIENT B

  41. a <b>biiiiig</b> word Operation B` 1.  retain 4 2.  insertCharacters

    “iiii” a <b>biiiiig</b> word Operation A` 1.  retain 2 2.  insertStartTag “b” 3.  retain 5 4.  insertEndTag “b” CLIENT A CLIENT B

  42. Preserving Intent

  43. CLIENT A CLIENT B Desired Word1 Word2 Word3 <ol> <li>

    Word4 Word5 Word6 </li> </ol> <ol> <li> Word1 Word2 Word3 Word4 </li> </ol> Word5 Word6 <ol> <li> Word1 Word2 Word3 Word4 Word5 Word6 </li> </ol>

  44. CLIENT A CLIENT B Desired Word1 Word2 <p> Word3 Word4

    Word5 Word6 </p> <h1> Word1 Word2 Word3 Word4 </h1> Word5 Word6 <h1> Word1 Word2 </h1> <p> Word3 Word4 </p> <p> Word5 Word6 </p>

  45. CLIENT A CLIENT B Desired Word1 Word2 Word3 <i> Word4

    Word5 Word6 Word7 Word8 </i> <b> Word1 Word2 Word3 Word4 Word5 </b> Word6 Word7 Word8 <b> Word1 Word2 Word3 </b> <bi> Word4 Word5 </bi> <i> Word6 Word7 Word8 </i>

  46. •  retain •  deleteCharacter •  deleteStartTag(tag, attrs) •  deleteEndTag() • 

    deleteEmptyTag() •  insertCharacter •  insertStartTag(tag, attrs) •  insertEndTag() •  insertEmptyTag() •  modifyAttrs(attrs) Deletion Phase Insertion Phase OPERATION ATOMS

  47. Containers like: preserve unlike: priority Blocks like: priority unlike: priority

    Styles like: preserve unlike: merge Inline <ul> <li> <ol> <blockquote> <p> <div> <h1> <h2> <h3> <pre> <b> <i> <span> <u> <s> “text” <br> DOCUMENT SCHEMA