and other new ideas
Andrey Sitnik
Evil Martians
CRDT
for client-server communication
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/5127566/inside-an-elizabethan-sailing-ship_1.jpg)
I am working at
@sitnikcode
Autoprefixer
PostCSS
Browserslist
The creator of
@sitnikcode
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/5127760/DVCXOEVVwAAHQwD.jpg)
Part 1. What is next?
GraphQL is cool
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/5128317/smiling-face-with-heart-shaped-eyes_1f60d.png)
@sitnikcode
What’s the next big idea?
RPC
SOAP
REST
GraphQL
?
@sitnikcode
And then I saw CRDT talk by Victor Grishenko
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/5128341/5301.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/3295699/site-logo.png)
Swarm.js
What I believe in
RPC
SOAP
REST
GraphQL
CRDT
¯\_(ツ)_/¯
not 100% sure
@sitnikcode
Part 2. Non-standard problem
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/5130912/rowboat_ship_dock_painting_barrels_horse_boxes_classic_art-199712.jpg)
A very standard problem
Buy a milk
0
Buy a break
0
Buy a whiskey
1
New to-do
Buy a whiskey
1
Leave a comment
You were prepared for this
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/5128705/5bNYlqP.png)
@sitnikcode
You finished the project
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/5128756/7087challenge_accepted.jpg)
@sitnikcode
Small detail from client
I forgot a small detail.
Multiple users should edit the same task at the same moment.
Should not be that hard to add?
@sitnikcode
Should we ask user to merge conflict?
@sitnikcode
Buy a whiskey
Buy a vodka
Another user change the same task.
Please choose the right revision:
We need automaic edit conflict resolution
Buy a whiskey
Buy a vodka
Another user change the same task.
Please choose the right revision:
People shouldn’t suffer. Machines should suffer
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4059039/f129011be0142f4d0da04b8ee530b172.jpg)
We can add hacks around GraphQL …
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/5128819/Без_названия.jpeg)
@sitnikcode
… or you can go to the dungeons of CS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/5128841/562MaZ4aJiU.jpg)
@sitnikcode
Distributed systems, 1982
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/5128843/enchiridion_farm_world_by_philelmago-db6tecg.png)
@sitnikcode
Part 3. Distributed systems
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/5130913/Raid-on-New-York.jpg)
Conflicts resolution
{
name: '伏特加',
likes: 50
}
{
name: '白兰地',
likes: 51
}
?
@sitnikcode
“Bad programmers worry about the code.
Good programmers worry about
data structures”
— Linus Torvalds
Source: https://lwn.net/Articles/193245/
Sending the whole state is a problem
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/5131042/linus.faces22052.web_.jpg)
@sitnikcode
Event sourcing
set likes=50
set name='白兰地'
set likes=50
set name='白兰地'
@sitnikcode
Event = Redux action
set likes=50
{ type: 'SET_LIKES', value: 50 }
@sitnikcode
Important part
No AJAX requests
showLoader()
fetch('/profile', {
credentials: 'include',
method: 'POST',
form
}).then(r => {
hideLoadaer()
}).catch(e => {
…
})
@sitnikcode
No mutations or sagas
const ADD_TODO = gql`
mutation addTodo($type: String!) {
addTodo(type: $type) {
id
type
}
}
`;
const AddTodo = () => {
return (
<Mutation mutation={ADD_TODO}>
{addTodo => (
<button onClick={() => {
addTodo({ variables })
}}>
)}
</Mutation>
)
}
const createTask = write.bind(
null, taskList, taskList.push,
createTaskFailed)
function* watchCreateTask() {
while (true) {
let { payload } = yield take(CREATE_TASK);
yield fork(createTask, payload.task);
}
}
@sitnikcode
No loaders
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4219187/512x512.png3b853521-e78a-43a5-b4e3-aac827518645Large.jpg)
Continue to work
Save
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4221837/bouncer1.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4221839/bouncer2.jpg)
@sitnikcode
Keep WebSockets
WS
@sitnikcode
Send Redux actions to server in background
Buy a break
Buy a break
dispatch({ type: 'DONE', taskId: 12 })
{ type: 'DONE', taskId: 12 }
WS
Optimistic UI, 2010
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4219187/512x512.png3b853521-e78a-43a5-b4e3-aac827518645Large.jpg)
Continue to work
Save
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4221837/bouncer1.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4221839/bouncer2.jpg)
Continue to work
Save
First mention: Google Wave Operational Transformation
@sitnikcode
Server re-send actions to other clients
{ type: 'DONE', taskId: 12 }
WS
WS
@sitnikcode
Server could create Redux actions too
{ type: 'TRIAL_END' }
WS
@sitnikcode
What if you need a loader?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/3582556/14317911768789.jpg)
Pessimistic UI
@sitnikcode
Use two actions for Pessimistic UI
{ type: 'PAY', … }
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4219187/512x512.png3b853521-e78a-43a5-b4e3-aac827518645Large.jpg)
{ type: 'PAID' }
@sitnikcode
DB error?
@sitnikcode
Redux already has action undo in DevTools
Server can ask a client to undo wrong action
Name A
Rename to B
Name B
Rename to B
Undo
Name A
Part 4. The time
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/5131191/Schepen_aan_lager_wal_-_Ships_running_aground_-_The__Ridderschap__and__Hollandia__in_trouble_in_the_Street_of_Gibraltar_1-3_March_1694__Ludolf_Backhuysen__1708_.jpg)
Distributed systems are not so easy
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/3617202/how-to-draw-an-owl.jpg)
Step 1 Create an idea
Step2 Implement it
@sitnikcode
Every client could create action
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/5132865/63982f7d9a7da4331ffcebef09830384.jpg)
Action
Client 1
Client 2
Action
Action
Action
@sitnikcode
Actions order problem
Rename to A
Final: B
Rename to B
Rename to B
Final: A
Rename to A
@sitnikcode
Time to maintain the same action order?
dispatch({ …, time: Date.now() })
actions.sortBy(i => i.time)
Time: no synchroniziation across clients
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/5128756/7087challenge_accepted.jpg)
13:15:00 UTC
12:10:00 UTC
1970-01-01 01:15:00
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/5132893/45119094_0b62d0583950196052f526056f557c66_800.jpg)
@sitnikcode
Return to distributed systems dungeons
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/5128841/562MaZ4aJiU.jpg)
@sitnikcode
No time = no problem
@sitnikcode
Logical clock, 1978
let counter = 0
function now () {
counter += 1
return counter + ':' + uniqueClientId
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/5133250/Lamport_5.jpg)
@sitnikcode
Part 5. Edit conflicts
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/5132927/1-the-battle-of-trafalgar-english-school.jpg)
Easy to merge changes in different fields
{
type: 'SET_LIKES',
taskId: 1,
likes: 50
}
{
type: 'CHANGE_NAME',
taskId: 1,
name: 'Buy a bread'
}
But how to merge changes of the same field?
{
type: 'SET_LIKES',
taskId: 1,
likes: 50
}
{
type: 'SET_LIKES',
taskId: 1,
likes: 50
}
?
Collaborative text editing?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/5133333/googlecollab.png)
@sitnikcode
How to make actions atomic?
{
? // What put here
}
@sitnikcode
Return to distributed systems dungeons
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/5128841/562MaZ4aJiU.jpg)
@sitnikcode
CRDT, 2009
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/3295643/RdoCb5i.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/5133263/Marc_Shapiro.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/5133264/Carlos_Baquero.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/5133267/nmp155.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/5133268/lDhiwLTf.jpg)
@sitnikcode
Conflict-free replicated data types
- Op-based counter
- G-Counter
- PN-Counter
- Non-negative Counter
- LWW-Register
- MV-Register
- G-Set
- 2P-Set
- LWW-element-Set
- PN-Set
- OR-Set
- Add-only monotonic DAG
- Add-remove Partial Order
- Replicated Growable Array
- Continuous sequence
…
@sitnikcode
P2P: every node could create event
Name = A, time: 2
Name = B, time: 1
@sitnikcode
No master
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/5133290/Eugène_Delacroix_-_Le_28_Juillet._La_Liberté_guidant_le_peuple.jpg)
Same final state after synchronization
Name = A
Name = A
Name = A
Name = A
Name = A
Name = A
Name = A
Sorry, last write wins
@sitnikcode
Op-based counter
{
type: 'SET_LIKES',
taskId: 1,
likes: 51
}
{
type: 'ADD_LIKE',
taskId: 1
},
{
type: 'REMOVE_LIKE',
taskId: 1
}
@sitnikcode
Action for changing every symbol in text?
c a t 1 2 3
delete symbol at index 1
cat → at
add symbol h after index 1
cat → chat
String:
Indexes:
Operations change symbol indexes
c a t 1 2 3
delete symbol at index 1
String:
Indexes:
a t 1 2
String:
Indexes:
@sitnikcode
Conflicts after merging
delete 1
add h after 1
cat → aht
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4920458/aw7e9Lx_700b.jpg)
delete symbol at index 1
cat → at
add symbol h after index 1
cat → chat
@sitnikcode
+
Persistent indexes
delete symbol at index 1
a t 2 3
String:
Indexes:
@sitnikcode
c a t 1 2 3
String:
Indexes:
Persistent indexes
add symbol h after index 1
c h a t 1 1.5 2 3
String:
Indexes:
@sitnikcode
c a t 1 2 3
String:
Indexes:
Better merging
delete 1
add h to 1.5
cat → hat
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/5128756/7087challenge_accepted.jpg)
delete symbol at index 1
cat → at
add symbol h to index 1.5
cat → chat
@sitnikcode
CRDT is not a silver bullet
CRDT
Real apps
@sitnikcode
CRDT is inspiration for your custom types
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/5133395/1200px-The_Inspiration_of_Saint_Matthew-Caravaggio__1602_.jpg)
Part 6. The result
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/5133408/landscape-painting-people-mountains-ship-boat-28145-wallhere.com.jpg)
Overview
- Redux, Vuex, etc
- action.time = distributedTime()
- Sync actions between server and clients
- Time travel for undo and inserting in the middle of the history
- CRDT to make actions atomic
@sitnikcode
We made a collaborative ToDo app
Buy a milk
0
Buy a break
0
Buy a whiskey
1
New to-do
Buy a whiskey
1
Leave a comment
@sitnikcode
But maybe we made something bigger?
New non-standard problem
Bring back old forgotten theory
Find it fitting for other things
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4219187/512x512.png3b853521-e78a-43a5-b4e3-aac827518645Large.jpg)
@sitnikcode
AJAX & GraphQL were designed for
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/3575227/mPV8Lo8.png)
Image: Nikita Prokopov
@sitnikcode
CRDT was designed for
Image: Nikita Prokopov
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/3575245/P0Y2RR6.png)
@sitnikcode
40 % packet lost in China
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/3580974/NjFlSJnLzC8.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4221711/Flag_of_China.png)
@sitnikcode
No stable Internet in NY subway
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4219222/2015-07-23-mr-robot.jpg)
Image: Mr. Robot
Next billion users will not have good Internet
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4219287/1398243193465_01_John_Stanmeyer.jpg)
Image: John Stanmeyer
Bad connection support because CRDT is P2P
Option: Multi-master servers
@sitnikcode
Optimistic UI and live updates by design
@sitnikcode
CRDT features
@sitnikcode
- Works on bad Internet → more users → more profit
- P2P by design → easy to scale
- Optimistic UI → faster UI → more profit
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4906155/9VkzCrUI.jpg)
CRDT for regular apps
What I believe in
RPC
SOAP
REST
GraphQL
CRDT
¯\_(ツ)_/¯
not 100% sure
@sitnikcode
Thanks