Build Collaborative Apps: JavaScript Operational Transform

2 min readOct 24, 2014

We should never have to refresh a page or look at stale data. We need our apps to be real-time, always updating, even when we’re not using them. Apps should be collaborative, and operational transform is the way to do that.

Operational Transform Collaborative App

In his talk below from SF JavaScript at PubNub HQ, Joseph Gentle walks through how operation transform works, how to build apps using this technology (with in this case ShareJS and DerbyJS), and what tools we really want that nobody has built yet.

Joseph worked on Google Wave in Sydney, and his heart was broken when it was cancelled. Since all problems can be solved with code, he’s spent the last 3 years rebuilding a lot of Wave’s unique technology as an open source library. The end result is ShareJS, an open source operational transform library for NodeJS and browsers.

Building Collaborative Apps: JavaScript Operational Transform from PubNub on Vimeo.

Operational Transform Overview

Operational Transform (OT) is a technology that enables developers to build collaborative applications. When you think of an OT use case, think collaborative editors: Google Docs, Mockingbird, Zoho Suite, etc. Users can collaborate in an environment and their changes are reflected in real time across all devices connected.

There are 3 benefits to using operational transform:

  1. Your model data gets updated in real time
  2. Seamless online/offline integration
  3. We never accidentally over write our data (F/LWW)

The best kept secret of Google Wave and hackpad is that operational transform (the collaboration algorithms) can be used to edit almost any JSON data. As a result, you can add real-time collaborative features to anything! And you can do it in a way that never loses user data and never needs to lock or add messy conflict markers.

More from PubNub

How to Create a Dating App: 7 Steps to Fit Any Design
Insights6 minMar 15, 2023

How to Create a Dating App: 7 Steps to Fit Any Design

There are common underlying technologies for a dating app, and in this post, we’ll talk about the major technologies and designs...

Michael Carroll

Michael Carroll

How to Create a Real-time Public Transportation Schedule App
Build6 minMar 14, 2023

How to Create a Real-time Public Transportation Schedule App

How to use geohashing, JavaScript, Google Maps API, and BART API to build a real-time public transit schedule app.

Michael Carroll

Michael Carroll

How to Create Real-Time Vehicle Location Tracking App
Build2 minMar 9, 2023

How to Create Real-Time Vehicle Location Tracking App

How to track and stream real-time vehicle location on a live-updating map using EON, JavaScript, and the Mapbox API.

Michael Carroll

Michael Carroll

Talk to an expert