diffsync

build collaborative applications easily

Jan Monschke / @thedeftone / github.com/janmonschke

Frontend Engineer at SoundCloud

This talk is based on research by

Fraser, Neil (2009) [Fra09]
Differential synchronization
http://doi.acm.org/10.1145/1600193.1600198

Sun et al. (1998) [Sun98]
Achieving convergence, causality preservation, and intention preservation in real-time cooperative editing systems
http://dl.acm.org/citation.cfm?doid=274444.274447

Monschke, Jan (2014) [Mon14]
Building a collaborative music production environment using emerging web standards
https://github.com/janmonschke/Master-s-Thesis---Web-Audio-DAW

What are collaborative applications?

Google Docs, Wunderlist, Trello…

Who here has built an application like that before?

How did you sync?

How to sync state?

Requirements

[Sun98]

Convergence

Due to latency on web, documents might be in different states at the same time.

The algorithm should allow these states and not block the editing features.

Intention preservation

The intent of a change should be preserved.

When local changes are applied onto remote documents, the local intent should be preserved.

Causality preservation

A change is always applied in its causal context.

The order of changes on local documents is preserved and applied to remote documents.

Lock and Release

a.k.a the pessimistic approach

  • While editing, the object is locked for all other users
  • Not really collaborative
  • Even for fine-grained property-locking
  • Handle even more state (locks) 😞

Operational Transformation

The magic that powers Google Wave Docs

  • Send each operation to the server
  • The server applies and distributes them
  • A lot of work required to understand and build a reliable system
  • ShareJS rocks 😎

but...

  • ShareJS locks you into using MongoDB
  • You still need to understand OT
  • The documentation and versioning is highly confusing (*)
    • (*) don't get me wrong, Joseph Gentle, your library still rocks, it just didn't work for me ❤️

Differential Synchronization

Find witty punchline

  • Send diffs of your changes to a server
  • The server applies them and notifies peers
  • Peers start a synchronization cycle
Differential Synchronization explained (YouTube)
  • YouTube video-driven development
  • Easier to understand (imho)
  • Can sync arbitrary data (e.g. JSON, text, XML)
  • provides: convergence, intention + causality preservation out of the box [Mon14, 3.7 Differential Synchronization]

npm install diffsync

  • Client and Server implementation of DS
  • Database-agnostic
  • Dead-simple backend integration
  • Very easy to use with React, Backbone and AngularJS

How easy?

Demo time

diffsync-todos.herokuapp.com

Collaborative music application

Thanks

@thedeftone / github.com/janmonschke

How do I detect changes to trigger syncs?

  • Angular: Tracking the diffsynced object is doing that automatically for you
  • JS: (Object|Array).observe() (polyfill)
  • Trigger syncs manually in your model/view layer