This document discusses developer support libraries for shared editing on the web. It begins by outlining server-push technologies like Ajax, Comet, and WebSockets that enable real-time collaboration. Consistency algorithms like operational transformation and differential synchronization that power collaborative editing are also introduced. Popular libraries are then surveyed, including Google Drive Realtime API, OpenCoweb, MobWrite, and ShareJS. The document concludes by discussing the ROLE SDK and collaborative tools built with it, along with an outlook on future work.

1. Learning
Layers
CollaborateCom 2013
2013-10-23
Austin, TX, USA
Shared Editing on the Web:
A Classification of Developer
Support Libraries
István Koren, Andreas Guth, Ralf Klamma
Advanced Community Information Systems (ACIS)
RWTH Aachen University, Germany
koren | guth | klamma@dbis.rwth-aachen.de
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
1
This slide deck is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.

2. Advanced / ATLAS / Awesome / Aachen
Community Information Systems (ACIS)
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
2
Responsive
Open
Community
Information
Systems
Community
Visualization
and
Simulation
Community
Support
Community
Analytics
Requirements
Engineering
Web Analytics
Web Engineering
Learning
Layers

3. Learning
Layers
ACIS Web Applications
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
3

4. Learning
Layers
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
4
Popular Collaborative Applications
on the Web

5. Learning
Layers
Motivation for Developing Web Apps
 Many
Platforms
– Mobile cross-platform development tools
– Completely Web based OS’s
– Responsive Web Design
 Multiple
devices per user
 Many “script” developers join the market
 It is very hard to develop Shared Editing from scratch!
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
5

6. Learning
Layers
Server-Push Technologies
 Ajax
 Comet
 WebSockets
 various
JS libraries available
– socket.io, BrowserChannel, CometD
 XMPP
offers structured data exchange
between client and server
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
6

7. Learning
Layers
WebRTC – Peer-to-Peer on the Web
 Audio
& Video Communication
 DataChannel for sending arbitrary data
 Signaling server required
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
7

8. Learning
Layers
Consistency Algorithms
 Operational
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
8
Transformation

9. Learning
Layers
Consistency Algorithms
 Differential
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
9
Synchronization

10. Learning
Layers
Architectures for Shared Editing
Systems
 Centralized
 Peer-to-peer
 Hybrid
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
10

11. Learning
Layers
Workspace Awareness
 Answers
Who, What and Where questions
 Participant
list
 Teleselection
 Telepointers
 Radar view
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
11

12. Learning
Layers
Workspace Awareness Tools
(case Etherpad)
1: User-specific colors
2: Mouseover effects
3: Participant list
4: Chat
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
12

13. Learning
Layers
Google Drive SDK Realtime API
 Object
oriented approach
 Integrated in Google Drive ecosystem
 History support (undo/redo)
 UI binding
// initialize string variable
var str = model.createString(’Hello World!’);
model.getRoot().set(’text’, str);
var textArea = document.getElementById(’edit’);
realtime.databinding.bindString(str, textArea);
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
13
 https://developers.google.com/drive/realtime/

14. Learning
Layers
OpenCoweb
 Utilizes
operational transformation
 Comes with ready-made widgets (text, maps, chat)
collab.sendSync("examplename", "x", "insert", 5);
collab.sendSync("examplename", null, "delete", 5);
 OT
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
14
library available separately
 http://opencoweb.org/

15. Learning
Layers
MobWrite
 Uses
differential synchronization
 Syncs HTML elements
 Two data types: text and numbers
mobwrite.share("textfield");
mobwrite.unshare("textfield");
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
15
 https://code.google.com/p/google-mobwrite/

16. Learning
Layers
ShareJS
 Server
runs on node.js
 Large parts of source taken from Etherpad
 OT operations for arbitrary JSON objects
 No history support
doc.submitOp({i:"Some text", p:100}, callback);
doc.insert(100, "Some text", callback);
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
16
 http://sharejs.org/

17. Learning
Layers
Changesets
 Low
level access to OT functionality
 Only plain-text
 Changes must be sent to collaborators manually
doc.submitOp({i:"Some text", p:100}, callback);
doc.insert(100, "Some text", callback);
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
17
 https://github.com/marcelklehr/changesets

18. Learning
Layers
Collaborative Editing Framework for
XML (CEFX)
 Not
targeted for Web; XMPP for message exchange
 Uses multiple history-buffers per document
– queues of remote operations
– updates do not affect other nodes
<!DOCTYPE html>
<html>
<body>
<p>
<a href="#C4">See also Chapter 4.</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
18
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>

19. Learning
Layers
Comparison
 All
but one based on OT
 Lack of awareness tools
 Well-documented
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
19

20. Learning
Layers
ROLE Sandbox & SDK
Web application (composed of widgets)
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
20
Space (shared by multiple users)
Widget (collaborative web
component)
http://role-sandbox.eu/

21. Learning
Layers
ROLE Inter-Widget Communication
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
21

22. Learning
Layers
Learning Design Authoring Tool
 Uses
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
22
OpenCoweb’s standalone OT library

23. Learning
Layers
House of Quality tool
 Uses
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
23
Google Realtime API

24. Learning
Layers
Outlook
 Provide
awareness widgets for ROLE SDK
 Build P2P systems with WebRTC
 Learn from user feedback
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
24

25. Learning
Layers
fin
This work was supported by the LAYERS FP7 ICT Integrated Project of
the European Commission (grant agreement no. 318209).
Lehrstuhl Informatik 5
(Information Systems)
Prof. Dr. M. Jarke
25