Presentation for WarsawJS meetup https://warsawjs.com/meetups/87

1. Just another to-do app.
Or is it?
Real-time collaboration in distributed systems
for JavaScript developers.

2. Dawid Urbański
Technical Leader at CKSource

17. 🎉

18. I forgot to
mention

22. The task
Create a todo list application with
synchronization capabilities

23. The task
In other words: enable real-time
collaboration capabilities for the todo list

24. The task
Conflicts should be resolved
in a reasonable way

25. The task
You cannot use any existing libraries to do this.
You are the library creator

26. The task
For sake of simplicity place two lists on the
same page, simulating both of them being
in offline mode, and make synchronization
to happen on a button click

28. Node A Node B
Synchronize
Item 1

29. Node A Node B
Synchronize
Item 1
Node A Node B
Item 1 Item 1

30. Node A Node B
Synchronize
Item 1

31. Node A Node B
Synchronize
Item 1
Hey! Here are my items:
[{“label”:”Item 1”,“done”:false}]
Hey! Here are my items:
[]

32. Node A Node B
Synchronize
Item 1
Hey! Here are my items:
[{“label”:”Item 1”,“done”:false}]
Hey! Here are my items:
[]
Run some merging logic Run some merging logic

33. Node A Node B
Synchronize
Item 1
Node A Node B
Item 1 Item 1
Hey! Here are my items:
[{“label”:”Item 1”,“done”:false}]
Hey! Here are my items:
[]
Run some merging logic Run some merging logic

34. Node A Node B
Synchronize
Item 1
Node A Node B
Item 1 Item 1
Hey! Here are my items:
[{“label”:”Item 1”,“done”:false}]
Hey! Here are my items:
[]
Run some merging logic Run some merging logic
Send the
whole state

35. Node A Node B
Synchronize
Item 1 Item 1
Problem

36. Node A Node B
Synchronize
Item 1 Item 1
Node A Node B
Item 1
Item 2
Problem

37. Node A Node B
Synchronize
Item 1 Item 1
Node A Node B
Item 1
Item 2
Problem

38. Node A Node B
Synchronize
Item 1 Item 1
Node A Node B
Item 1
Item 2
Node A Node B
Item 1
Item 2
Item 1
Item 2
Problem

39. Node A Node B
Synchronize
Item 1

40. Node A Node B
Synchronize
Item 1
Hey! Here are my changes:
[{“type”: “add”,“label”:”Item 1”,“done”:false}]
Hey! Here are my changes:
[]

41. Node A Node B
Synchronize
Item 1
Hey! Here are my changes:
[{“type”: “add”,“label”:”Item 1”,“done”:false}]
Hey! Here are my changes:
[]
Apply received changes Apply received changes

42. Node A Node B
Synchronize
Item 1
Node A Node B
Item 1 Item 1
Hey! Here are my changes:
[{“type”: “add”,“label”:”Item 1”,“done”:false}]
Hey! Here are my changes:
[]
Apply received changes Apply received changes

43. Node A Node B
Synchronize
Item 1
Node A Node B
Item 1 Item 1
Hey! Here are my changes:
[{“type”: “add”,“label”:”Item 1”,“done”:false}]
Hey! Here are my changes:
[]
Apply received changes Apply received changes
Send all
local changes

44. Node A Node B
Synchronize
Item 1 Item 1

45. Node A Node B
Synchronize
Item 1 Item 1
Node A Node B
Item 1
Item 2

46. Node A Node B
Synchronize
Item 1 Item 1
Node A Node B
Item 1
Item 2

47. Node A Node B
Synchronize
Item 1 Item 1
Node A Node B
Item 1
Item 2
Node A Node B
Item 2 Item 2

48. Order of events

49. Node A Node B
Synchronize

50. Node A Node B
Synchronize
Node A Node B
Item 1 Item 2

51. Node A Node B
Synchronize
Node A Node B
Item 1 Item 2

52. Node A Node B
Synchronize
Node A Node B
Node A Node B
Item 1 Item 2
Item 1 Item 2
Item 2 Item 1

53. Happened-before relation

54. Happened-before relation
Node A Node B
A
Time Time

55. Happened-before relation
Node A Node B
A
A`
Time Time

56. Happened-before relation
Node A Node B
A
A`
A happened before A`
Time Time

57. Happened-before relation
Node A Node B
A
A`
A happened before A`
Time Time
B
A` happened before B

58. Happened-before relation
Node A Node B
A
A`
A happened before A`
Time Time
B
A` happened before B
A happened before B

59. Happened-before relation
Node A Node B
A
A`
Time Time
B
B`

60. Happened-before relation
Node A Node B
A
A`
Time Time
B
B`
A < A` < B < B`
Total order

61. Happened-before relation
Node A Node B
A
A`
Time Time
B
B`

62. Happened-before relation
Node A Node B
A
A`
Time Time
B
B`
A < A`
Partial order
B < B` A < B` B < A`

63. Happened-before relation
Node A Node B
A
A`
Time Time
B
B`
A < A`
Partial order
B < B`
Incomparable (concurrent changes)
A || B A` || B`
A < B` B < A`

64. Happened-before relation
Node A Node B
A
A`
Time Time
B
B`
A < A`
Partial order
B < B`
Incomparable (concurrent changes)
A || B A` || B`
A < B` B < A`

65. Happened-before relation
Node A Node B
A1
Time Time
B1
A2
A3
B2
B3
Synchronize

66. Happened-before relation
Node A Node B
A1
Time Time
B1
B1`
A2
A3
B2
B3
Synchronize
A1`
A2`
A3`
B2`
B3` Incomparable (concurrent changes)

67. Solutions

68. Solutions
OT
(Operational transformation)

69. Solutions
OT
(Operational transformation)
CRDT
(Con
fl
ict-free replicated data type)

70. Solutions
OT
(Operational transformation)
CRDT
(Con
fl
ict-free replicated data type)
My solution
(Based somehow on CRDT)

71. OT

72. Item 1
Item 2
0
1
Item 3 2

73. OT
Node A Node B
Synchronize
Item 1
Item 1 0 0

74. OT
Node A Node B
Synchronize
Item 1
Item 1
Item 1
Item 2
0 0
0
1
0

75. OT
Node A Node B
Synchronize
OP|A1 = [add,”Item 2”,1]
Item 1
Item 1
Item 1
Item 2
OP|B1 = [remove,0]
0 0
0
1
0

76. OT
Node A Node B
Synchronize
OP|A1 = [add,”Item 2”,1]
OP|A1` = [add,”Item 2”,0]
Item 1
Item 1
Item 1
Item 2
OP|B1 = [remove,0]
OP|B1` = [remove,0]
0 0
0
1
0

77. OT
Node A Node B
Synchronize
OP|A1 = [add,”Item 2”,1]
OP|A1` = [add,”Item 2”,0]
Item 1
Item 1
Item 1
Item 2
OP|B1 = [remove,0]
OP|B1` = [remove,0]
Item 2 Item 2
0 0
0
1
0 0
0

78. OT
OP|A1 = [add,”Item 2”,1]
OP|A1` = [add,”Item 2”,0]

79. OT
Item 1
Item 2
Item 3
Item 4
Item 5
❌
❌
❌
0
1
2
3
4

80. OT
Item 1
Item 2
Item 3
Item 4
Item 5
❌
❌
❌
0
1
2
3
4
Item 1
Item 4
0
1
2
3
4

81. OT
Item 1
Item 2
Item 3
Item 4
Item 5
❌
❌
❌
0
1
2
3
4
OP|A1 = [add,”New item 4”,3]
Item 1
Item 4
0
1
2
3
4

82. OT
Item 1
Item 2
Item 3
Item 4
Item 5
❌
❌
❌
0
1
2
3
4
OP|A1 = [add,”New item 4”,3]
Item 1
Item 4
0
1
2
3
4

83. OT
Item 1
Item 2
Item 3
Item 4
Item 5
❌
❌
❌
0
1
2
3
4
OP|A1 = [add,”New item 4”,3]
Item 1
Item 4
0
1
2
3
4
OP|A1` = [add,”New item 4”,1]

84. OT
Item 1
Item 2
Item 3
Item 4
Item 5
❌
❌
❌
0
1
2
3
4
OP|A1 = [add,”New item 4”,3]
Item 1
Item 4
0
1
2
3
4
OP|A1` = [add,”New item 4”,1]
Removals:
[1,2,4]

85. OT
Item 1
Item 2
Item 3
Item 4
Item 5
❌
❌
❌
0
1
2
3
4
OP|A1 = [add,”New item 4”,3]
Item 1
Item 4
0
1
2
3
4
OP|A1` = [add,”New item 4”,1]
Removals:
[1,2,4] Count of removals for index less than 3 = 2 ( [1,2] )
( 3 - 2 = 1 )

86. OT - cons and pros
“Operations can be applied in any order
so we don’t have to care about timing”

87. OT - cons and pros
“OT approach of defining operations
through their offsets … raise serious
issues… resulting combinations of
states and operations are extremely
hard to foresee and understand”

88. OT - cons and pros
"Unfortunately, implementing OT sucks.
There's a million algorithms with
different tradeoffs, mostly trapped in
academic papers.”

89. OT - cons and pros
dOPT
Ellis & Gibbs 1989
adOPTed
Ressel et al. 1996
IMDR
Imine et al. 2003
Jupiter
Nichols et al. 1995
SOCT2
Suleiman et al. 1997
SDT
Li & Li 2004
SOCT3/4
Vidot et al. 2000
TTF
Oster et al. 2006 Credit: Martin Kleppmann
https://www.youtube.com/watch?v=B5NULPSiOGw&t=915s

90. OT - cons and pros
dOPT
Ellis & Gibbs 1989
adOPTed
Ressel et al. 1996
IMDR
Imine et al. 2003
Jupiter
Nichols et al. 1995
SOCT2
Suleiman et al. 1997
SDT
Li & Li 2004
SOCT3/4
Vidot et al. 2000
TTF
Oster et al. 2006
Require
central
server
Credit: Martin Kleppmann
https://www.youtube.com/watch?v=B5NULPSiOGw&t=915s

92. CRDT

93. Item 1
Item 2
Unique ID
Unique ID
Item 3 Unique ID
Di
ff
erent algorithms generate IDs in di
ff
erent ways:
Binary tree path, integer + replica ID pair, vectors, logical clock timestamp etc…

94. 0
1000

95. Item 1 500
0
1000

96. Item 1
Item 2
500
750
0
1000

97. Item 1
Item 2
500
750
Item 3 875
0
1000

98. Item 1
Item 2
500
750
Item 3 875
0
1000
Item 4 937

99. Item 1
Item 2
500
750
Item 3 875
0
1000
Item 4 937
Item 5 968

100. Item 1
Item 2
500
750
Item 3 875
0
1000
Item 4 937
Item 5 968
Item 6 984

101. Item 1
Item 2
500
750
Item 3 875
0
1000
Item 4 937
Item 5 968
Item 6 984
Item 7 992

102. Item 1
Item 2
500
750
Item 3 875
0
1000
Item 4 937
Item 5 968
Item 6 984
Item 7 992
Item 8 996

103. Item 1
Item 2
500
750
Item 3 875
0
1000
Item 4 937
Item 5 968
Item 6 984
Item 7 992
Item 8 996
Number.MAX_SAFE_INTEGER
Only 53 IDs before running out of divisions

104. Item 1
Item 2
0.500
0.750
Item 3 0.875
0
1

105. Item 1
Item 2
500
750
Item 3 875
0
1000

106. Item 1 500
0
1000
Item 2 500
0
1000

107. Item 1 500
0
1000
Item 2 500
0
1000
1000/2 = 500
min = 500-100 = 400
max = 500+100 = 600
id = rand(min, max)

108. Item 1 500
0
1000
Item 2 500
0
1000
Item 1 485
0
1000
Item 2 513
0
1000
1000/2 = 500
min = 500-100 = 400
max = 500+100 = 600
id = rand(min, max)

109. Item 1 500
0
1000
Item 2 500
0
1000
Item 1 485
0
1000
Item 2 513
0
1000
1000/2 = 500
min = 500-100 = 400
max = 500+100 = 600
id = rand(min, max)
Item 1 485
0
1000
Item 2 513
0
1000

110. Item 1 500
0
1000
Item 2 500
0
1000
Item 1 485
0
1000
Item 2 513
0
1000
1000/2 = 500
min = 500-100 = 400
max = 500+100 = 600
id = rand(min, max)
Item 1 485
0
1000
Item 2 513 Item 2
485
0
1000
Item 1
513

111. Item 1 500
0
1000
Item 2 500
0
1000
Item 1 485
0
1000
Item 2 485
0
1000
1000/2 = 500
min = 500-100 = 400
max = 500+100 = 600
id = rand(min, max)
If we still pick randomly the same ID, then we fall back to
other way of sorting, for example node ID
Node A Node B

112. CRDT
Node A Node B
Synchronize
Item 1
Item 1 489 489

113. CRDT
Node A Node B
Synchronize
Item 1
Item 1
Item 1
Item 2
489 489
489
774

114. CRDT
Node A Node B
Synchronize
OP|A1 = [add,”Item 2”,774]
Item 1
Item 1
Item 1
Item 2
OP|B1 = [remove,489]
489 489
489
774

115. CRDT
Node A Node B
Synchronize
OP|A1 = [add,”Item 2”,774]
Item 1
Item 1
Item 1
Item 2
OP|B1 = [remove,489]
Item 2 Item 2
489 489
489
774
774 774

116. Move operation

117. Item 1
Item 2
489
774

118. Item 1
Item 2
489
774
OP|A1 = [moveUp,774]

119. Item 1
Item 2
489
774
OP|A1 = [moveUp,774]
OP|A1.1 = [remove,774]
OP|A1.2 = [add,”Item 2”,221]

120. Item 1 489
OP|A1 = [moveUp,774]
OP|A1.1 = [remove,774]

121. Item 2
Item 1
221
489
OP|A1 = [moveUp,774]
OP|A1.1 = [remove,774]
OP|A1.2 = [add,”Item 2”,221]

122. Item 1
Item 2
489
774
OP|A1 = [moveUp,899]
Item 3 899
Item 1
Item 2
489
774
OP|B1 = [moveUp,899]
Item 3 899

123. Item 1
Item 2
489
774
OP|A1 = [moveUp,899]
Item 3 899
Item 1
Item 2
489
774
OP|B1 = [moveUp,899]
Item 3 899
Item 1
Item 3
Item 2
Item 3
Item 1
Item 2
or
?

124. Item 1
Item 2
489
774
OP|A1 = [moveUp,899]
Item 3 899
OP|B1 = [moveUp,899]

125. Item 1
Item 2
489
774
OP|A1 = [moveUp,899]
Item 3 899
OP|B1 = [moveUp,899]
OP|A1.1 = [remove,899]
OP|A1.2 = [add,”Item 3”,620]
OP|B1.1 = [remove,899]
OP|B1.2 = [add,”Item 3”,661]

126. Item 1
Item 2
489
774
OP|A1 = [moveUp,899]
Item 3 899
OP|B1 = [moveUp,899]
OP|A1.1 = [remove,899]
OP|A1.2 = [add,”Item 3”,620]
OP|B1.1 = [remove,899]
OP|B1.2 = [add,”Item 3”,661]
OP|A1.1 = [remove,899]
OP|A1.2 = [add,”Item 3”,620]
OP|B1.1 = [remove,899]
OP|B1.2 = [add,”Item 3”,661]
Let’s say we always
pick insertion with
higher random ID
We can apply removal twice

127. Item 1
Item 2
489
774
OP|A1 = [moveUp,899]
Item 3 899
OP|B1 = [moveUp,899]
OP|A1.1 = [remove,899]
OP|A1.2 = [add,”Item 3”,620]
OP|B1.1 = [remove,899]
OP|B1.2 = [add,”Item 3”,661]
OP|A1.1 = [remove,899]
OP|A1.2 = [add,”Item 3”,620]
OP|B1.1 = [remove,899]
OP|B1.2 = [add,”Item 3”,661]
Let’s say we always
pick insertion with
higher random ID
We can apply removal twice
Item 1
Item 2
489
774 OP|A1.1 = [remove,899]

128. Item 1
Item 2
489
774
OP|A1 = [moveUp,899]
Item 3 899
OP|B1 = [moveUp,899]
OP|A1.1 = [remove,899]
OP|A1.2 = [add,”Item 3”,620]
OP|B1.1 = [remove,899]
OP|B1.2 = [add,”Item 3”,661]
OP|A1.1 = [remove,899]
OP|A1.2 = [add,”Item 3”,620]
OP|B1.1 = [remove,899]
OP|B1.2 = [add,”Item 3”,661]
Let’s say we always
pick insertion with
higher random ID
We can apply removal twice
Item 1
Item 2
489
774
Item 1
Item 3
489
661
Item 2 774
OP|A1.1 = [remove,899]
OP|B1.2 = [add,”Item 3”,661]

129. Item 1
Item 2
489
774
OP|A1 = [moveUp,774]
Item 3 899
Item 1
Item 2
489
774
OP|B1 = [moveDown,774]
Item 3 899
Item 2
Item 1
Item 3
Item 1
Item 3
Item 2
or
?
Item 1
Item 2
Item 3
or

130. Item 1
Item 2
489
774
OP|A1 = [moveUp,774]
Item 3 899
OP|B1 = [moveDown,774]

131. Item 1
Item 2
489
774
OP|A1 = [moveUp,774]
Item 3 899
OP|B1 = [moveDown,774]
OP|A1.1 = [remove,774]
OP|A1.2 = [add,”Item 2”,245]
OP|B1.1 = [remove,774]
OP|B1.2 = [add,”Item 2”,950]

132. Item 1
Item 2
489
774
OP|A1 = [moveUp,774]
Item 3 899
OP|B1 = [moveDown,774]
OP|A1.1 = [remove,774]
OP|A1.2 = [add,”Item 2”,245]
OP|B1.1 = [remove,774]
OP|B1.2 = [add,”Item 2”,950]
OP|A1.1 = [remove,774]
OP|A1.2 = [add,”Item 2”,245]
OP|B1.1 = [remove,774]
OP|B1.2 = [add,”Item 2”,950]
Let’s say we always
pick insertion with
smaller node ID
(A < B) so pick A1.2
We can apply removal twice

133. Item 1
Item 2
489
774
OP|A1 = [moveUp,774]
Item 3 899
OP|B1 = [moveDown,774]
OP|A1.1 = [remove,774]
OP|A1.2 = [add,”Item 2”,245]
OP|B1.1 = [remove,774]
OP|B1.2 = [add,”Item 2”,950]
OP|A1.1 = [remove,774]
OP|A1.2 = [add,”Item 2”,245]
OP|B1.1 = [remove,774]
OP|B1.2 = [add,”Item 2”,950]
Let’s say we always
pick insertion with
smaller node ID
(A < B) so pick A1.2
We can apply removal twice
Item 1
Item 3
489
899 OP|A1.1 = [remove,744]

134. Item 1
Item 2
489
774
OP|A1 = [moveUp,774]
Item 3 899
OP|B1 = [moveDown,774]
OP|A1.1 = [remove,774]
OP|A1.2 = [add,”Item 2”,245]
OP|B1.1 = [remove,774]
OP|B1.2 = [add,”Item 2”,950]
OP|A1.1 = [remove,774]
OP|A1.2 = [add,”Item 2”,245]
OP|B1.1 = [remove,774]
OP|B1.2 = [add,”Item 2”,950]
Let’s say we always
pick insertion with
smaller node ID
(A < B) so pick A1.2
We can apply removal twice
Item 1
Item 3
489
899
Item 2
Item 1
245
489
Item 3 899
OP|A1.1 = [remove,744]
OP|A1.2 = [add,”Item 2”,245]

135. Other conflicts

136. Item 1
Item 2
489
774
OP|A1 = [remove,774]
Item 3 899
Item 1
Item 2
489
774
OP|B1 = [moveDown,774]
Item 3 899

137. Item 1
Item 2
489
774
OP|A1 = [remove,774]
Item 3 899
Item 1
Item 2
489
774
OP|B1 = [moveDown,774]
Item 3 899
Item 1
Item 3
489
899

138. Item 1
Item 2
489
774
OP|A1 = [remove,774]
Item 3 899
Item 1
Item 2
489
774
OP|B1 = [markDone,774]
Item 3 899

139. Item 1
Item 2
489
774
OP|A1 = [remove,774]
Item 3 899
Item 1
Item 2
489
774
OP|B1 = [markDone,774]
Item 3 899
Item 1
Item 3
489
899

140. Order matters

141. Item 1
Item 2
489
774
Item 3 899

142. OP|A1 = [remove,774]
Item 1
Item 3
489
899
Item 1
Item 2
489
774
Item 3 899

143. OP|A1 = [remove,774]
Item 1
Item 3
489
899
OP|B1 = [moveDown,774]
Item 1
Item 3
489
899
Item 1
Item 2
489
774
Item 3 899

144. OP|A1 = [remove,774]
Item 1
Item 3
489
899
OP|B1 = [moveDown,774]
Item 1
Item 3
489
899
✅
Item 1
Item 2
489
774
Item 3 899

145. Item 1
Item 2
489
774
Item 3 899

146. Item 1
Item 2
489
774
OP|B1 = [moveDown,774]
Item 3 899
Item 1
Item 3
489
899
Item 2 933

147. Item 1
Item 2
489
774
OP|B1 = [moveDown,774]
Item 3 899
Item 1
Item 3
489
899
OP|A1 = [remove,774]
Item 1
Item 3
489
899
Item 2 933 Item 2 933

148. Item 1
Item 2
489
774
OP|B1 = [moveDown,774]
Item 3 899
Item 1
Item 3
489
899
OP|A1 = [remove,774]
Item 1
Item 3
489
899
❌
Item 2 933 Item 2 933

149. Removals
Insertions
Mark as done
Move

150. My solution

152. I
TodoList
Items Changes
Snapshot ChangesBu
ff
er

153. I
Items Changes
Snapshot ChangesBu
ff
er
I
Items Changes
Snapshot ChangesBu
ff
er
Synchronize

154. I
Items Changes
Snapshot ChangesBu
ff
er
I
Items Changes
Snapshot ChangesBu
ff
er
Synchronize
Item 1 489
Item 2 774
Item 3 899
Item 4 944
Item 1 489
Item 2 774
Item 3 899
Item 4 944
Item 1 489
Item 2 774
Item 3 899
Item 4 944
Item 1 489
Item 2 774
Item 3 899
Item 4 944

155. I
Items Changes
Snapshot ChangesBu
ff
er
I
Items Changes
Snapshot ChangesBu
ff
er
Synchronize
Item 1 489
Item 3 899
Item 4 944
Item 1 489
Item 2 774
Item 3 899
Item 4 944
Item 1 489
Item 2 774
Item 3 899
Item 4 944
Item 1 489
Item 2 774
Item 3 899
Item 4 944
Remove 774

156. I
Items Changes
Snapshot ChangesBu
ff
er
I
Items Changes
Snapshot ChangesBu
ff
er
Synchronize
Item 1 489
Item 3 899
Item 4 944
Item 1 489
Item 2 774
Item 3 899
Item 4 944
Item 1 489
Item 2 774
Item 3 899
Item 4 944
Item 1 489
Item 2 774
Item 3 899
Item 4 944
Remove 774 Mark done 899
✅

157. I
Items Changes
Snapshot ChangesBu
ff
er
I
Items Changes
Snapshot ChangesBu
ff
er
Synchronize
Item 1 489
Item 3 899
Item 4 944
Item 1 489
Item 2 774
Item 3 899
Item 4 944
Item 2 774
Item 3 899
Item 4 944
Item 1 489
Item 2 774
Item 3 899
Item 4 944
Remove 774 Mark done 899
✅ Remove 489

158. I
Items Changes
Snapshot ChangesBu
ff
er
I
Items Changes
Snapshot ChangesBu
ff
er
Synchronize
Item 1 489
Item 3 899
Item 4 944
Item 1 489
Item 2 774
Item 3 899
Item 4 944
Item 2 774
Item 3 899
Item 4 944
Item 1 489
Item 2 774
Item 3 899
Item 4 944
Remove 774 Mark done 899
✅ Remove 489
Add “Item 5” 976
Item 5 976

159. I
Items Changes
Snapshot ChangesBu
ff
er
I
Items Changes
Snapshot ChangesBu
ff
er
Synchronize
Item 1 489
Item 3 899
Item 4 944
Item 1 489
Item 2 774
Item 3 899
Item 4 944
Item 2 774
Item 3 899
Item 5 911
Item 1 489
Item 2 774
Item 3 899
Item 4 944
Remove 774 Mark done 899
✅ Remove 489
Add “Item 5” 976
Item 4 944 Move up 976

160. I
Items Changes
Snapshot ChangesBu
ff
er
I
Items Changes
Snapshot ChangesBu
ff
er
Synchronize
Item 1 489
Item 3 899
Item 4 944
Item 1 489
Item 2 774
Item 3 899
Item 4 944
Item 2 774
Item 3 899
Item 5 911
Item 1 489
Item 2 774
Item 3 899
Item 4 944
Remove 774
Mark done 899
✅
Remove 489
Add “Item 5” 976
Item 4 944
Move up 976
Remove 774
Mark done 899
Remove 489
Add “Item 5” 976
Move up 976

161. I
Items Changes
Snapshot ChangesBu
ff
er
I
Items Changes
Snapshot ChangesBu
ff
er
Synchronize
Item 1 489
Item 3 899
Item 4 944
Item 1 489
Item 3 899
Item 4 944
Item 2 774
Item 3 899
Item 5 911
Item 1 489
Item 3 899
Item 4 944
Mark done 899
✅
Remove 489
Add “Item 5” 976
Item 4 944
Move up 976
Mark done 899
Remove 489
Add “Item 5” 976
Move up 976

162. I
Items Changes
Snapshot ChangesBu
ff
er
I
Items Changes
Snapshot ChangesBu
ff
er
Synchronize
Item 1 489
Item 3 899
Item 4 944
Item 3 899
Item 4 944
Item 2 774
Item 3 899
Item 5 911
Item 3 899
Item 4 944
Mark done 899
✅
Add “Item 5” 976
Item 4 944
Move up 976
Mark done 899
Add “Item 5” 976
Move up 976

163. I
Items Changes
Snapshot ChangesBu
ff
er
I
Items Changes
Snapshot ChangesBu
ff
er
Synchronize
Item 1 489
Item 3 899
Item 4 944
Item 3 899
Item 4 944
Item 2 774
Item 3 899
Item 5 911
Item 3 899
Item 4 944
Mark done 899
✅
Item 4 944
Move up 976
Mark done 899
Move up 976
Add “Item 5” 976 Add “Item 5” 976

164. I
Items Changes
Snapshot ChangesBu
ff
er
I
Items Changes
Snapshot ChangesBu
ff
er
Synchronize
Item 1 489
Item 3 899
Item 4 944
Item 3 899
Item 4 944
Item 2 774
Item 3 899
Item 5 911
Item 3 899
Item 4 944
Mark done 899
✅
Item 4 944
Move up 976
Mark done 899
Move up 976
Item 5 976
Item 5 976
Add “Item extra” 971
Item extra 971

165. I
Items Changes
Snapshot ChangesBu
ff
er
I
Items Changes
Snapshot ChangesBu
ff
er
Synchronize
Item 1 489
Item 3 899
Item 4 944
Item 3 899
Item 4 944
Item 2 774
Item 3 899
Item 5 911
Item 3 899
Item 4 944
✅
Item 4 944
Move up 976 Move up 976
Item 5 976
Item 5 976
✅ ✅
Add “Item extra” 971
Item extra 971

166. I
Items Changes
Snapshot ChangesBu
ff
er
I
Items Changes
Snapshot ChangesBu
ff
er
Synchronize
Item 1 489
Item 3 899
Item 4 944
Item 3 899
Item 5 911
Item 2 774
Item 3 899
Item 5 911
Item 3 899
Item 5 911
✅
Item 4 944
Item 4 944
Item 4 944
✅ ✅
Add “Item extra” 971
Item extra 971

167. I
Items Changes
Snapshot ChangesBu
ff
er
I
Items Changes
Snapshot ChangesBu
ff
er
Synchronize
Item 3 899
Item 5 911
Item 3 899
Item 5 911
Item 4 944
Item 4 944
✅ ✅
Add “Item extra” 971
Item 3 899
Item 5 911
Item 4 944
✅ Item 3 899
Item 5 911
Item 4 944
✅
Item extra 971

168. I
Items Changes
Snapshot ChangesBu
ff
er
I
Items Changes
Snapshot ChangesBu
ff
er
Synchronize
Item 3 899
Item 5 911
Item 3 899
Item 5 911
Item 4 944
Item 4 944
✅ ✅
Add “Item extra” 971
Item 3 899
Item 5 911
Item 4 944
✅ Item 3 899
Item 5 911
Item 4 944
✅
Item extra 971

169. I
Items Changes
Snapshot ChangesBu
ff
er
I
Items Changes
Snapshot ChangesBu
ff
er
Synchronize
Item 3 899
Item 5 911
Item 3 899
Item 5 911
Item 4 944
Item 4 944
✅ ✅
Add “Item extra” 971
Item 3 899
Item 5 911
Item 4 944
✅ Item 3 899
Item 5 911
Item 4 944
✅
Item extra 971
Add “Item extra” 971

170. I
Items Changes
Snapshot ChangesBu
ff
er
I
Items Changes
Snapshot ChangesBu
ff
er
Synchronize
Item 3 899
Item 5 911
Item 3 899
Item 5 911
Item 4 944
Item 4 944
✅ ✅
Item 3 899
Item 5 911
Item 4 944
✅ Item 3 899
Item 5 911
Item 4 944
✅
Item extra 971
Item extra 971 Item extra 971

171. I
Items Changes
Snapshot ChangesBu
ff
er
I
Items Changes
Snapshot ChangesBu
ff
er
Synchronize
Item 3 899
Item 5 911
Item 3 899
Item 5 911
Item 4 944
Item 4 944
✅ ✅
Item 3 899
Item 5 911
Item 4 944
✅ Item 3 899
Item 5 911
Item 4 944
✅
Item extra 971
Item extra 971 Item extra 971
Item extra 971

172. I
Items Changes
Snapshot ChangesBu
ff
er
I
Items Changes
Snapshot ChangesBu
ff
er
Synchronize
Item 3 899
Item 5 911
Item 3 899
Item 5 911
Item 4 944
Item 4 944
✅ ✅
Item 3 899
Item 5 911
Item extra 920
✅ Item 3 899
Item 5 911
Item extra 925
✅
Item 4 944
Item extra 971 Item extra 971
Item 4 944
Move up 971 Move up 971

173. I
Items Changes
Snapshot ChangesBu
ff
er
I
Items Changes
Snapshot ChangesBu
ff
er
Synchronize
Item 3 899
Item 5 911
Item 3 899
Item 5 911
Item 4 944
Item 4 944
✅ ✅
Item 3 899
Item 5 911
Item extra 920
✅ Item 3 899
Item 5 911
Item extra 925
✅
Item 4 944
Item extra 971 Item extra 971
Item 4 944
Move up 971 Move up 971
Move up 971 Move up 971

174. I
Items Changes
Snapshot ChangesBu
ff
er
I
Items Changes
Snapshot ChangesBu
ff
er
Synchronize
Item 3 899
Item 5 911
Item 3 899
Item 5 911
Item extra 920
Item extra 920
✅ ✅
Item 3 899
Item 5 911
Item extra 920
✅ Item 3 899
Item 5 911
Item extra 925
✅
Item 4 944
Item 4 944 Item 4 944
Item 4 944
Move up 971 Move up 971

175. I
Items Changes
Snapshot ChangesBu
ff
er
I
Items Changes
Snapshot ChangesBu
ff
er
Synchronize
Item 3 899
Item 5 911
Item 3 899
Item 5 911
Item extra 920
Item extra 920
✅ ✅
Item 3 899
Item 5 911
Item extra 920
✅ Item 3 899
Item 5 911
Item extra 925
✅
Item 4 944
Item 4 944 Item 4 944
Item 4 944

176. I
Items Changes
Snapshot ChangesBu
ff
er
I
Items Changes
Snapshot ChangesBu
ff
er
Synchronize
Item 3 899
Item 5 911
Item 3 899
Item 5 911
Item extra 920
Item extra 920
✅ ✅
Item 3 899
Item 5 911
Item extra 920
✅ Item 3 899
Item 5 911
Item extra 920
✅
Item 4 944
Item 4 944 Item 4 944
Item 4 944

177. …

178. This was a take-home project
in a recruitment process
for a technical leader role
in CKSource

179. But not any more! So don’t hesitate and join us :)
(Especially if you like challenges and vanilla JS!)

180. d.urbanski@cksource.com

181. Thanks!