Slide 1

Slide 1 text

REAL WORLD REALTIME WITH BACKBONE @HenrikJoreteg Thursday, May 31, 12

Slide 2

Slide 2 text

WHY ARE YOU HERE? Thursday, May 31, 12

Slide 3

Slide 3 text

BECAUSE YOU BUILD COMPLEX STUFF WITH JAVASCRIPT Thursday, May 31, 12

Slide 4

Slide 4 text

BACKBONE MAKES DOING THAT CLEANER AND MORE FUN BACKBONE MAKES DOING THAT CLEANER AND MORE FUN Thursday, May 31, 12

Slide 5

Slide 5 text

A SHOW OF HANDS, PLEASE A SHOW OF HANDS, PLEASE Thursday, May 31, 12

Slide 6

Slide 6 text

WHO AMONG YOU HAS BEEN ASKED TO BUILD A SINGLE-PAGE APP? Thursday, May 31, 12

Slide 7

Slide 7 text

AND WHO AMONG YOU HAS BEEN ASKED TO BUILD A REALTIME APP? Thursday, May 31, 12

Slide 8

Slide 8 text

YOU WILL YOU WILL Thursday, May 31, 12

Slide 9

Slide 9 text

AT WE’VE BUILT PILES OF REALTIME APPS. Thursday, May 31, 12

Slide 10

Slide 10 text

OCTOBER 23-24 IN PORTLAND Thursday, May 31, 12

Slide 11

Slide 11 text

WE’VE DONE IT WRONG MORE WAYS THAN YOU HAVE TIME TO HEAR. Thursday, May 31, 12

Slide 12

Slide 12 text

WHAT DOES “REALTIME” EVEN MEAN? WHAT DOES “REALTIME” EVEN MEAN? Thursday, May 31, 12

Slide 13

Slide 13 text

PUSH NOT POLL Thursday, May 31, 12

Slide 14

Slide 14 text

var Widgets = Backbone.Collection.extend({ url: ‘/widgets’ }); var widgets = new Widgets(); myCollection.fetch(); INSTEAD OF ASKING FOR DATA: Thursday, May 31, 12

Slide 15

Slide 15 text

// BAM! EAT DATA!!! socket.on(‘someEvent’, function (payload) { ! // Umm... now what? ! doSomethingClever();! }); DATA JUST SHOWS UP Thursday, May 31, 12

Slide 16

Slide 16 text

BUT Thursday, May 31, 12

Slide 17

Slide 17 text

WHAT’S BACKBONE GOT TO DO WITH IT? Thursday, May 31, 12

Slide 18

Slide 18 text

THE FIRST TIME I USED BACKBONE WAS FOR A REALTIME APP. Thursday, May 31, 12

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

// 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

Slide 21

Slide 21 text

Thursday, May 31, 12

Slide 22

Slide 22 text

I CANNOT EMPHASIZE THIS ENOUGH: Thursday, May 31, 12

Slide 23

Slide 23 text

STATE DUPLICATION IS EVIL Thursday, May 31, 12

Slide 24

Slide 24 text

Thursday, May 31, 12

Slide 25

Slide 25 text

TRANSPORTS NO LONGER MATTER Thursday, May 31, 12

Slide 26

Slide 26 text

REST, XMPP, WEBSOCKET, SOME HANGING CALLBACK, SERVER-SENT EVENTS, ETC Thursday, May 31, 12

Slide 27

Slide 27 text

EVEN USER INTERACTION IS JUST ANOTHER THING MODIFYING YOUR DATA. Thursday, May 31, 12

Slide 28

Slide 28 text

October 29, 2010 Thursday, May 31, 12

Slide 29

Slide 29 text

IF YOU’VE BUILT YOUR BACKBONE CORRECTLY, ADDING REALTIME ISN’T REALLY THAT DIFFERENT. Thursday, May 31, 12

Slide 30

Slide 30 text

BONUS LESSON: REFACTOR EARLY, REFACTOR OFTEN, REFACTOR AWESOME Thursday, May 31, 12

Slide 31

Slide 31 text

SO WHAT *IS* DIFFERENT? SO WHAT *IS* DIFFERENT? Thursday, May 31, 12

Slide 32

Slide 32 text

ZERO CONTROL OF TIMING Thursday, May 31, 12

Slide 33

Slide 33 text

IRRELEVANT EVENTS Thursday, May 31, 12

Slide 34

Slide 34 text

MORE UI TO MANAGE Thursday, May 31, 12

Slide 35

Slide 35 text

NO LINK BETWEEN MODELS AND EVENTS Thursday, May 31, 12

Slide 36

Slide 36 text

I BET I KNOW WHAT YOU’RE THINKING Thursday, May 31, 12

Slide 37

Slide 37 text

WHY NOT USE A NEW COOL REALTIME FRAMEWORK? SOCKETSTREAM METEOR.JS DERBY.JS CAPSULE.JS Thursday, May 31, 12

Slide 38

Slide 38 text

THEY MAKE BIG PROMISES • CODE SHARING • SEAMLESS STATE HANDLING • AUTO-UPDATING TEMPLATES • AUTOMATIC CONFLICT RESOLUTION • “HOT” CODE DEPLOYS Thursday, May 31, 12

Slide 39

Slide 39 text

IT’S COOL. Thursday, May 31, 12

Slide 40

Slide 40 text

IT’S COOL. BUT IS IT... Thursday, May 31, 12

Slide 41

Slide 41 text

IT’S COOL. BUT IS IT... PRACTICOOL?? Thursday, May 31, 12

Slide 42

Slide 42 text

WHY WOULDN’T I WANT ALL THAT? Thursday, May 31, 12

Slide 43

Slide 43 text

LET ME TELL YOU MY OWN ADVENTURE Thursday, May 31, 12

Slide 44

Slide 44 text

February 15, 2011 Thursday, May 31, 12

Slide 45

Slide 45 text

WHAT WE LEARNED WHAT WE LEARNED Thursday, May 31, 12

Slide 46

Slide 46 text

1. IT’S HARD TO MANAGE DATA Thursday, May 31, 12

Slide 47

Slide 47 text

2. VERY LITTLE STRUCTURE Thursday, May 31, 12

Slide 48

Slide 48 text

3. IT MAKES PARTIAL SYNC STATE HARD Thursday, May 31, 12

Slide 49

Slide 49 text

4. VERY GOOD FOR PROTOTYPING Thursday, May 31, 12

Slide 50

Slide 50 text

5. BACKBONE ISN’T A GREAT WAY TO DEFINE YOUR DATA SCHEMA Thursday, May 31, 12

Slide 51

Slide 51 text

6. BENEFITS FROM CODE SHARING WERE MINIMAL Thursday, May 31, 12

Slide 52

Slide 52 text

WHAT WE DID WITH WHAT WE LEARNED WHAT WE DID WITH WHAT WE LEARNED Thursday, May 31, 12

Slide 53

Slide 53 text

November 16, 2011 Thursday, May 31, 12

Slide 54

Slide 54 text

(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

Slide 55

Slide 55 text

THE FUNDAMENTAL FLAW WITH THESE APPROACHES THE FUNDAMENTAL FLAW WITH THESE APPROACHES Thursday, May 31, 12

Slide 56

Slide 56 text

CLIENT AND SERVER ARE MUCH DIFFERENT PROBLEMS AND SHOULD BE TREATED AS SUCH. Thursday, May 31, 12

Slide 57

Slide 57 text

SECURITY. SECURITY. SECURITY. Thursday, May 31, 12

Slide 58

Slide 58 text

SHARING CODE IS COOL. SHARING UNDERWEAR? NOT SO MUCH. Thursday, May 31, 12

Slide 59

Slide 59 text

FIRE HOSES ARE GREAT! ...FOR FIRES. Thursday, May 31, 12

Slide 60

Slide 60 text

WHEN YOU BUILD THIS WAY, YOU COUPLE YOUR DATA TO THE INTERFACE. Thursday, May 31, 12

Slide 61

Slide 61 text

SUPPORTING OTHER INTERFACES BECOMES MUCH HARDER Thursday, May 31, 12

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

WE’RE GOING TO TALK MORE ABOUT THIS AT KRTCONF 2012, BUT IN SHORT... Thursday, May 31, 12

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

REALTIME BACKBONE WISHLIST REALTIME BACKBONE WISHLIST Thursday, May 31, 12

Slide 67

Slide 67 text

CLEARER DISTINCTION BETWEEN CLIENT-SIDE (VIEW) STATE AND SYNCHRONIZED APP STATE Thursday, May 31, 12

Slide 68

Slide 68 text

UNBINDING VIEWS IS A PAIN Thursday, May 31, 12

Slide 69

Slide 69 text

Thank you! twitter: @HenrikJoreteg &yet: http://andyet.net And Bang: http://andbang.com Thursday, May 31, 12

Slide 70

Slide 70 text

2012.KRTCONF.COM Thursday, May 31, 12