shared editing on the web: a classification of developer support frameworks
TRANSCRIPT
Lehrstuhl Informatik 5 (Information Systems)
Prof. Dr. M. Jarke 1
Learning Layers
This slide deck is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.
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 | [email protected]
CollaborateCom 2013 2013-10-23 Austin, TX, USA
Lehrstuhl Informatik 5 (Information Systems)
Prof. Dr. M. Jarke 2
Learning Layers
Responsive Open
Community Information
Systems
Community Visualization
and Simulation
Community Analytics
Community
Support
Web Analytics W
eb E
ngin
eerin
g
Advanced / ATLAS / Awesome / Aachen Community Information Systems (ACIS)
Requirements Engineering
Lehrstuhl Informatik 5 (Information Systems)
Prof. Dr. M. Jarke 3
Learning Layers
ACIS Web Applications
Lehrstuhl Informatik 5 (Information Systems)
Prof. Dr. M. Jarke 4
Learning Layers Popular Collaborative Applications
on the Web
Lehrstuhl Informatik 5 (Information Systems)
Prof. Dr. M. Jarke 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 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 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 8
Learning Layers
Consistency Algorithms
Operational Transformation
Lehrstuhl Informatik 5 (Information Systems)
Prof. Dr. M. Jarke 9
Learning Layers
Consistency Algorithms
Differential Synchronization
Lehrstuhl Informatik 5 (Information Systems)
Prof. Dr. M. Jarke 10
Learning Layers Architectures for Shared Editing
Systems
Centralized Peer-to-peer Hybrid
Lehrstuhl Informatik 5 (Information Systems)
Prof. Dr. M. Jarke 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 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 13
Learning Layers
Google Drive SDK Realtime API
Object oriented approach Integrated in Google Drive ecosystem History support (undo/redo) UI binding
https://developers.google.com/drive/realtime/
// 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 14
Learning Layers
OpenCoweb
Utilizes operational transformation Comes with ready-made widgets (text, maps, chat)
OT library available separately
http://opencoweb.org/
collab.sendSync("examplename", "x", "insert", 5); collab.sendSync("examplename", null, "delete", 5);
Lehrstuhl Informatik 5 (Information Systems)
Prof. Dr. M. Jarke 15
Learning Layers
MobWrite
Uses differential synchronization Syncs HTML elements Two data types: text and numbers
https://code.google.com/p/google-mobwrite/
mobwrite.share("textfield"); mobwrite.unshare("textfield");
Lehrstuhl Informatik 5 (Information Systems)
Prof. Dr. M. Jarke 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
http://sharejs.org/
doc.submitOp({i:"Some text", p:100}, callback); doc.insert(100, "Some text", callback);
Lehrstuhl Informatik 5 (Information Systems)
Prof. Dr. M. Jarke 17
Learning Layers
Changesets
Low level access to OT functionality Only plain-text Changes must be sent to collaborators manually
https://github.com/marcelklehr/changesets
doc.submitOp({i:"Some text", p:100}, callback); doc.insert(100, "Some text", callback);
Lehrstuhl Informatik 5 (Information Systems)
Prof. Dr. M. Jarke 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> <h2>Chapter 2</h2> <p>This chapter explains ba bla bla</p> </body> </html>
Lehrstuhl Informatik 5 (Information Systems)
Prof. Dr. M. Jarke 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 20
Learning Layers
ROLE Sandbox & SDK
Space (shared by multiple users)
Web application (composed of widgets)
Widget (collaborative web component)
http://role-sandbox.eu/
Lehrstuhl Informatik 5 (Information Systems)
Prof. Dr. M. Jarke 21
Learning Layers
ROLE Inter-Widget Communication
Lehrstuhl Informatik 5 (Information Systems)
Prof. Dr. M. Jarke 22
Learning Layers
Learning Design Authoring Tool
Uses OpenCoweb’s standalone OT library
Lehrstuhl Informatik 5 (Information Systems)
Prof. Dr. M. Jarke 23
Learning Layers
House of Quality tool
Uses Google Realtime API
Lehrstuhl Informatik 5 (Information Systems)
Prof. Dr. M. Jarke 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 25
Learning Layers
fin
This work was supported by the LAYERS FP7 ICT Integrated Project of the European Commission (grant agreement no. 318209).