Swarm.js talk at MoscowJS 17 Jul 2014, Moscow, DI Telegraph

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