djangocon europe 2012 - sync-models

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

Upload: bikeshedder

Post on 20-Jul-2015

361 views

Category:

Technology


3 download

TRANSCRIPT

Page 1: Djangocon Europe 2012 - Sync-Models

Sync-ModelsSynchronizing Object Graphs in Realtime

Wednesday, 6. June 2012 [W]

Page 2: Djangocon Europe 2012 - Sync-Models

Basic idea

Synchronize object graphs

Push changes via long-polling(future plan: WebSockets, SSE)

Every object gets an unique idto identify the object

Once part of the graph - push updates to the client automatically

Server

Client

Push!!!11one

Wednesday, 6. June 2012 [W]

Page 3: Djangocon Europe 2012 - Sync-Models

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]

Page 4: Djangocon Europe 2012 - Sync-Models

Architecture

Server

Client

Long pollingCall WebSocketSSE*

*Server-sent eventsWednesday, 6. June 2012 [W]

Page 5: Djangocon Europe 2012 - Sync-Models

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]

Page 6: Djangocon Europe 2012 - Sync-Models

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]

Page 7: Djangocon Europe 2012 - Sync-Models

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]

Page 8: Djangocon Europe 2012 - Sync-Models

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]

Page 9: Djangocon Europe 2012 - Sync-Models

Live Demo

Wednesday, 6. June 2012 [W]

Page 10: Djangocon Europe 2012 - Sync-Models

Protocol(Snapshot)

{ “0”: { “class”: “bb.BulletinBoard”, “messages*”: [1] }, “1”: { “class”: “bb.Message”, “user*”: 2, “text”: “What rocks?” }, “2”: { “class”: “auth.User”, “username”: “bikeshedder” }}

Wednesday, 6. June 2012 [W]

Page 11: Djangocon Europe 2012 - Sync-Models

Protocol(Updates)

{ “0”: { “messages*”: [2, 4] }, “4”: { “class”: “bb.Message”, “user*”: 5, “text”: “Django and DjangoCon Europe 2012” }, “5”: { “class”: “auth.User”, “username”: “solid” }}

Wednesday, 6. June 2012 [W]

Page 12: Djangocon Europe 2012 - Sync-Models

Protocol(Delete)

{ “0”: { “messages*”: [4] }, “1”: null, “2”: null}

Not implemented, yet.

Wednesday, 6. June 2012 [W]

Page 13: Djangocon Europe 2012 - Sync-Models

http://bikeshedder.com/

KODEX beta sign-up:http://kodexgame.com/beta/

Wednesday, 6. June 2012 [W]