swarm.js: реактивная синхронизация данных — Виктор...

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

Upload: moscowjs

Post on 23-Aug-2014

494 views

Category:

Internet


12 download

DESCRIPTION

Такие продвинутые возможности приложения, как обновление данных в реальном времени, совместная работа, оффлайн, кэширование и handover/continuity упираются в одну проблему — синхронизацию реплик данных. Наша смелая мечта — писать такие распределённые приложения, как простое MVC, работая лишь с локальной репликой модели и делегировав синхронизацию специальному middleware. В докладе я расскажу, что такое CRDT и как библиотека Swarm.js позволяет строить реактивные архитектуры, реализующие все эти возможности (с демонстрацией).

TRANSCRIPT

SWARM @ MOSCOWJSреактивная синхронизация данных

Виктор Грищенко, ООО «Ситреа» 17 июля 2014

1 2 3 4 5

atom a1(Alice's first)

weft: a4 weft: a4b2 weft: a5b2

atom offsetswithin 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 ab

a b

a b

]a

b cc

ฦ c

a b ( ) > ( )

ct

Citrea and Swarm: partially ordered op logs in

the browser

Victor GrishchenkoCitrea LLC

[email protected]

25 March 2014

Abstract

Principles of eventual consistency are normally applied in large-scale distributed systems. I report experiences applying EC in Webapp development. Citrea is a collaborative rich text editor employingthe 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 limitingitself to simple and lightweight algorithms and data structures. Swarmis a JavaScript object sync library that works in the browser, in realtime. Swarm fully employs client-side storage and works well under in-termittent connectivity. Swarm employs “pure” op-based model. Ourtop finding is a specifier, a serialized event description format thatenables straightforward operation storage, caching and exchange.

This paper briefly describes our experiences and findings made while imple-menting an in-browser collaborative editor Citrea (currently in semi-openbeta at letters.yandex.ru) and a real-time JavaScript object sync librarySwarm.js (unreleased as of Feb 2014). Partially ordered log of immutableoperations (POLO) is a known approach in the eventual consistency land.Normally, POLO is employed by large scale systems once operation log lin-earization becomes unfeasible. We had some experience applying POLO ata smaller scale, namely to a real-time collaborative editor system, where a

1

СИНХРОНИЗАЦИЯ

• кэширование

• оффлайн

• реалтайм

CAP

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.

ПРОСТЕНЬКИЙ CRDT

6 Shapiro, Preguiça, Baquero, Zawirski

Specification 1 Outline of a state-based object specification. Preconditions, arguments, returnvalues and statements are optional.

1: payload Payload type; instantiated at all replicas

2: initial Initial value

3: query Query (arguments) : returns

4: pre Precondition

5: let Evaluate synchronously, no side e�ects

6: update Source-local operation (arguments) : returns

7: pre Precondition

8: let Evaluate at source, synchronously

9: Side-e�ects at source to execute synchronously

10: compare (value1, value2) : boolean b

11: Is value1 Æ value2 in semilattice?

12: merge (value1, value2) : payload mergedValue13: LUB merge of value1 and value2, at any replica

M

mergemergeM

g(x2)S

S

sourcef(x1)

x3

x1

x2

x mergeM

Figure 4: State-based replication

0 1 4

14 4

4 4

4

M

maxmaxM

x2 := 4G+A

G+A

x1 := 1

x3

x1

x2

x maxM0

0

0

4

4

4

4 4

Figure 5: Example CvRDT: integer + max

INRIA

inria

-005

5558

8, v

ersi

on 1

- 13

Jan

201

1

SWARM

SWARM: M OF MVC

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 }); });

SWARM + REACTvar 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

http://swarmjs.github.io http://github.com/gritzko/swarm

@gritzko

@[email protected]