The document discusses the principles of eventual consistency applied in web app development, particularly through the use of 'swarm', a JavaScript object sync library that enables real-time collaboration. It details the functionality of causal trees technology for version control in Citrea's collaborative rich text editor and emphasizes the importance of lightweight algorithms for practical implementation. Additionally, it introduces CRDTs (Conflict-free Replicated Data Types) that ensure concurrent operations can be merged without complex concurrency control.

1. SWARM @ MOSCOWJS
реактивная синхронизация данных
Виктор Грищенко, ООО «Ситреа»
17 июля 2014

2. 1 2 3 4 5
atom a1
(Alice's first)
weft: a4 weft: a4b2 weft: a5b2
atom offsets
within yarns
yarn "a"
Alice
yarn "0"
special
yarn "b"
Bob ⌫ x
T e s t
ॐ ‫۝‬
causality relation:
a5 is caused by b2
→
3.3 Ordering of siblings
a b a b a
b
a b
a b
a
b c
c
c
a b ( ) > ( )
ct
Citrea and Swarm: partially ordered op logs in
the browser
Victor Grishchenko
Citrea LLC
victor.grishchenko@gmail.com
25 March 2014
Abstract
Principles of eventual consistency are normally applied in large-
scale distributed systems. I report experiences applying EC in Web
app development. Citrea is a collaborative rich text editor employing
the Causal Trees[4] technology of concurrency/version control (note:
CT is not an OT flavor). CT employs symbol ids and trees and, gener-
ally, belongs to the same family as WOOT, Logoot or Treedoc [1, 3, 2].
CT makes the ids-and-trees approach production-practical by limiting
itself to simple and lightweight algorithms and data structures. Swarm
is a JavaScript object sync library that works in the browser, in real
time. Swarm fully employs client-side storage and works well under in-
termittent connectivity. Swarm employs “pure” op-based model. Our

3. СИНХРОНИЗАЦИЯ
• кэширование
• оффлайн
• реалтайм
CAP

4. CRDT
Convergent…
Commutative…
Cloud…
Replicated
Data
Types
A CRDT is a data type whose operations
commute when they are concurrent.
Replicas of a CRDT eventually converge
without any complex concurrency control.

5. ПРОСТЕНЬКИЙ CRDT
11: Is value1 Æ value2 in semilattice?
12: merge (value1, value2) : payload mergedValue
13: LUB merge of value1 and value2, at any replica
M
mergemerge
M
g(x2)
S
S
source
f(x1)
x3
x1
x2
x merge
M
Figure 4: State-based replication
0 1 4
14 4
4 4
4
M
maxmax
M
x2 := 4
G+A
G+A
x1 := 1
x3
x1
x2
x max
M0
0
0
4
4
4
4 4
Figure 5: Example CvRDT: integer + max

6. SWARM

7. SWARM: M OF MVC

8. SWARM (CODE)
var host = new Swarm.Host('user~ssn');
!
host.connect(‘ws://localhost:8000');
!
var mickey = host.get(‘/Mouse#Mickey’,
function(s,v,o){
mickey.set({
x:100,
y:100
});
});

9. SWARM + REACT
var SwarmMixin = {
deliver: function (spec,val,source) {
this.isMounted() && this.forceUpdate();
},
componentWillMount: function () {
var spec = this.props.spec;
this.sync = app.host.get(spec);
this.sync.on('.init',this);
this.sync.on(this);
},
componentWillUnmount: function () {
this.sync.off(this);
}
};
React.renderComponent(
MouseTrackApp ({spec:’/Mouse#Mickey’}),
document.getElementById('mice-container')
);
get by spec
on/off

10. http://swarmjs.github.io
http://github.com/gritzko/swarm
@gritzko
@swarm_js
victor.grishchenko@gmail.com