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
64

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
81
Elevator redesign: Team Unibros Final Presentation
Avatar for Tim Cameron Ryan tcr
0
430

Other Decks in Programming

See All in Programming
CSC307 Lecture 10
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
660
高速開発のためのコード整理術
Avatar for sutetotanuki sutetotanuki
1
410
HTTPプロトコル正しく理解していますか？ 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ﾆｬ〜
Avatar for ♛Heitor Hirose hekuchan
2
690
組織で育むオブザーバビリティ
Avatar for ryotaro kobayashi ryota_hnk
0
180
AIによる高速開発をどう制御するか？ ガードレール設置で開発速度と品質を両立させたチームの事例
Avatar for tonkotsuboy_com tonkotsuboy_com
7
2.4k
「ブロックテーマでは再現できない」は本当か？
Avatar for Takashi Kitajima inc2734
0
1k
KIKI_MBSD Cybersecurity Challenges 2025
Avatar for ikema ikema
0
1.3k
MUSUBIXとは
Avatar for Hisaho nahisaho
0
140
例外処理とどう使い分ける？Result型を使ったエラー設計 #burikaigi
Avatar for Takuma Kajikawa kajitack
16
6.1k
Patterns of Patterns
Avatar for Denys Poltorak denyspoltorak
0
1.4k
副作用をどこに置くか問題：オブジェクト指向で整理する設計判断ツリー
Avatar for Koya Masuda koxya
1
610
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
Avatar for mackey0225 mackey0225
3
380

Featured

See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.4k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.4k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.9k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon szymonslowik
1
920
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
120
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.1k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
160
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
117
110k

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