Those are my slides from the DjangoCon Europe 2012 lightning talk: Sync-Models - Synchronizing Object Graphs in Realtime

1. Sync-Models
Synchronizing Object Graphs in Realtime
Wednesday, 6. June 2012 [W]

2. Basic idea Server
Synchronize object graphs
Push changes via long-polling
(future plan: WebSockets, SSE) Push!!!11one
Every object gets an unique id
to identify the object
Once part of the graph - push
updates to the client automatically
Client
Wednesday, 6. June 2012 [W]

3. Ingredients
Django (only some nifty bits of it)
gevent
“Simple JavaScript Inheritance” by John Resig
KnockoutJS
kodex.sync (to be released under F/OSS license)
Help wanted. Meet me
at the sprint on thursday.
Wednesday, 6. June 2012 [W]

4. Architecture
Server
Call Long polling SSE* WebSocket
Client
*Server-sent events
Wednesday, 6. June 2012 [W]

5. Server side
from kodex.sync import models
class BulletinBoard(models.RootModel):
messages = models.ReferenceListField()
class Message(models.Model):
user = models.ReferenceField()
text = models.StringField()
Wednesday, 6. June 2012 [W]

6. Server side
from kodex.sync import server
class Server(server.SyncServer):
def __init__(self):
self.root = BulletinBoard()
def post(message):
self.root.messages.append(message)
Wednesday, 6. June 2012 [W]

7. Client side
<div id=”bb”>
<ul class=”messages” data-bind=”
foreach: root.messages”>
<li>
<span class=”user” data-bind=”
text: user”></span>:
<span class=”text” data-bind=”
text: user”></span>
</li>
</ul>
</div>
Wednesday, 6. June 2012 [W]

8. Client side
bb.Client = kodex.sync.Client.extend({
post: function(text) {
this.request(‘post’, { text: text })
}
})
var client = new bb.Client();
$(‘#bb’).koApplyBindings(client);
Wednesday, 6. June 2012 [W]

9. Live Demo
Wednesday, 6. June 2012 [W]

10. {
“0”: { Protocol
“class”: “bb.BulletinBoard”,
(Snapshot)
“messages*”: [1]
},
“1”: {
“class”: “bb.Message”,
“user*”: 2,
“text”: “What rocks?”
},
“2”: {
“class”: “auth.User”,
“username”: “bikeshedder”
}
}
Wednesday, 6. June 2012 [W]

11. {
“0”: { Protocol
“messages*”: [2, 4] (Updates)
},
“4”: {
“class”: “bb.Message”,
“user*”: 5,
“text”: “Django and DjangoCon Europe 2012”
},
“5”: {
“class”: “auth.User”,
“username”: “solid”
}
}
Wednesday, 6. June 2012 [W]

12. Protocol
(Delete)
{
Not implemented, yet.
“0”: {
“messages*”: [4]
},
“1”: null,
“2”: null
}
Wednesday, 6. June 2012 [W]

13. http://bikeshedder.com/
KODEX beta sign-up:
http://kodexgame.com/beta/
Wednesday, 6. June 2012 [W]