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.

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