The State of Realtime at &yet

Talk at RealtimeConf 2012.

Transcript

1. @HenrikJoreteg + surprise guest
   The State of Realtime at &yet
   as it pertains to And Bang 2.0
   Wednesday, October 24, 12
   

   View Slide

2. WHAT ARE
   WEB APPS
   REALLY!?
   Wednesday, October 24, 12
   

   View Slide

3. I’D LIKE TO
   SUGGEST THAT
   A WEB APP IS...
   Wednesday, October 24, 12
   

   View Slide

4. HOSTED SERVICE
   GOOD AT SOME
   TYPE OF DATA
   Wednesday, October 24, 12
   

   View Slide

5. WHAT IS GMAIL’S
   MAIN INTERFACE?
   Wednesday, October 24, 12
   

   View Slide

6. EMAIL -> GMAIL
   NOTES -> EVERNOTE
   TWEETS -> TWITTER
   CODE -> GITHUB
   Wednesday, October 24, 12
   

   View Slide

7. YOUR API
   BECOMES
   VERY CORE
   Wednesday, October 24, 12
   

   View Slide

8. SO WE BUILD
   RESTFUL APIS
   RIGHT?
   Wednesday, October 24, 12
   

   View Slide

9. LET’S DIGRESS...
   Wednesday, October 24, 12
   

   View Slide

10. SHORTCOMINGS
    OF REST+HTTP
    Wednesday, October 24, 12
    

    View Slide

11. CRUD IN REST:
    Create -> POST
    Read -> GET
    Update -> PUT
    Delete -> DELETE
    Wednesday, October 24, 12
    

    View Slide

12. POST /user/47?addToGroup=friends
    How do you link an existing
    user to an existing group?
    Wednesday, October 24, 12
    

    View Slide

13. PUT /user/47
    body:
    {
    addToGroup: “friends”
    }
    How do you link an existing
    user to an existing group?
    Wednesday, October 24, 12
    

    View Slide

14. Or are you actually editing the group?
    PUT /group/friends?addUser=47
    How do you link an existing
    user to an existing group?
    Wednesday, October 24, 12
    

    View Slide

15. WEB API != REST
    Wednesday, October 24, 12
    

    View Slide

16. WEB API ~= REST
    (for my fellow redis-lua scripters)
    Wednesday, October 24, 12
    

    View Slide

17. YOUR API IS A SET OF
    FUNCTIONALITY:
    addUserToGroup(47, “friends”)
    Wednesday, October 24, 12
    

    View Slide

18. WHAT DO WE
    REALLY WANT
    FROM AN API?
    Wednesday, October 24, 12
    

    View Slide

19. MULTIPLE
    WAYS OF GETTING
    DATA IN AND OUT
    Wednesday, October 24, 12
    

    View Slide

20. SIMPLE
    UNIFIED
    AUTHENTICATION
    Wednesday, October 24, 12
    

    View Slide

21. SIMPLE
    UNIFIED
    AUTHENTICATION
    (since that doesn’t exist we have to settle for OAuth 2.0)
    Wednesday, October 24, 12
    

    View Slide

22. THE OFFICIAL APP IS
    JUST ANOTHER CLIENT
    OF THE PUBLIC API
    Wednesday, October 24, 12
    

    View Slide

23. FULL DATA
    EVENTING
    Wednesday, October 24, 12
    

    View Slide

24. WHAT ABOUT
    REALTIME?
    Wednesday, October 24, 12
    

    View Slide

25. HTTP IS
    NOT PUSH
    Wednesday, October 24, 12
    

    View Slide

26. Wednesday, October 24, 12
    

    View Slide

27. WebSockets
    Wednesday, October 24, 12
    

    View Slide

28. WebSockets
    ServerSent Events
    Wednesday, October 24, 12
    

    View Slide

29. WebSockets
    ServerSent Events
    XMPP
    Wednesday, October 24, 12
    

    View Slide

30. WebSockets
    ServerSent Events
    XMPP
    Socket.io
    Wednesday, October 24, 12
    

    View Slide

31. WebSockets
    ServerSent Events
    XMPP
    Socket.io
    Long-Polling
    Wednesday, October 24, 12
    

    View Slide

32. WebSockets
    ServerSent Events
    XMPP
    Socket.io
    Long-Polling
    Animated GIF Streaming!?
    Wednesday, October 24, 12
    

    View Slide

33. DO WE THROW
    REST+HTTP OUT?
    Wednesday, October 24, 12
    

    View Slide

34. WebSockets
    ServerSent Events
    XMPP
    Socket.io
    Long-Polling
    Animated GIF Streaming!?
    Wednesday, October 24, 12
    

    View Slide

35. WebSockets
    ServerSent Events
    XMPP
    Socket.io
    Long-Polling
    Animated GIF Streaming!?
    HTTP
    Wednesday, October 24, 12
    

    View Slide

36. SEE ALL OF THESE FOR WHAT THEY ARE:
    TRANSPORTS
    Wednesday, October 24, 12
    

    View Slide

37. ADAPTERS/TRANSPORTS
    TO THE ONE TRUE API
    Wednesday, October 24, 12
    

    View Slide

38. OUR ATTEMPT
    AT BUILDING THIS...
    Wednesday, October 24, 12
    

    View Slide

39. WE BUILT A
    SPEC
    Wednesday, October 24, 12
    

    View Slide

40. WE BUILD
    EVERYTHING
    OFF THAT SPEC
    Wednesday, October 24, 12
    

    View Slide

41. (SPEC)
    Wednesday, October 24, 12
    

    View Slide

42. Wednesday, October 24, 12
    

    View Slide

43. HTTP REST
    Wednesday, October 24, 12
    

    View Slide

44. HTTP REST
    SOCKET.IO
    Wednesday, October 24, 12
    

    View Slide

45. HTTP REST
    SOCKET.IO
    ANDBANG.JS
    Wednesday, October 24, 12
    

    View Slide

46. HTTP REST
    SOCKET.IO
    ANDBANG.JS
    UNIT TESTS
    Wednesday, October 24, 12
    

    View Slide

47. HTTP REST
    SOCKET.IO
    ANDBANG.JS
    UNIT TESTS
    DOCS APP
    Wednesday, October 24, 12
    

    View Slide

48. ANY TIME DATA
    CHANGES AN
    EVENT IS PUBLISHED
    THAT DESCRIBES
    THE CHANGES
    Wednesday, October 24, 12
    

    View Slide

49. SOUNDS GREAT
    BUT HOW?!
    Wednesday, October 24, 12
    

    View Slide

50. {{ @fritzy }}
    Wednesday, October 24, 12
    

    View Slide

51. DIFFERENT
    TRANSPORTS
    DIFFERENT
    FEATURES
    Wednesday, October 24, 12
    

    View Slide

52. Event type: shipTask
    {
    "eventNumber": 4270,
    "action": {.. metadata about the event type ..},
    "category": "team",
    "instance": "1",
    "crud": [
    {
    "id": "338",
    "type": "update",
    "object": "task",
    "data": {.. changed attributes ..}
    },
    {
    "id": "2320",
    "type": "create",
    "object": "chat",
    "data": {.. attributes of chat message ..}
    }
    ]
    }
    Wednesday, October 24, 12
    

    View Slide

53. // full client synchronization in ~ 20 LOC
    api.on(‘*’, function (eventType, data) {
    if (data.crud) {
    data.crud.forEach(function (crudItem) {
    if (crudItem.type === ‘update’) {
    // look up our model in memory
    var model = app.getModel(crudItem.object, crudItem.id);
    // if we find it, set our data
    if (model) model.set(crudItem.data);
    } else if (crudItem.type === ‘create’) {
    // create it and add it
    } else if (crudItem.type === ‘delete’) {
    // find it and delete it if found
    }
    });
    }
    });
    Wednesday, October 24, 12
    

    View Slide

54. (DEMO)
    Wednesday, October 24, 12
    

    View Slide

55. WHAT DOES
    ALL THIS MEAN?
    Wednesday, October 24, 12
    

    View Slide

56. THANKS!
    @HenrikJoreteg, @fritzy, @andyet, @andbang on twitter
    Wednesday, October 24, 12
    

    View Slide