Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
SWARM @ MOSCOWJS
реактивная синхронизация данных
Виктор Грищенко, ООО «Ситреа»	

17 июля 2014
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
...
СИНХРОНИЗАЦИЯ
• кэширование
• оффлайн
• реалтайм
CAP
CRDT
Convergent…
Commutative…
Cloud…
Replicated
Data
Types
A CRDT is a data type whose operations
commute when they are co...
ПРОСТЕНЬКИЙ CRDT
11: Is value1 Æ value2 in semilattice?
12: merge (value1, value2) : payload mergedValue
13: LUB merge of ...
SWARM
SWARM: M OF MVC
SWARM (CODE)
var host = new Swarm.Host('user~ssn');
!
host.connect(‘ws://localhost:8000');
!
var mickey = host.get(‘/Mouse...
SWARM + REACT
var SwarmMixin = {
deliver: function (spec,val,source) {	

	

 	

 this.isMounted() && this.forceUpdate();
}...
http://swarmjs.github.io
http://github.com/gritzko/swarm



@gritzko
@swarm_js

victor.grishchenko@gmail.com
Upcoming SlideShare
Loading in …5
×

Swarm.js: реактивная синхронизация данных — Виктор Грищенко — MoscowJS 13

4,141 views

Published on

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

Published in: Internet

Swarm.js: реактивная синхронизация данных — Виктор Грищенко — MoscowJS 13

  1. 1. SWARM @ MOSCOWJS реактивная синхронизация данных Виктор Грищенко, ООО «Ситреа» 17 июля 2014
  2. 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. 3. СИНХРОНИЗАЦИЯ • кэширование • оффлайн • реалтайм CAP
  4. 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. 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. 6. SWARM
  7. 7. SWARM: M OF MVC
  8. 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. 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. 10. http://swarmjs.github.io http://github.com/gritzko/swarm
 
 @gritzko @swarm_js
 victor.grishchenko@gmail.com

×