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

Realtime Collaborative State

Realtime Collaborative State

Presented at HTML5 Denver. Robots riding unicorns and ynchronizing client-side state in realtime collaborative applications with backbone.js, socket.io, and backbone.iobind.

7071119714e1a32441aca0c336657d3e?s=128

Mike Brevoort

March 19, 2012
Tweet

Transcript

  1. Realtime Collaborative State talk HTML 5 Denver Mike Brevoort @mbrevoort

    19 March 2012 Monday, March 19, 12
  2. Realtime the actual time during which something takes place http://www.merriam-webster.com/dictionary/realtime

    Monday, March 19, 12
  3. The traditional web was like the Gold Exchange of the

    1860’s Monday, March 19, 12
  4. web pages were disconnected islands at first... Monday, March 19,

    12
  5. <META HTTP-EQUIV=Refresh CONTENT='60; URL=index.php'> then we refreshed... Monday, March 19,

    12
  6. setInterval(fetchData, 10000) then we polled... Monday, March 19, 12

  7. connected! today we can be... bi-directionally! Monday, March 19, 12

  8. through the magic of websockets, long polling and streaming http://superbigrobot.tumblr.com/post/12650075475/meme-meme-robot-unicorn-dinosaur-all

    Monday, March 19, 12
  9. some realtime apps are primarily evented data updates sweet! the

    value of Pacific Ave just went up! Monday, March 19, 12
  10. managing state in the browser is tricky but when browser

    state is basically a readonly view of backend data Monday, March 19, 12
  11. Collaborative realtime apps are harder Monday, March 19, 12

  12. sometimes we need to synchronize view state and behavior Monday,

    March 19, 12
  13. how can we do this by sanely just passing messages?

    Monday, March 19, 12
  14. binding views exclusively to client- side models is a powerful

    abstraction Monday, March 19, 12
  15. 1. if we bind our view to a model Monday,

    March 19, 12
  16. 2. and we synchronize the model between clients Monday, March

    19, 12
  17. 3. then we can synchronize view state between clients Monday,

    March 19, 12
  18. 4. and if the model is synchronized with the server

    Monday, March 19, 12
  19. 5. we can effectively handle new clients or connection interruptions

    Monday, March 19, 12
  20. enabling a new class of apps like realtime collaborative quizzes

    Monday, March 19, 12
  21. backbone.js socket.io backbone.ioBind + redis (optional) + capsule.js or (

    ) + for example... = Monday, March 19, 12
  22. a simple collaborative ideas demo thanks! Monday, March 19, 12

  23. Monday, March 19, 12