Building a real-time collaborative editor using Operational Transformation

Real challenge of collaborative editing

Bringing Latency into action

Starting Document State -> ABCD
"Insert 'X'" operation at offset 3 [local] -> ABCXD
"Delete 'B'" operation at offset 1 [remote] -> ACXD
Starting Document State -> ABCD
"Delete 'B'" operation at offset 1 [local] -> ACD
"Insert 'X'" operation at offset 3 [remote] -> ACDX

Operational Transformation Algorithm

How does Operational Transformation work?

  • Every change (insertion or deletion) is represented as an operation. An operation can be applied to the current document which results into a new document state.
  • To handle concurrent operations, we use the tranform function that takes two operations that have been applied to the same document state (but on different clients) and computes a new operation that can be applied after the second operation and that preserves the first operation’s intended change.
Starting Document State -> ABCD
"Insert 'X'" operation at offset 3 [local] -> ABCXD
"Delete 'B'" operation at offset 1 [transformed] -> ACXD
Starting Document State -> ABCD
"Delete 'B'" operation at offset 1 [local] -> ACD
"Insert 'X'" operation at offset 2 [transformed] -> ACXD //Transform function would add add it in the new (3 - 1 = 2) position

Client — Server [OT] Approach to Collaborative Editing

Conclusion

Resources

--

--

--

Engineer @Devfolio.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

A Conversation Between Modernism & Post-Modernism

From Cloud Noob to Certified Kubernetes Administrator (CKA) in 3 Months

Flutter platform adoptive User Interface on android and IOS both

8 Agile Testing Best Practices That Will Help To Boost Efficiency And Productivity Of Your Team

Scaling Millions of Connections with a Zero-propagation Dynamic DNS

Basic Car-Game using python(Part -4)

7 Great Tools to Help You While Working Remotely

The 10 Golden Rules of Getting and Staying Fit

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Srijan Agarwal

Srijan Agarwal

Engineer @Devfolio.

More from Medium

EC by Examples: Getting and Putting values in the Primitive Map API.

FREECODECAMPCHALLENGE

Design Patterns — Decorator Pattern

Model View Controller Frameworks Explained