Upgrade to Pro — share decks privately, control downloads, hide ads and more …

<textarea distributed>: An illustrated intro to CRDTs

Jason Orendorff
January 11, 2021
17

<textarea distributed>: An illustrated intro to CRDTs

Nodevember 2016.

[Full text of this talk](https://github.com/jorendorff/talks/blob/master/textarea-distributed/textarea-distributed.md) (much better than slides).

[Video of this talk](https://www.youtube.com/watch?v=vCkSLX7nR9Y) (still better than slides).

Jason Orendorff

January 11, 2021
Tweet

Transcript

  1. View Slide

  2. View Slide

  3. View Slide

  4. shape of time

    can get strange

    View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. …and that’s what I want to show you today.

    …go to this URL…

    View Slide

  15. I do want to take a moment before we begin

    to ask you to participate in the spirit of the thing.

    View Slide

  16. bit.ly/nv-clobber

    View Slide

  17. View Slide

  18. This is the full state of our shared text editor.

    just a global string variable

    a text file is just a string

    View Slide

  19. I'm using a library called socket.io to handle networking between the browser and the server,

    because this talk isn't about networking.

    - simplest thing I could think of

    View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. bit.ly/nv-quill

    View Slide

  31. View Slide

  32. View Slide

  33. View Slide

  34. View Slide

  35. bit.ly/nv-univax
    OK, obviously this works great, but it's not perfect.

    Let's say we want to collaborate and I'm in London…

    speed of light

    View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. …This approach is solid, but it hardcodes network latency right into the app.

    And it's at this point that I get a little frustrated.

    Why is this so hard?

    View Slide

  42. All we want to do is edit a text file.

    View Slide

  43. This should be easy.

    View Slide

  44. Instead we keep failing.

    Just one approach after another stinks,

    View Slide

  45. and the kids are starting to ask their mother,

    "Why is daddy so angry all the time?"

    View Slide

  46. View Slide

  47. We could keep trying things, …

    So here's my question for you.

    View Slide

  48. View Slide

  49. (discuss before next slide)

    View Slide

  50. if you work on web sites long enough…

    I picked text editing because it's little,…

    View Slide

  51. … the speed of light?

    It is just a fact of life …

    How do we rephrase this requirement as something possible?

    View Slide

  52. View Slide

  53. And at the end we'll see if I ever actually got my collaborative text editor working,

    but for now we're going to set that aside …

    View Slide

  54. It's a kind of value that a computer knows how to deal with…

    View Slide

  55. String
    Number
    Array

    View Slide

  56. String
    Number
    Array
    text
    number
    sequence
    of
    values

    View Slide

  57. String
    Number
    Array
    text
    number
    sequence
    of
    values
    +, slice, replace, etc.
    +, -, *, Math.sqrt(), etc.
    arr[i], push, sort, etc.

    View Slide

  58. View Slide

  59. 100% desirable… And that's all a CRDT is… example in a second.

    data type + ops over network + rules for conflicts

    …would solve our problem?

    View Slide

  60. String
    Now, a plain old string is not a CRDT. (why)

    But! … takes space … general pattern … add bookkeeping …

    not just text … history because conflicts.

    View Slide

  61. String +=

    View Slide

  62. This paper is only five years old.

    View Slide

  63. You can see … same things I’ve been talking about …

    … rethinking the fundamentals of programming and even of how we think about time

    … 14th example in this paper …

    View Slide

  64. View Slide

  65. Their implementation is 38 lines of pseudocode.

    It took me about 200 lines of JS.

    View Slide

  66. View Slide

  67. View Slide

  68. View Slide

  69. You would want to optimize.

    View Slide

  70. View Slide

  71. bit.ly/nv-peeredit

    View Slide

  72. View Slide

  73. View Slide

  74. View Slide

  75. View Slide

  76. View Slide

  77. github.com/jorendorff/peeredit

    View Slide