Building Rich Client Apps

Best practices and tips on building rich web clients in Rails, Backbone and XMPP, as we do it at Kicksend..

Transcript

1. Building
   Rich Client Apps
   @derrickko
   

   View Slide

2. Hi!
   @derrickko
   

   View Slide

3. Web Trends
   

   View Slide

4. User experience.
   

   View Slide

5. Real time.
   

   View Slide

6. Multiple clients.
   

   View Slide

7. Derby
   Meteor
   Firebase
   Ember.js
   Spine.js
   The Market
   

   View Slide

8. View Slide

9. What we use
   

   View Slide

10. Rails
    Backbone.js
    XMPP
    Coffeescript
    

    View Slide

11. Rails
    Backbone.js
    XMPP
    Coffeescript
    

    View Slide

12. Template
    View
    Router
    Model
    View
    Controller
    Controller
    Model
    -ish
    Backbone Rails
    

    View Slide

13. View Slide

14. Rails
    Backbone.js
    XMPP
    Coffeescript
    

    View Slide

15. Performant.
    Mature.
    

    View Slide

16. HTML5 SSE
    Pusher
    XMPP
    Options.
    

    View Slide

17. Rails
    Backbone.js
    XMPP
    Coffeescript
    

    View Slide

18. A productive hybrid.
    

    View Slide

19. Let’s start.
    

    View Slide

20. A list.
    

    View Slide

21. GET /lists/1
    {
    id: 1,
    name: “Friends”,
    members: {
    {
    name: “Pavel”
    ...
    }
    }
    }
    

    View Slide

22. Best practices
    still apply.
    

    View Slide

23. Thin controllers
    

    View Slide

24. RESTful routes.
    

    View Slide

25. Have a presentation layer.
    Tip
    

    View Slide

26. Don’t use to_json.
    

    View Slide

27. It’s like HTML in models.
    

    View Slide

28. Jbuilder
    RABL
    

    View Slide

29. View Slide

30. http://kicksend.com/#/lists/1/edit
    

    View Slide

31. View Slide

32. View Slide

33. View Slide

34. model = new KS.Models.List(id: 1)
    model.fetch() # GET api/lists/1
    model.save() # PUT api/lists/1
    model.destroy() # DELETE api/lists/1
    

    View Slide

35. View Slide

36. View Slide

37. What’s a collection?
    

    View Slide

38. View Slide

39. View Slide

40. lists = new KS.Collections.List()
    lists.fetch() # GET api/lists/
    lists.create() # POST api/lists/
    

    View Slide

41. View Slide

42. View Slide

43. Keep views atomic.
    Tip
    

    View Slide

44. View Slide

45. Load interfaces progressively.
    Tip
    

    View Slide

46. View Slide

47. View Slide

48. GET api/lists/1 - 200 OK
    

    View Slide

49. View Slide

50. View Slide

51. GET api/lists/1/members - 200 OK
    GET api/lists/possible_members - 200 OK
    

    View Slide

52. View Slide

53. View Slide

54. Best practices
    Presentation layer
    Recap
    

    View Slide

55. Subclass Backbone
    Atomic views
    Progressive rendering
    Recap
    

    View Slide

56. Main Container
    

    View Slide

57. View Slide

58. Use a view manager.
    Tip
    

    View Slide

59. View Slide

60. View Slide

61. View Slide

62. https://gist.github.com/2991554
    

    View Slide

63. Performance.
    

    View Slide

64. View Slide

65. GET api/deliveries
    

    View Slide

66. 100ms response time.
    

    View Slide

67. Cache aggressively.
    Tip
    

    View Slide

68. Action caching.
    

    View Slide

69. View Slide

70. View Slide

71. View Slide

72. https://gist.github.com/2990581
    

    View Slide

73. View caching.
    

    View Slide

74. View Slide

75. View Slide

76. View Slide

77. View Slide

78. View Slide

79. Cached
    

    View Slide

80. Cached
    

    View Slide

81. View Slide

82. Photo
    Photo
    Sender
    Sender
    Action cached
    View cached
    GET api/deliveries
    Delivery
    

    View Slide

83. Photo
    Photo
    Sender
    Sender
    Delivery
    belongs_to :delivery,
    :touch => true
    

    View Slide

84. View Slide

85. Perceived
    performance.
    

    View Slide

86. Assume success.
    Tip
    

    View Slide

87. View Slide

88. View Slide

89. View Slide

90. View Slide

91. View Slide

92. Be greedy.
    Tip
    

    View Slide

93. View Slide

94. 1. GET /api/lists/2 list.fetch()
    

    View Slide

95. 2. GET /api/lists/ KS.lists.fetch()
    

    View Slide

96. View Slide

97. Keep data in sync.
    Tip
    

    View Slide

98. 1. GET /api/lists/2
    2. GET /api/lists
    Local
    Global
    

    View Slide

99. View Slide

100. Server performance
     Perceived performance
     Recap
     

     View Slide

101. Real time.
     

     View Slide

102. eJabberd
     

     View Slide

103. eJabberd
     Strophe.js
     Backbone
     

     View Slide

104. eJabberd
     Strophe.js
     Backbone
     BOSH
     

     View Slide

105. Pre-auth BOSH streams.
     Tip
     

     View Slide

106. eJabberd
     Rails RubyBOSH auth
     

     View Slide

107. Backbone
     eJabberd
     Rails RubyBOSH auth
     HTTP
     

     View Slide

108. eJabberd
     Backbone Strophe.js
     HTTP
     Rails RubyBOSH auth
     BOSH
     

     View Slide

109. github.com/skyfallsin/ruby_bosh
     

     View Slide

110. Use a real time handler.
     Tip
     

     View Slide

111. strophe.js
     xml2json
     Toolbox
     

     View Slide

112. View Slide

113. Pre-auth BOSH streams
     Real time handler
     Recap
     

     View Slide

114. Moving forward.
     

     View Slide

115. Slimmed down server.
     

     View Slide

116. and CDNs
     

     View Slide

117. require.js
     

     View Slide

118. Don’t over
     engineer.
     

     View Slide

119. Thanks!
     @derrickko
     

     View Slide