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

Real World Realtime with Backbone

Real World Realtime with Backbone

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

Henrik Joreteg

May 31, 2012
Tweet

More Decks by Henrik Joreteg

Other Decks in Programming

Transcript

  1. BACKBONE MAKES DOING THAT CLEANER AND MORE FUN BACKBONE MAKES

    DOING THAT CLEANER AND MORE FUN Thursday, May 31, 12
  2. AND WHO AMONG YOU HAS BEEN ASKED TO BUILD A

    REALTIME APP? Thursday, May 31, 12
  3. var Widgets = Backbone.Collection.extend({ url: ‘/widgets’ }); var widgets =

    new Widgets(); myCollection.fetch(); INSTEAD OF ASKING FOR DATA: Thursday, May 31, 12
  4. // BAM! EAT DATA!!! socket.on(‘someEvent’, function (payload) { ! //

    Umm... now what? ! doSomethingClever();! }); DATA JUST SHOWS UP Thursday, May 31, 12
  5. 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
  6. // 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
  7. THEY MAKE BIG PROMISES • CODE SHARING • SEAMLESS STATE

    HANDLING • AUTO-UPDATING TEMPLATES • AUTOMATIC CONFLICT RESOLUTION • “HOT” CODE DEPLOYS Thursday, May 31, 12
  8. WHAT WE DID WITH WHAT WE LEARNED WHAT WE DID

    WITH WHAT WE LEARNED Thursday, May 31, 12
  9. (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
  10. CLIENT AND SERVER ARE MUCH DIFFERENT PROBLEMS AND SHOULD BE

    TREATED AS SUCH. Thursday, May 31, 12
  11. WHEN YOU BUILD THIS WAY, YOU COUPLE YOUR DATA TO

    THE INTERFACE. Thursday, May 31, 12
  12. SO WHAT ARE WE DOING NOW? SO WHAT ARE WE

    DOING NOW? Thursday, May 31, 12
  13. WE’RE GOING TO TALK MORE ABOUT THIS AT KRTCONF 2012,

    BUT IN SHORT... Thursday, May 31, 12
  14. 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
  15. 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