Real World Realtime with Backbone

Challenges and lessons learned building realtime apps with backbone.js. Talk given at BackboneConf 2012 in Boston, MA.

Transcript

1. REAL WORLD REALTIME WITH BACKBONE @HenrikJoreteg Thursday, May 31, 12
2. WHY ARE YOU HERE? Thursday, May 31, 12
3. BECAUSE YOU BUILD COMPLEX STUFF WITH JAVASCRIPT Thursday, May 31, 12
4. BACKBONE MAKES DOING THAT CLEANER AND MORE FUN BACKBONE MAKES DOING THAT CLEANER AND MORE FUN Thursday, May 31, 12
5. A SHOW OF HANDS, PLEASE A SHOW OF HANDS, PLEASE Thursday, May 31, 12
6. WHO AMONG YOU HAS BEEN ASKED TO BUILD A SINGLE-PAGE APP? Thursday, May 31, 12
7. AND WHO AMONG YOU HAS BEEN ASKED TO BUILD A REALTIME APP? Thursday, May 31, 12
8. YOU WILL YOU WILL Thursday, May 31, 12
9. AT WE’VE BUILT PILES OF REALTIME APPS. Thursday, May 31, 12
10. OCTOBER 23-24 IN PORTLAND Thursday, May 31, 12
11. WE’VE DONE IT WRONG MORE WAYS THAN YOU HAVE TIME TO HEAR. Thursday, May 31, 12
12. WHAT DOES “REALTIME” EVEN MEAN? WHAT DOES “REALTIME” EVEN MEAN? Thursday, May 31, 12
13. PUSH NOT POLL Thursday, May 31, 12
14. var Widgets = Backbone.Collection.extend({ url: ‘/widgets’ }); var widgets = new Widgets(); myCollection.fetch(); INSTEAD OF ASKING FOR DATA: Thursday, May 31, 12
15. // BAM! EAT DATA!!! socket.on(‘someEvent’, function (payload) { ! // Umm... now what? ! doSomethingClever();! }); DATA JUST SHOWS UP Thursday, May 31, 12
16. BUT Thursday, May 31, 12
17. WHAT’S BACKBONE GOT TO DO WITH IT? Thursday, May 31, 12
18. THE FIRST TIME I USED BACKBONE WAS FOR A REALTIME APP. Thursday, May 31, 12
19. TYPICAL REALTIME APP FLOW: • AUTH / CONNECT • GET SOME INITIAL DATA • SUBSCRIBE TO SOME TYPE OF UPDATES • USE SOME FORM OF RPC TO RUN SCRIPTS ON THE SERVER Thursday, May 31, 12
20. // socket.io example var socket = io.connect(‘https://api.andbang.com’), widgets = new WidgetCollection(); // handler for initial data payload socket.on(‘initialData’, function (arrayOfWidgets) { ! // inflate your models structure ! widgets.add(arrayOfWidgets); }); // change handler socket.on(‘widgetUpdate’, function (payload) { var widgetModel = widgets.get(payload.id); if (widgetModel) { widgetModel.set(payload.attributes); } }); Thursday, May 31, 12
21. Thursday, May 31, 12
22. I CANNOT EMPHASIZE THIS ENOUGH: Thursday, May 31, 12
23. STATE DUPLICATION IS EVIL Thursday, May 31, 12
24. Thursday, May 31, 12
25. TRANSPORTS NO LONGER MATTER Thursday, May 31, 12
26. REST, XMPP, WEBSOCKET, SOME HANGING CALLBACK, SERVER-SENT EVENTS, ETC Thursday, May 31, 12
27. EVEN USER INTERACTION IS JUST ANOTHER THING MODIFYING YOUR DATA. Thursday, May 31, 12
28. October 29, 2010 Thursday, May 31, 12
29. IF YOU’VE BUILT YOUR BACKBONE CORRECTLY, ADDING REALTIME ISN’T REALLY THAT DIFFERENT. Thursday, May 31, 12
30. BONUS LESSON: REFACTOR EARLY, REFACTOR OFTEN, REFACTOR AWESOME Thursday, May 31, 12
31. SO WHAT *IS* DIFFERENT? SO WHAT *IS* DIFFERENT? Thursday, May 31, 12
32. ZERO CONTROL OF TIMING Thursday, May 31, 12
33. IRRELEVANT EVENTS Thursday, May 31, 12
34. MORE UI TO MANAGE Thursday, May 31, 12
35. NO LINK BETWEEN MODELS AND EVENTS Thursday, May 31, 12
36. I BET I KNOW WHAT YOU’RE THINKING Thursday, May 31, 12
37. WHY NOT USE A NEW COOL REALTIME FRAMEWORK? SOCKETSTREAM METEOR.JS DERBY.JS CAPSULE.JS Thursday, May 31, 12
38. THEY MAKE BIG PROMISES • CODE SHARING • SEAMLESS STATE HANDLING • AUTO-UPDATING TEMPLATES • AUTOMATIC CONFLICT RESOLUTION • “HOT” CODE DEPLOYS Thursday, May 31, 12
39. IT’S COOL. Thursday, May 31, 12
40. IT’S COOL. BUT IS IT... Thursday, May 31, 12
41. IT’S COOL. BUT IS IT... PRACTICOOL?? Thursday, May 31, 12
42. WHY WOULDN’T I WANT ALL THAT? Thursday, May 31, 12
43. LET ME TELL YOU MY OWN ADVENTURE Thursday, May 31, 12
44. February 15, 2011 Thursday, May 31, 12
45. WHAT WE LEARNED WHAT WE LEARNED Thursday, May 31, 12
46. 1. IT’S HARD TO MANAGE DATA Thursday, May 31, 12
47. 2. VERY LITTLE STRUCTURE Thursday, May 31, 12
48. 3. IT MAKES PARTIAL SYNC STATE HARD Thursday, May 31, 12
49. 4. VERY GOOD FOR PROTOTYPING Thursday, May 31, 12
50. 5. BACKBONE ISN’T A GREAT WAY TO DEFINE YOUR DATA SCHEMA Thursday, May 31, 12
51. 6. BENEFITS FROM CODE SHARING WERE MINIMAL Thursday, May 31, 12
52. WHAT WE DID WITH WHAT WE LEARNED WHAT WE DID WITH WHAT WE LEARNED Thursday, May 31, 12
53. November 16, 2011 Thursday, May 31, 12
54. (UNRELEASED) AND BANG 2.0: 1. THERE IS NO BACKBONE ON THE SERVER —AT ALL 2. THERE IS ZERO SHARED CODE. Thursday, May 31, 12
55. THE FUNDAMENTAL FLAW WITH THESE APPROACHES THE FUNDAMENTAL FLAW WITH THESE APPROACHES Thursday, May 31, 12
56. CLIENT AND SERVER ARE MUCH DIFFERENT PROBLEMS AND SHOULD BE TREATED AS SUCH. Thursday, May 31, 12
57. SECURITY. SECURITY. SECURITY. Thursday, May 31, 12
58. SHARING CODE IS COOL. SHARING UNDERWEAR? NOT SO MUCH. Thursday, May 31, 12
59. FIRE HOSES ARE GREAT! ...FOR FIRES. Thursday, May 31, 12
60. WHEN YOU BUILD THIS WAY, YOU COUPLE YOUR DATA TO THE INTERFACE. Thursday, May 31, 12
61. SUPPORTING OTHER INTERFACES BECOMES MUCH HARDER Thursday, May 31, 12
62. SO WHAT ARE WE DOING NOW? SO WHAT ARE WE DOING NOW? Thursday, May 31, 12
63. WE’RE GOING TO TALK MORE ABOUT THIS AT KRTCONF 2012, BUT IN SHORT... Thursday, May 31, 12
64. ON THE SERVER: 1. BUILD AMAZING EVENTED APIS WITH LOTS OF TRANSPORTS 2. SEPARATE APP LOGIC FROM TRANSPORTS 3. GRANULAR EVENTING Thursday, May 31, 12
65. IN THE BROWSER: 1. BROWSER IS NOT *THE* CLIENT, IT’S *A* CLIENT 2. SMALL, NICELY PACKAGED COMPONENTS USING COMMONJS 3. NEVER DUPLICATE STATE 4. TRANSPORT AGNOSTIC Thursday, May 31, 12
66. REALTIME BACKBONE WISHLIST REALTIME BACKBONE WISHLIST Thursday, May 31, 12
67. CLEARER DISTINCTION BETWEEN CLIENT-SIDE (VIEW) STATE AND SYNCHRONIZED APP STATE Thursday, May 31, 12
68. UNBINDING VIEWS IS A PAIN Thursday, May 31, 12
69. Thank you! twitter: @HenrikJoreteg &yet: http://andyet.net And Bang: http://andbang.com Thursday, May 31, 12
70. 2012.KRTCONF.COM Thursday, May 31, 12