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
2. Hi! @derrickko
3. Web Trends
4. User experience.
5. Real time.
6. Multiple clients.
7. Derby Meteor Firebase Ember.js Spine.js The Market
9. What we use
10. Rails Backbone.js XMPP Coffeescript
11. Rails Backbone.js XMPP Coffeescript
12. Template View Router Model View Controller Controller Model -ish Backbone Rails
14. Rails Backbone.js XMPP Coffeescript
15. Performant. Mature.
16. HTML5 SSE Pusher XMPP Options.
17. Rails Backbone.js XMPP Coffeescript
18. A productive hybrid.
19. Let’s start.
20. A list.
21. GET /lists/1 { id: 1, name: “Friends”, members: { { name: “Pavel” ... } } }
22. Best practices still apply.
23. Thin controllers
24. RESTful routes.
25. Have a presentation layer. Tip
26. Don’t use to_json.
27. It’s like HTML in models.
28. Jbuilder RABL
30. http://kicksend.com/#/lists/1/edit
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
37. What’s a collection?
40. lists = new KS.Collections.List() lists.fetch() # GET api/lists/ lists.create() # POST api/lists/
43. Keep views atomic. Tip
45. Load interfaces progressively. Tip
48. GET api/lists/1 - 200 OK
51. GET api/lists/1/members - 200 OK GET api/lists/possible_members - 200 OK
54. Best practices Presentation layer Recap
55. Subclass Backbone Atomic views Progressive rendering Recap
56. Main Container
58. Use a view manager. Tip
62. https://gist.github.com/2991554
63. Performance.
65. GET api/deliveries
66. 100ms response time.
67. Cache aggressively. Tip
68. Action caching.
72. https://gist.github.com/2990581
73. View caching.
79. Cached
80. Cached
82. Photo Photo Sender Sender Action cached View cached GET api/deliveries Delivery
83. Photo Photo Sender Sender Delivery belongs_to :delivery, :touch => true
85. Perceived performance.
86. Assume success. Tip
92. Be greedy. Tip
94. 1. GET /api/lists/2 list.fetch()
95. 2. GET /api/lists/ KS.lists.fetch()
97. Keep data in sync. Tip
98. 1. GET /api/lists/2 2. GET /api/lists Local Global
100. Server performance Perceived performance Recap
101. Real time.
102. eJabberd
103. eJabberd Strophe.js Backbone
104. eJabberd Strophe.js Backbone BOSH
105. Pre-auth BOSH streams. Tip
106. eJabberd Rails RubyBOSH auth
107. Backbone eJabberd Rails RubyBOSH auth HTTP
108. eJabberd Backbone Strophe.js HTTP Rails RubyBOSH auth BOSH
109. github.com/skyfallsin/ruby_bosh
110. Use a real time handler. Tip
111. strophe.js xml2json Toolbox
113. Pre-auth BOSH streams Real time handler Recap
114. Moving forward.
115. Slimmed down server.
116. and CDNs
117. require.js
118. Don’t over engineer.
119. Thanks! @derrickko