OT and CRDT trade-offs for Real-Time collaboration

I’ve been doing a pretty deep dive on CRDTs and OTs to get the right user experience for our collaborative website builder[1]. I’m still not done with the implementation and subsequent testing (i.e., splitting text nodes, as mentioned in the post). But the core algorithm behind Automerge[2], formalized in the OpSets paper[3] is extremely promising. A good example of its power is the ability to do an atomic tree “move”, whilst preserving strong eventual consistency.<p>I&#x27;m so glad to see that the HN community cares about this problem space. Maybe I should finally write that blog post on CRDTs and how to implement them yourself following the OpSets spec.<p>[1] <a href="https:&#x2F;&#x2F;www.makeswift.com" rel="nofollow">https:&#x2F;&#x2F;www.makeswift.com</a><p>[2] <a href="https:&#x2F;&#x2F;www.github.com&#x2F;automerge&#x2F;automerge" rel="nofollow">https:&#x2F;&#x2F;www.github.com&#x2F;automerge&#x2F;automerge</a><p>[3] <a href="https:&#x2F;&#x2F;arxiv.org&#x2F;abs&#x2F;1805.04263" rel="nofollow">https:&#x2F;&#x2F;arxiv.org&#x2F;abs&#x2F;1805.04263</a>

Wanderlog (<a href="https:&#x2F;&#x2F;wanderlog.com" rel="nofollow">https:&#x2F;&#x2F;wanderlog.com</a>) is a Google Docs for planning travel, and naturally, we had to figure this out early in the process.<p>If you&#x27;re on a Node.js&#x2F;React stack, we highly recommend using the combination of OT-JSON0 [1] and ShareDB [2], two excellent libraries. OT-JSON0 lets you perform operational transforms on any JSON-serializable structure pretty intuitively, and ShareDB handles synchronizing it between multiple clients and resolving conflicts. Building your own is going to be a pain, so unless your core business is a text editor like TinyMCE, it&#x27;s probably best to stand on the shoulders of giants.<p>Another approach that we didn&#x27;t end up using is Figma&#x27;s: especially if you&#x27;re working on anything other than text editing, ask if you actually want to use operational transform. Something simpler might be good enough -- in Figma&#x27;s case, they use &quot;last write wins&quot; because they were able to break the document into small enough, atomic elements. [3]<p>[1] <a href="https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;ot-json0" rel="nofollow">https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;ot-json0</a><p>[2] <a href="https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;sharedb" rel="nofollow">https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;sharedb</a><p>[3] <a href="https:&#x2F;&#x2F;www.figma.com&#x2F;blog&#x2F;how-figmas-multiplayer-technology-works&#x2F;stack" rel="nofollow">https:&#x2F;&#x2F;www.figma.com&#x2F;blog&#x2F;how-figmas-multiplayer-technology...</a>

There&#x27;s one thing I&#x27;d add here, as advice to potential implementers of collaborative editing algorithms. Test the system rigorously, autogenerating concurrent workloads of all the operations (including undo), and also various delays. If this had been done early on, all the broken algorithms (some published with formal proofs of correctness!) would have been caught. A lot of the broken algorithms work under light loads - TP2 requires at least three concurrent edits, two inserts and one delete, to trigger.

At Mixcut.com (Building real time collaborative video editing) we use a combination of OTs and a variant&#x2F;simpler version of CRDTs that provide the most coverage of the various features needed. The usage of low latency websockets to shuttle OTs and building completely around OTs is key.<p>It’s working great for us in beta, we’ve recently shipped multiplayer to our users and overall it’s very stable. With a lot more in store soon, please check it out!

Thanks for linking to my blog post :)<p>&quot;This is the exact &quot;split node&quot; scenario I described earlier; applying bold near the start of a text node necessarily has to split the text node into three parts (before, bold, and after).&quot;<p>Not sure why you split it up into sections. In my CRDT implementation, I would add meta-data to each character, with the boolean property which is either bold or not. It&#x27;s certainly cumbersome to keep the cursor at the right place when inserts are being made, but it&#x27;s doable. <a href="https:&#x2F;&#x2F;pierrehedkvist.com&#x2F;posts&#x2F;1-creating-a-collaborative-editor" rel="nofollow">https:&#x2F;&#x2F;pierrehedkvist.com&#x2F;posts&#x2F;1-creating-a-collaborative-...</a><p>I personally never understood how OT actually works, clearly, Google Docs and others find it useful. But to me, CRDT has more solid proof and reasoning behind it, and it is easier to comprehend. <a href="https:&#x2F;&#x2F;medium.com&#x2F;@pierrehedkvist&#x2F;creating-a-collaborative-app-using-crdts-5013349f4682" rel="nofollow">https:&#x2F;&#x2F;medium.com&#x2F;@pierrehedkvist&#x2F;creating-a-collaborative-...</a>

Is the article suggesting to apply a string CRDT to an entire JSON structure? Are people doing that?<p>At the very least, I would expect different JSON data types to use different CRDTs. For a collaborative model, I would expect the semantics of the data model to be reflected in the choice of CRDTs for different substructures in the JSON.

So.. we’re left with no real explanation to why OT is better than CRDT other than a 5s video showing a poorly managed text node update that moves the cursor. I feel tricked.

&gt; the prospect of peer-to-peer editing with end-to-end encryption is an exciting one<p>Have you heard of CryptPad ? Not exactly peer-to-peer but has encryption so that the server sees nothing.

this is a wonderful writeup! thank you!<p>I&#x27;m researching the same thing.<p>Any tutorial on OT implementation? Especially, I need to handle structured data, like json.

The only thing I remember from the CKEditor post from last year was that it took &quot;42 man-years&quot; to implement: <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=18220020" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=18220020</a><p>I wonder if it&#x27;s better understood now and can cost less R&amp;D time.

w00h00, this is my area of expertise.<p>After 8 years of working on this, I have changed my thoughts:<p>- The correct algorithm is not always the correct user experience.<p>- End-to-end encryption is too important to not have.<p>- Offline support is great, but it behaving consistently is more important than it behaving &quot;intently&quot;.<p>- Biggest pain points can most easily be solved at the editing layer, not data layer.<p>As a result, OT gets thrown out the door immediately.<p>I built the most popular CRDT powered database on the market (<a href="https:&#x2F;&#x2F;github.com&#x2F;amark&#x2F;gun" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;amark&#x2F;gun</a>, 11K+ stars, 11M+ monthly installs), but have some harsh words for CRDT obsessed people:<p>CRDTs are great, but if you create an infinitely complex one to handle &quot;every word editing operation&quot; it&#x27;ll actually result in an inferior user experience.<p>As such, for example, GUN supports lock-free concurrent operations on any depth of data in a graph, but keeping text&#x2F;strings behavior atomic is way more important than having built-in automatic string merges.<p>Why? It is much simpler to build a correct text&#x2F;string CRDT on top of a predictable, stable, graph CRDT that is understandable.<p>Another example is, in our blog editing tools, despite having spent years researching &amp; implementing (+ others in our community) precise character-by-character CRDT resolution schemes, I found I personally had a much better offline &amp; local first user experience with a predictable per-paragraph sync scheme.<p>This is a stupid simple approach, but what it means is that I as a user, can easily predict whats going to happen, so if I&#x27;m offline I know I should just copy a new paragraph and fiddle with things there, cause it isn&#x27;t gonna get &quot;auto delete regrammar merged&quot;.<p>Generally speaking, me and colleagues don&#x27;t &quot;fight&quot; over the same paragraph, we&#x27;re usually concurrently writing different &quot;sections&quot; at the same time, it is pretty rare to grammar fix their edit same paragraph as they&#x27;re typing it - that is also just kinda, rude looking.<p>Anyways, finally, is that the majority of text styling and DOM edge cases can be handled by having a deterministic canonical DOM hierarchy that always gets applied at the editing layer, BEFORE any CRDT operations even occur.<p>So for instance, re-arrange the DOM tree such that &lt;i&gt; is always inside &lt;u&gt; inside &lt;b&gt;, or something like that.<p>We built this into a library called normalize, and it instantly eliminated so much complexity, especially at the CRDT level. Ping me if you want a demo of this library.<p>Finally, for everyone else, we also built an <i>INTERACTIVE CARTOON EXPLAINER</i> of an extremely basic text CRDT to help others understand the more detailed concepts:<p><a href="https:&#x2F;&#x2F;gun.eco&#x2F;explainers&#x2F;school&#x2F;class.html" rel="nofollow">https:&#x2F;&#x2F;gun.eco&#x2F;explainers&#x2F;school&#x2F;class.html</a>