You often want to build an app as quickly as possible. To get some kind of MVP in the hands of users, giving them value and something for you to incrementally improve. Most features can come later, but if you ever intend to offer a shared editing experience of any kind, you really need to think about it up front. At Threads Styling they were faced with such a prospect when planning their Social Story builder. Having worked with CMSs in the past, they knew the pain of managing document locks with all their edge cases. They also knew that eventually the use case will arise to concurrently edit the document, and if you haven’t planned for it, it is a monumental task. By treating the document as a stream of JSON patch changes from the very beginning, they were able to offer real-time collaborative editing with conflict resolution smoothly handled by an Operational Transformation algorithm. In this talk, Jason will build a simple, but working example of a shared document using our open source library.

1. Transformational
Operations!

2. Operational
Transformations!Concurrent Editing with JSON Patch and

3. Who am I, and what
am I doing here?
https://giphy.com

4. Jason Green
Principal Developer at Threads Styling
@aziraphael @threads_eng
Geeky Twitter handle from 10 years
ago which is no excuse cause
I was still 25 years old.
Revolutionary chat commerce
company changing the world
of luxury shopping.

5. https://giphy.com

6. Concurrent Editing with
JSON Patch and
Operational Transformation
https://giphy.com

7. What is
concurrent editing?
https://giphy.com

8. https://giphy.com

9. This must be a solved
problem, right?
https://giphy.com

10. What did we want
https://giphy.com

11. What did we want
• To keep it simple (as Agile as possible)
• To own our data and control it
• To keep it flexible
• To understand how it works
• To keep data eventually consistent across multiple users
• To support arbitrary JSON data structures

12. So what were the options?
• Conflict-free replicated data type (CRDTs) - redis, riak
• Differential Synchronisation - git, svn
• Operational Transformation - google docs
reference: https://irisate.com/collaborative-editing-solutions-round-up

13. Operational
Transformations
Operational Transformation (OT) is an algorithm/
technique for the transformation of operations
such that they can be applied to documents
whose states have diverged, bringing them both
back to the same state.
reference: https://medium.com/@srijancse/how-real-time-collaborative-editing-work-operational-transformation-ac4902d75682

14. ABC
XABC
insert(0, ‘X’)
ABYC
insert(2, ‘Y’)
XABYC
insert(3, ‘Y’)
insert(0, ‘X’)
ServerClient 1 Client 2
XABYC
insert(3, ‘Y’)
XABYC
insert(3, ‘Y’)

15. So why OT then?
• It can resolve all types of conflicts in an acceptable way
without human intervention
• It is good at preserving intention of changes
• It works well with a central source of state
• It can handle offline working ok
• Works well with a series of changes as the source of truth
• It is relatively easy to reason about

16. JSON Patch
{
op: ‘add’,
path: ‘/title’,
value: ‘First title’
}
{
op: ‘replace’,
path: ‘/title’,
value: ‘A new title’
}
{
op: ‘add’,
path: ‘/names/3’,
value: ‘Jason’
}
{
op: ‘move’,
path: ‘/names/0’,
from: ‘/names/3’
}
{
op: ‘remove’,
path: ‘/names/2’
}
{
op: ‘copy’,
path: ‘/names/-’,
from: ‘/names/3’
}

17. Why JSON Patch
• JSON Patch is a format for describing changes to a JSON
document
• We need to standardise how we represent operations
• JSON Patch is serialisable, modifiable, familiar, readable
and reversible (if we record the old value)
• JSON Patch actually makes it much easier to visualise
and understand Operational Transformations

18. How it works between
server and client

19. Actually list of changes

24. @threads/json-patch-ot
• JSON Patch OT lib
https://github.com/ThreadsStyling/json-patch-ot/
• npm install @threads/json-patch-ot
• Example client/server project
https://github.com/jasoniangreen/json-patch-ot-example

25. <Book
onMoveUp={changeHandler("move", `/books/${i - 1}`, `/books/${i}`)}
onMoveDown={changeHandler("move", `/books/${i + 1}`, `/books/${i}`)}
onDelete={changeHandler("remove", `/books/${i}`)}
onTitleChange={changeHandler("replace", `/books/${i}/title`)}
onAuthorChange={changeHandler("replace", `/books/${i}/author`)}
onColorChange={changeHandler("replace", `/books/${i}/color`)}
onInStockChange={changeHandler("replace", `/books/${i}/inStock`)}
onAddAfter={() =>
changeHandler("add", `/books/${i + 1}`)(EMPTY_ENTRY)
}
… etc …
/>

26. router.get("/", async ctx => {
const [result] = applyPatch({}, deepClone(operations.get()));
ctx.body = {
state: result.newDocument,
lastKnownOperationId: operations.get().length - 1
};
});

27. router.post("/", async ctx => {
const lastKnownOperationId: number =
ctx.request.body.lastKnownOperationId;
const patch: Operation[] = ctx.request.body.patch;
const unknownChanges = operations.get().slice(lastKnownOperationId + 1);
const transformedPatch = jsonPatchOT(unknownChanges, patch, {
acceptedWinsOnEqualPath: false
});
operations.push(...transformedPatch);
ctx.body = {
changesToApply: [...unknownChanges, ...transformedPatch],
lastKnownOperationId: operations.get().length - 1
};
});

28. Open-source at Threads
Please follow @threads_eng on Twitter for
updates on open-source and meet-ups.
We recently had a meet-up with one of the top open source contributors
@gajus who was talking about his journey in open-source.
Watch the video and find out about future meet-ups
https://www.meetup.com/JavaScript-Open-source-Meetup/
or https://thrds.biz/meetup
@aziraphael <— me again…. All animated images from giphy.com