Collaborative Web Apps

Big Ideas

Keeping Things in Sync

Multiple users are editing local copies of a document. How do we make sure everyone can see the same document?

  • Lock/Write/Merge - One person can change the master copy at a time. You have to update your local copy with the changes before writing.
  • Last Writer Wins - Most recent version is accepted. No merging needed.
  • Operational Transformation
  • Differential Synchronization

Operational Transformation

Essentially the command pattern. Changes to the document are abstracted to operations, which can be applied to the document even if it has changed. Daniel Spiewak has an excellent explanation of the algorithm as modified for Google Wave. The technique comes from a research paper published in 1989. See Tim Baumann's website for a simpler explanation with a visualization tool.

Differential Synchronization

Continuously perform a diff-patch on the client, the server does this as well and communicates patches. Neil Fraser has a detailed write-up. View the write-up as a Google TechTalk on Youtube. Fraser also has a demo of performing diff, match, and patch operations on plain text on his website.

Real-Time Web Frameworks

Your site displays the same data to each user. Users modify the data view. The framework silently communicates with the server to broadcast changes in real-time. The site updates automatically for everyone when any change is made.
Take a look at TodoMVC under the Real-time heading for samples and a comparison.

Try it out!

The textbox has ShareJS support - edit the text, and changes will be reflected on any other browser with this page open!

Frameworks, Libraries, and Services

Platform/Library Links Information
ShareJS GitHubWikiSample appWorking Sample Code DOM bindings for textareas, Ace code editor. Open source
TogetherJS GitHubDocs ○ Sample app (CodeLive) All-in-one solution. Open-source project by Mozilla.
Meteor GitHubDocsTutorial Real-time framework, open-sourced. Has a vibrant community and and a good tutorial.
Firebase DocsQuick Start Real-time framework, commercial, owned by Google.
Google Realtime API DocsQuick Start Provides an API for creating collaborative apps backed by a Google Drive Document.