互动式介绍 CRDT

Have you heard about CRDTs and wondered what they are? Maybe you’ve looked into them a bit, but ran into a wall of academic papers and math jargon? That was me before I started my Recurse Center batch. But I’ve spent the past month or so doing research and writing code, and it turns out that you can build a lot with just a few simple things!

您听说过 CRDT 并想知道它们是什么吗？也许你对它们进行过一些研究，但遇到的却是一堵学术论文和数学术语的墙？在我开始Recurse Center的工作之前，我就是这样。但在过去的一个多月里，我一直在做研究、写代码，结果发现，只需几样简单的东西，就能构建出很多东西！

In this two-part series, we’ll learn what a CRDT is. Then we’ll write a primitive CRDT, compose it into more complex data structures, and finally use what we’ve learned to build a collaborative pixel art editor. All of this assumes no prior knowledge about CRDTs, and only a rudimentary knowledge of TypeScript.

在这个由两部分组成的系列中，我们将学习什么是 CRDT。然后，我们将编写一个原始的 CRDT，将其组成更复杂的数据结构，最后利用所学知识构建一个协作式像素艺术编辑器。所有这一切都假定我们事先不了解 CRDT，只具备 TypeScript 的基本知识。

To pique your curiosity, this is what we’ll end up with:

为了激起你的好奇心，这就是我们的最终结果：

Draw by clicking and dragging with your mouse. Change the paint color by using the color input on the bottom left. You can draw on either canvas and your changes will show up on the other, as if they were collaborating on the same picture.

用鼠标点击和拖动进行绘画。使用左下角的颜色输入来更改颜料颜色。您可以在任一画布上作画，您所做的更改也会显示在另一画布上，就像它们在同一幅画上协作一样。

Clicking the network button prevents changes from reaching the other canvas (although they’ll sync up again when they come back “online”). The latency slider adds a delay before changes on one canvas show up on the other.

单击网络按钮会阻止更改到达另一个画布（不过当它们恢复 "在线 "时会再次同步）。延迟滑块会在一个画布上的更改显示在另一个画布上之前增加延迟。

We’ll build that in the next post. First, we need to learn about CRDTs!

我们将在下一篇文章中构建它。首先，我们需要了解 CRDT！

What is a CRDT?

什么是 CRDT？

Okay, let’s start from the top. CRDT stands for “Conflict-free Replicated Data Type”. That’s a long acronym, but the concept isn’t too complicated. It’s a kind of data structure that can be stored on different computers (peers). Each peer can update its own state instantly, without a network request to check with other...