Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
The Science of Etherpad
Search
Tim Cameron Ryan
May 14, 2012
Programming
2
62
The Science of Etherpad
How does Operational Transform work?
Tim Cameron Ryan
May 14, 2012
Tweet
Share
More Decks by Tim Cameron Ryan
See All by Tim Cameron Ryan
BayNode Meetup June 2014
tcr
1
79
Elevator redesign: Team Unibros Final Presentation
tcr
0
430
Other Decks in Programming
See All in Programming
速いWebフレームワークを作る
yusukebe
5
1.7k
AIコーディングAgentとの向き合い方
eycjur
0
270
RDoc meets YARD
okuramasafumi
4
170
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
300
AI時代のUIはどこへ行く?
yusukebe
18
8.9k
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.6k
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
690
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
590
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
450
個人軟體時代
ethanhuang13
0
320
Featured
See All Featured
Music & Morning Musume
bryan
46
6.8k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Git: the NoSQL Database
bkeepers
PRO
431
66k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
RailsConf 2023
tenderlove
30
1.2k
Code Reviewing Like a Champion
maltzj
525
40k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Transcript
THE SCIENCE OF ETHERPAD MAKING ANY DOCUMENT COLLABORATIVE, ANYWHERE
Operations
app
apple
“app” + ”le”
app Operation 1 1. insertCharacter “a” 2. insertCharacter “p” 3.
insertCharacter “p“
apple Operation 2 1. retain (skip character) 2. retain (skip
character) 3. retain (skip character) 4. insertCharacter “l” 5. insertCharacter “e“
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“
Composition
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”
Operation 1+2 1. retain (skip character) 2. retain (skip character)
3. retain (skip character) 4. insertCharacter “l” 5. insertCharacter “e“ appl apple
Concurrency
app app CLIENT A CLIENT B
appl appe CLIENT A CLIENT B
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
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
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
appel apple CLIENT A CLIENT B
Operational Transform
“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.
app app CLIENT A CLIENT B SERVER
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
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)
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`
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`
apple apple CLIENT A CLIENT B
CLIENT A CLIENT B A1: retain 3, insert “l” Broadcast
A1 Apply A1` SERVER
CLIENT A CLIENT B SERVER A1: retain 3, insert “l”
B1: retain 3, insert “e” Transform A1 x B1 Apply A1` Apply B1`
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`
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``
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``
Markup
big apple
big apple
<i>big</i> <b>apple</b>
<i>big</i> <b>apple</b>
<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”
a big word a big word CLIENT A CLIENT B
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
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
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
Preserving Intent
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>
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>
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>
• retain • deleteCharacter • deleteStartTag(tag, attrs) • deleteEndTag() •
deleteEmptyTag() • insertCharacter • insertStartTag(tag, attrs) • insertEndTag() • insertEmptyTag() • modifyAttrs(attrs) Deletion Phase Insertion Phase OPERATION ATOMS
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