TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

A Simple Approach to Building a Real-Time Collaborative Text Editor

250 pointsby gsempeover 7 years ago

8 comments

philmccover 7 years ago
So... I&#x27;m a &quot;learn by stackexchange&quot; dev and really enjoyed tracking this person&#x27;s thought process.<p>I find that most tutorial&#x2F;explanations come fully baked with the the problems -predictively- solved, as opposed to reactively solved, if that makes sense -- The difference between (&quot;In order to prevent this problem, we&#x27;ll do X&quot; as opposed to &quot;Hmm that&#x27;s not working. Why is that? Ah. Okay perhaps we can do W... no, that won&#x27;t work and here&#x27;s (y, zing) why, let&#x27;s try X&quot;)<p>Author&#x27;s blog notwithstanding, where are other places to read other developers essentially plain-speak their way through problem solving &#x2F; program architecture in a similar fashion?
评论 #15426254 未加载
评论 #15427055 未加载
评论 #15426537 未加载
评论 #15426881 未加载
评论 #15430991 未加载
JohnHammersleyover 7 years ago
Assuming the author of the article spots this on HN, I&#x27;d just like to say a quick thanks for mentioning Overleaf [1] in this! It&#x27;s a nice easy to read article and it reminded me that we were planning to write one along these lines but never got around to it :)<p>It&#x27;s interesting to see how CRDT has been adopted -- we wrote our own OT implementation for Overleaf (back when we were writeLaTeX) and it&#x27;s still serving us well. We took a lot of inspiration from Etherpad [2], which is still a great collaborative editor, especially for notes.<p>We&#x27;re now going over much of our code as we work on the integration with ShareLaTeX [3], which also has a very nice real time track changes &#x2F; commenting implementation [4]. This helps with the UI aspect of collaboration, which is important on top of the use of OT or CRDT to ensure no version conflicts.<p>Good luck in your next projects, and I look forward to reading write ups like this of those too :)<p>[1] <a href="https:&#x2F;&#x2F;www.overleaf.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.overleaf.com&#x2F;</a><p>[2] <a href="http:&#x2F;&#x2F;etherpad.org&#x2F;" rel="nofollow">http:&#x2F;&#x2F;etherpad.org&#x2F;</a><p>[3] <a href="https:&#x2F;&#x2F;www.overleaf.com&#x2F;blog&#x2F;518-exciting-news-sharelatex-is-joining-overleaf" rel="nofollow">https:&#x2F;&#x2F;www.overleaf.com&#x2F;blog&#x2F;518-exciting-news-sharelatex-i...</a><p>[4] <a href="https:&#x2F;&#x2F;www.sharelatex.com&#x2F;blog&#x2F;2017&#x2F;03&#x2F;09&#x2F;track-changes-and-comments-in-latex.html" rel="nofollow">https:&#x2F;&#x2F;www.sharelatex.com&#x2F;blog&#x2F;2017&#x2F;03&#x2F;09&#x2F;track-changes-and...</a><p>(Note: Edited for grammar)
alalondeover 7 years ago
Very cool to see this on the front page. I would agree that for the use case of plain text, yes, the problem has been solved, but for just about anything more complicated it quickly becomes intractable. Rich Text, for example, is extremely difficult to get right (ask the ckeditor guys!)<p>For those wanting real-time collaboration functionality in their apps but don&#x27;t have the intellectual curiosity (or time!) to learn the ins and outs, we [1] built a general-purpose API for folks to add real-time collaboration to their web apps. Think Firebase but designed from the ground up for simultaneous editing and with additional first-class support for common UX needs such as shared cursors and selections. We agree that the web is moving in this direction and are excited to see what gets built!<p>[1]convergencelabs.com
codingdaveover 7 years ago
The problem I ran into when I had to do this on a prior project wasn&#x27;t the algorithm for worrying about individual characters. It was dealing with how to manage people highlighting entire paragraphs or documents, and pasting over them with new content, at the same time as the other editor(s) had been changing things.<p>Ultimately, while there were algorithmic answers to just about any scenario, we ended up just declaring a business answer instead - the editor only would let you into edit mode one paragraph at a time, and you locked that paragraph while you were in it. We found that almost nobody was actually editing the exact same paragraph at the same time anyway... they were working in different parts of the documents. So not only did that resolve all possible copy&#x2F;paste insanity, the algorithm became brain-dead simple -- when you update or leave the paragraph, send those changes to everyone else&#x27;s editor.
评论 #15426437 未加载
评论 #15427122 未加载
评论 #15426743 未加载
评论 #15426834 未加载
bla2over 7 years ago
I liked Raph&#x27;s writings on CRDTs: <a href="https:&#x2F;&#x2F;medium.com&#x2F;@raphlinus&#x2F;working-code-for-operational-transformation-crdt-hybrid-9d04a57309da" rel="nofollow">https:&#x2F;&#x2F;medium.com&#x2F;@raphlinus&#x2F;working-code-for-operational-t...</a>
jiyinyiyongover 7 years ago
For the keys, I created a similar library called <a href="https:&#x2F;&#x2F;github.com&#x2F;Cirru&#x2F;bisection-key" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;Cirru&#x2F;bisection-key</a> to generate string keys.
archagonover 7 years ago
CRDTs are awesome! I’m working on a similar article going in-depth on Victor Grishchenko’s Causal Tree[1] CRDT, which makes several ingenious decisions (making a tree out of atoms and their causes, storing the full ordered atom history for each site, treating the output data as a DFS traversal of the atom tree, sorting atoms by their on-creation awareness of other atoms) that allow the format to be extended to many other data types, all with generally O(N) performance and permitting git-like document history and per-change blame queries without any extra work. I&#x27;ve grown to think of it as the purest possible expression of the CRDT concept.<p>In my example project[2] (NOT PRODUCTION READY!) I’ve already implemented text editing and basic vector drawing that synchronize over arbitrary network topologies. If you can massage your data into the CT format, you get real-time collaboration, offline mode, cloud sync, and decentralized network support for basically free — all in a thousand lines of comprehensible, functional code! You can even use it with a basic key-value store like CloudKit, which was admittedly one of my main reasons of diving into this class of algorithm.<p>Hope to finish v1 of the demo and post the article by the end of the month, but writing is very hard...<p>More on point, I really like how this article dissects and visualizes CRDTs, which can be a difficult topic to breach. If you&#x27;re looking to implement something like this, however, it should be noted that Logoot has a pretty significant interleaving problem for concurrent operations if you use it to sync individual characters as opposed to lines: <a href="https:&#x2F;&#x2F;stackoverflow.com&#x2F;questions&#x2F;45722742&#x2F;logoot-crdt-interleaving-of-data-on-concurrent-edits-to-the-same-spot" rel="nofollow">https:&#x2F;&#x2F;stackoverflow.com&#x2F;questions&#x2F;45722742&#x2F;logoot-crdt-int...</a><p>I think for text this is a deal-breaker, because if one client goes offline for a while, they&#x27;ll basically corrupt the document if anything they&#x27;ve been working on overlaps with other users&#x27; changes. You could solve this with a central server by forcing a re-sync and&#x2F;or manual merge, but I feel that sort of defeats the purpose of using a CRDT.<p>[1]: <a href="https:&#x2F;&#x2F;ai2-s2-pdfs.s3.amazonaws.com&#x2F;6534&#x2F;c371ef78979d7ed84b6dc19f4fd529caab43.pdf" rel="nofollow">https:&#x2F;&#x2F;ai2-s2-pdfs.s3.amazonaws.com&#x2F;6534&#x2F;c371ef78979d7ed84b...</a><p>[2]: <a href="https:&#x2F;&#x2F;github.com&#x2F;archagon&#x2F;crdt-playground" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;archagon&#x2F;crdt-playground</a>
archagonover 7 years ago
Hmm, FYI, I seem to have broken it a little bit: <a href="https:&#x2F;&#x2F;i.imgur.com&#x2F;qrNeZFJ.png" rel="nofollow">https:&#x2F;&#x2F;i.imgur.com&#x2F;qrNeZFJ.png</a>