<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).

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