Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Django and the Real-time Web

Django and the Real-time Web

The modern Web—indeed, the modern user—demands that we write applications that work faster than the traditional request/response cycle. But how relevant is Django in the age of pjax, node.js and WebSockets? I believe Django remains a powerful utility in the new Web, and in this talk I'll share some techniques and tools for reducing the complexity of real-time applications. I'll explain how I manage code duplication when key business logic is split between the client and the server, and demonstrate ways to preserve a RESTful and accessible design whilst providing a more responsive experience to clients who support it.

Fcd3a40babe606ef30cb342a6a74c54c?s=128

Zachary Voase

June 04, 2012
Tweet

Transcript

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

  2. 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
  3. “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!”
  4. • UI before technology • Proactive, not reactive • Synchronized

    with the ‘real world’ What I Talk About When I Talk About Real-Time
  5. Three Stories

  6. MVC

  7. MVC • Trygve Reenskaug et al. @ PARC, ’78/79 •

    Originally a part of Smalltalk-80 • Now the dominant UI design pattern
  8. MVC Controller View Model

  9. Multi-MVC C V M C V M C V M

  10. 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
  11. MVC on the Web Controller View Model Server Browser

  12. 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
  13. REST

  14. REST • REpresentational State Transfer • Roy T. Fielding, 2000

    (§5) • Descriptive, not prescriptive
  15. REST / /login /about-us /home Invalid Valid Click Click

  16. REST • Client-server • Stateless • Cacheable • Layered •

    Code-on-demand (optional) • Uniform
  17. WebSocket(s) • Real TCP connection • ‘Magic’ HTTP request to

    port 80 • Reduces latency • Enables real-time push
  18. REST & WebSockets • Full-duplex communication: client-server • Long-running connections:

    stateless • Direct TCP connection: layered, cacheable • Ad hoc protocols over WS: uniform
  19. FYI: #! belongs in 1 place:

  20. #!/bin/sh

  21. Version Control

  22. Centralised VCS Server Alice Bob

  23. Distributed VCS Carol Alice Bob

  24. Synthesis

  25. Controller View Model Server Browser

  26. Controller Alice Model Bob Carol Server

  27. C V M C V M C V M Server

    Bob Alice
  28. IMAP SMTP

  29. IMAP SMTP

  30. C V M C V M C V M Server

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

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

    Bob Alice PUT /polls/123 PUT /polls/123
  33. { "method": "PUT", "resource": "/polls/123", "content": { "name": "Favourite Beer",

    "created": "2012-06-04T10:50:00" } }
  34. • Read RFC 2616 • Seriously. • Etags • Cache-Control

    Caching
  35. Conflict Resolution

  36. (uri, etag, dirty?) Conflict Resolution

  37. 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
  38. Implications • Assumption of orthogonality • Lossless representations • Authn

    & authz • Pub/sub • Resource-oriented client
  39. Pub/sub • AMQP • ØMQ • Django signals

  40. Barriers • Django ORM • Content negotiation • JavaScript •

    Proxies & middleware
  41. Questions? @zacharyvoase