This post was originally published by Senior Engineer Zak Knill on
Remind me again why this is better? Well, you get realtime collaborative experiences in a data format/structure that you own and control, without suffering any of the downsides of CRDTs. TL;DR - because it works!
Examples of collaboration without CRDTs
I’ll run through a bunch of broad categories of applications, and describe how to make use of these features.
Form builders: Google Forms, Typeform, Attest, etc
Typically lots of smaller individual inputs. You’re unlikely to want two users collaborating on the same form-box at once.
How to make it collaborative:
- Lock the individual inputs/elements that a user is engaging with.
- Add Contextual information to show which user has locked which element.
- Add Contextual information to allow users to indicate to each other with their cursors.
- Have a mechanism to update only the form element that has changed, so that two users making updates at the same time do not overwrite each other
- Have a mechanism to fan-out the update that each user has made to the other user’s in realtime, so that each can see the other’s changes as soon as the input is unlocked.
Task management: Jira, Shortcut, Trello, Linear
Typically lots of ‘cards’ or ’tasks’ with various properties: status, owner, title, description, project, epic, etc.
How to make it collaborative:
- Lock the individual inputs/elements that a user is engaging with.
- Add Contextual information to show which user has locked which element.
- Have a mechanism to update only the form element that has changed, so that two users making updates at the same time do not overwrite each other
- Have a mechanism to fan-out the update that each user has made to the other user’s in realtime, so that each can see the other’s changes as soon as the input is unlocked.
Spreadsheets: Google sheets, Airtable
Typically a ui of rows and columns. Sometimes the records can expand to show inner-details of that row, similar to the task management apps.
How to make it collaborative:
- Lock the individual inputs/elements that a user is engaging with. For Google Sheets; the individual cells. For Airtable, the individual elements on the record.
- Add Contextual information to show which user has locked which element.
- Have a mechanism to update only the form element that has changed, so that two users making updates at the same time do not overwrite each other
- Have a mechanism to fan-out the update that each user has made to the other user’s in realtime, so that each can see the other’s changes as soon as the input is unlocked.
Picture drawing, presentation and whiteboards: Miro, Figma, Google Slides
Typically free-form drawing combined with preset shapes, stickies, note and text boxes, and more.
How to make it collaborative:
- Lock the individual elements that a user is engaging with, it doesn’t really matter if two users draw over the same part of the canvas. It only matters if two users try and change the same element at once.
- Add Contextual information to show which user has locked which element.
- Add Contextual information to allow users to indicate to each other with their cursors.
- Have a mechanism to update only the form element that has changed, so that two users making updates at the same time do not overwrite each other
- Have a mechanism to fan-out the update that each user has made to the other user’s in realtime, so that each can see the other’s changes as soon as the input is unlocked.
Design patterns
You can start to see a few things here:
- The pattern for building collaborative experiences is almost exactly the same across all of these types of applications that don’t need CRDTs,
- Many of the applications that you know from these broad categories operate in exactly this way. A few examples; cell locking in Google Sheets, post-it locking in Miro and Figma, element locking in Google Slides.
SOCIAL SHARE CARD GENERATOR