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
登壇は dynamic! な営みである / speech is dynamic
Avatar for Daichi KUDO da1chi
0
350
All About Angular's New Signal Forms
Avatar for Manfred Steyer manfredsteyer
PRO
0
190
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
Avatar for CARTA Engineering carta_engineering
0
330
Cursorハンズオン実践！
Avatar for Ikko Eltociear Ashimine eltociear
2
1.1k
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
Avatar for imkaoru imkaoru
4
860
フロントエンド開発のためのブラウザ組み込みAI入門
Avatar for Masashi Hirano masashi
5
2.2k
SwiftDataを使って10万件のデータを読み書きする
Avatar for akidon0000 akidon0000
0
160
AI駆動で0→1をやって見えた光と伸びしろ
Avatar for passion😎 passion0102
1
440
Catch Up: Go Style Guide Update
Avatar for ANDPAD inc andpad
0
230
Foundation Modelsを実装日本語学習アプリを作ってみた！
Avatar for 蛋白（たんぱく・TANPACT） hypebeans
0
120
Devoxx BE 2025 Loom lab
Avatar for José josepaumard
0
100
Swift Concurrency - 状態監視の罠
Avatar for Yuki Yasoshima objectiveaudio
2
540

Featured

See All Featured
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
23k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
79
6k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
6.9k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
11k
Code Review Best Practice
Avatar for Trisha Gee trishagee
72
19k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
190
55k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
8.9k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k

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