shared editing on the web: a classification of developer support frameworks

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



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



Learning Layers

ACIS Web Applications



Learning Layers Popular Collaborative Applications

on the Web



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!



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



Learning Layers

WebRTC – Peer-to-Peer on the Web

  Audio & Video Communication  DataChannel for sending arbitrary data   Signaling server required



Learning Layers

Consistency Algorithms

 Operational Transformation



Learning Layers

Consistency Algorithms

 Differential Synchronization



Learning Layers Architectures for Shared Editing

Systems

 Centralized   Peer-to-peer  Hybrid



Learning Layers

Workspace Awareness

  Answers Who, What and Where questions

  Participant list   Teleselection   Telepointers  Radar view



Learning Layers Workspace Awareness Tools

(case Etherpad)

1: User-specific colors 2: Mouseover effects 3: Participant list 4: Chat



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);



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);



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");



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);



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);



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>



Learning Layers

Comparison

  All but one based on OT   Lack of awareness tools  Well-documented



Learning Layers

ROLE Sandbox & SDK

Space (shared by multiple users)

Web application (composed of widgets)

Widget (collaborative web component)

http://role-sandbox.eu/



Learning Layers

ROLE Inter-Widget Communication



Learning Layers

Learning Design Authoring Tool

 Uses OpenCoweb’s standalone OT library



Learning Layers

House of Quality tool

 Uses Google Realtime API



Learning Layers

Outlook

  Provide awareness widgets for ROLE SDK   Build P2P systems with WebRTC   Learn from user feedback



Learning Layers

fin

This work was supported by the LAYERS FP7 ICT Integrated Project of the European Commission (grant agreement no. 318209).

shared editing on the web: a classification of developer support frameworks

Technology