collaboration the joy of real-time · 2014. 9. 3. · with thanks to dario taraborelli, ori livneh,...
TRANSCRIPT
![Page 1: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/1.jpg)
The Joy of Real-Time Collaboration
Erik Moeller and C. Scott Ananian / Designs by Pau Giner - Wikimania 2014 With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte
![Page 2: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/2.jpg)
Real-time editing todayExample article: “2014 pro-Russian unrest in Ukraine” on English Wikipedia
![Page 3: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/3.jpg)
Real-time editing todayExample article: “2014 pro-Russian unrest in Ukraine” on English Wikipedia
![Page 4: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/4.jpg)
Real-time editing todayExample article: “2014 pro-Russian unrest in Ukraine” on English Wikipedia
![Page 5: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/5.jpg)
Real-time chat todayExcerpt from https://meta.wikimedia.org/wiki/IRC/Channels
![Page 6: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/6.jpg)
Real-time chat todayExcerpt from https://meta.wikimedia.org/wiki/IRC/Channels
![Page 7: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/7.jpg)
Pop quiz time!Which kinds of articles are most frequently subject to high velocity editing?
A. Controversial topicsB. CrimeC. DeathsD. DisastersE. EntertainmentF. Politics/War
![Page 8: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/8.jpg)
E. Entertainment
![Page 9: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/9.jpg)
Top 50 high velocity articles (English Wikipedia, ranked by frequency of adjacent edits, May 2014)
Entertainment - 32 articlesMovies and TV shows: 13 articlesSports: 12 articlesMusic: 6 articlesVideo games: 1 article
Politics/War - 11 articlesDisasters - 4 articlesControversial topics - 1 articleCrime - 1 articleDeaths - 1 article
![Page 10: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/10.jpg)
![Page 11: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/11.jpg)
Edit conflictsEnglish Wikipedia, July 2014
● >120,000 edit conflicts● 23,000 registered users encountered a
conflict● Top conflicting articles:
○ Malaysia Airlines Flight 17 - 289 conflicts○ Twitch (website) - 207 conflicts○ Operation Protective Edge - 102 conflicts○ Germany national football team - 72 conflicts○ FIFA World Cup records - 71 conflicts
![Page 12: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/12.jpg)
![Page 13: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/13.jpg)
N.Agas starts a new article and asks other members of the Astronomy WikiProject to join editing together.
![Page 14: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/14.jpg)
N.Agas starts a new article and asks other members of the Astronomy WikiProject to join editing together.
![Page 15: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/15.jpg)
Jane joins the session to edit “274301 Wikipedia” (asteroid) in real-time mode
![Page 16: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/16.jpg)
Jane joins the session to edit “274301 Wikipedia” (asteroid) in real-time mode
![Page 17: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/17.jpg)
Other users add content to the article at the same time. Jane wants to find out who they are ..
![Page 18: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/18.jpg)
Jane can view who is participating in the article...
![Page 19: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/19.jpg)
...and what are they working on.
![Page 20: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/20.jpg)
With the live history view, Jane can see changes as they happen, and navigate a timeline of changes.
![Page 21: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/21.jpg)
Jane can focus on a given paragraph to view authorship...
![Page 22: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/22.jpg)
..or on given authors to view how much they contributed.
![Page 23: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/23.jpg)
Key challenges● One version - multiple authors● One “version”?● Real-time vandalism● Co-existence of real-time and non-real-time
○ Focused writing○ Unsupported browsers○ Social reasons
● Chat misuse● Wikitext itself
![Page 24: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/24.jpg)
Key applications
● Current events● Conflict resolution● Mentoring● Targeted collaborations● ... and some we can’t imagine
![Page 25: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/25.jpg)
![Page 26: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/26.jpg)
Real-time Collaborative Editing with TogetherJS
C. Scott Ananian <[email protected]>[[User:cscott]]
Wikimania 2014, London, UKAugust 9, 2014
![Page 27: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/27.jpg)
Edit conflict! Someone else has changed this page since
you started editing it.
![Page 28: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/28.jpg)
Demo.
![Page 29: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/29.jpg)
What the heck is this?
https://www.mediawiki.org/wiki/Extension:TogetherJS[*]
...which is based on TogetherJS from Mozilla labs:
https://togetherjs.com/
You can install TogetherJS on an arbitrary webpage. The TogetherJS extension includes additional code to integrate TogetherJS, Visual Editor, and the MediaWiki account system.
![Page 30: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/30.jpg)
How does it work?
![Page 31: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/31.jpg)
How does it work?
magic
![Page 32: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/32.jpg)
Fat client, thin hub
The hub is a very small site-independent node.js server. It does exactly one thing: order messages from the clients and rebroadcast them.
Hub
Client
Client
Client
![Page 33: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/33.jpg)
Operational Transformation (OT)
A Bdoc
B’ A’doc’
TRANSPOSE(A,B) ⇒ (A’,B’)
Insert “foo” Apply boldface
![Page 34: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/34.jpg)
Hub is responsible for ordering
Everyone sees the same ordered stream of edits:
A1
B1
B2
C3
D4
A3
A5
…
Subscript indicates the version of the document which the edit applies to.[*]
![Page 35: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/35.jpg)
Hub is responsible for ordering
Everyone sees the same ordered stream of edits:
A1
B1
B2
C3
D4
A3
A5
…
Subscript indicates the version of the document which the edit applies to.[*]
Everyone can see which of these are invalid.
When one of your edits is invalid, use the transpose algorithm to update it, and resend.
X X
![Page 36: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/36.jpg)
Transactions for Wikitext edits
1. Insert a string of characters2. Delete a string of characters3. Replace a string of characters with a different
one.
![Page 37: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/37.jpg)
Transactions for Wikitext edits
1. Insert a string of characters2. Delete a string of characters3. Replace a string of characters with a different
one.
(really only one type)
![Page 38: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/38.jpg)
Transactions for Visual Editor
Alternating metadata and data:
m0,0
m0,1
d0
m1,0
d1
d2
m3,0
m3,1
d3
m4,0
HTML matching this sequence of metadata and data:<!-- comment! -->
<meta … />
<p><!-- sigh -->ab<!--yes--><!--no--></p>
<!-- eof -->
![Page 39: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/39.jpg)
Transactions for Visual Editor
1. Replace elements from the linear model○ Either squashing metadata or deleting it
2. Replace metadata from the linear model3. Insert (a portion of a) document4. Set/clear attributes on an element
○ For example, list style from ‘bullet’ to ‘number’
5. Set/clear annotations on a range of elements○ For example, “bold” or “italic”
![Page 40: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/40.jpg)
OK, just make it work!
https://www.mediawiki.org/wiki/Extension:TogetherJS
...but at the moment requires a patched copy of Visual Editor.
![Page 41: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/41.jpg)
OK, just make it work!
https://www.mediawiki.org/wiki/Extension:TogetherJS
...but at the moment requires a patched copy of Visual Editor.
...and it’s not actually deployed on Wikipedia.
![Page 42: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/42.jpg)
OK, just make it work!
https://www.mediawiki.org/wiki/Extension:TogetherJS
...but at the moment requires a patched copy of Visual Editor.
...and it’s not actually deployed on Wikipedia.
Alternatively, add:importScript( 'User:cscott/TogetherJS-demo.js' );
to [[Special:MyPage/common.js]] on your favorite wiki (and have your friends do the same).
![Page 43: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/43.jpg)
Some open questions (and unimplemented features)
● How do we find other editors?● Do we need “user groups”?● How to record/display who wrote what in a
collaborative session?● When is a collaborative edit “done”?
![Page 44: Collaboration The Joy of Real-Time · 2014. 9. 3. · With thanks to Dario Taraborelli, Ori Livneh, and Erik Zachte. Real-time editing today Example article: “2014 pro-Russian unrest](https://reader035.vdocument.in/reader035/viewer/2022071415/611105349c5b1971191f4922/html5/thumbnails/44.jpg)
Social impact
Teahouse / new user walkthroughs
Do we need friends lists? “Circles”?(Do we become Facebook?)
Making visible the community behind the wiki.
(Are we a social forum, or a sober & canonical reference?)