Django and the Real-time Web

Slide 1

Slide 1 text

Django and the Real-Time Web Zachary Voase DjangoCon Europe 2012 

Slide 2

Slide 2 text

WWW: A Changelog IE Chrome 0% 35.0% 70.0% Jul 2008 Apr 2009 Jan 2010 Oct 2010 Jul 2011 Apr 2012 gs.statcounter.com WebSocket Backbone #NewTwitter Google Instant Basecamp Next NodeJS pjax Google Wave Facebook socket.io Chrome Nitro JägerMonkey Trello

Slide 3

Slide 3 text

“Now, here, you see, it takes all the running you can do, to keep in the same place. If you want to get somewhere else, you must run at least twice as fast as that!”

Slide 4

Slide 4 text

• UI before technology • Proactive, not reactive • Synchronized with the ‘real world’ What I Talk About When I Talk About Real-Time

Slide 5

Slide 5 text

Three Stories

Slide 6

Slide 6 text

MVC

Slide 7

Slide 7 text

MVC • Trygve Reenskaug et al. @ PARC, ’78/79 • Originally a part of Smalltalk-80 • Now the dominant UI design pattern

Slide 8

Slide 8 text

MVC Controller View Model

Slide 9

Slide 9 text

Multi-MVC C V M C V M C V M

Slide 10

Slide 10 text

MVC • Start application • Within event loop: • Receive user and network events • Dispatch to controller • Read/write to models • Render views to display • Shut down application

Slide 11

Slide 11 text

MVC on the Web Controller View Model Server Browser

Slide 12

Slide 12 text

MVC on the Web • Listen for requests: • Load session state for this user: • Process forms & user input • Read/write to/from database • Render views (HTML, XML, JSON) • Return response • Persist session state, clean up objects

Slide 13

Slide 13 text

REST

Slide 14

Slide 14 text

REST • REpresentational State Transfer • Roy T. Fielding, 2000 (§5) • Descriptive, not prescriptive

Slide 15

Slide 15 text

REST / /login /about-us /home Invalid Valid Click Click

Slide 16

Slide 16 text

REST • Client-server • Stateless • Cacheable • Layered • Code-on-demand (optional) • Uniform

Slide 17

Slide 17 text

WebSocket(s) • Real TCP connection • ‘Magic’ HTTP request to port 80 • Reduces latency • Enables real-time push

Slide 18

Slide 18 text

REST & WebSockets • Full-duplex communication: client-server • Long-running connections: stateless • Direct TCP connection: layered, cacheable • Ad hoc protocols over WS: uniform

Slide 19

Slide 19 text

FYI: #! belongs in 1 place:

Slide 20

Slide 20 text

#!/bin/sh

Slide 21

Slide 21 text

Version Control

Slide 22

Slide 22 text

Centralised VCS Server Alice Bob

Slide 23

Slide 23 text

Distributed VCS Carol Alice Bob

Slide 24

Slide 24 text

Synthesis

Slide 25

Slide 25 text

Controller View Model Server Browser

Slide 26

Slide 26 text

Controller Alice Model Bob Carol Server

Slide 27

Slide 27 text

C V M C V M C V M Server Bob Alice

Slide 28

Slide 28 text

IMAP SMTP

Slide 29

Slide 29 text

IMAP SMTP

Slide 30

Slide 30 text

C V M C V M C V M Server Bob Alice PUT /polls/123 PUT /polls/123

Slide 31

Slide 31 text

C V M C V M C V M Server Bob Alice PUT /polls/123 PUT /polls/123

Slide 32

Slide 32 text

C V M C V M C V M Server Bob Alice PUT /polls/123 PUT /polls/123

Slide 33

Slide 33 text

{ "method": "PUT", "resource": "/polls/123", "content": { "name": "Favourite Beer", "created": "2012-06-04T10:50:00" } }

Slide 34

Slide 34 text

• Read RFC 2616 • Seriously. • Etags • Cache-Control Caching

Slide 35

Slide 35 text

Conflict Resolution

Slide 36

Slide 36 text

(uri, etag, dirty?) Conflict Resolution

Slide 37

Slide 37 text

Conflict Resolution if not uri: CREATE elif is_dirty: # I've made local changes if local_etag == remote_etag: OK else: CONFLICT else: if local_etag == remote_etag: NOOP else: REDOWNLOAD

Slide 38

Slide 38 text

Implications • Assumption of orthogonality • Lossless representations • Authn & authz • Pub/sub • Resource-oriented client

Slide 39

Slide 39 text

Pub/sub • AMQP • ØMQ • Django signals

Slide 40

Slide 40 text

Barriers • Django ORM • Content negotiation • JavaScript • Proxies & middleware

Slide 41

Slide 41 text

Questions? @zacharyvoase