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

Building Rich Client Apps

0cdeab92f2dd86564d23f991a41adde2?s=47 dk
August 11, 2012

Building Rich Client Apps

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

0cdeab92f2dd86564d23f991a41adde2?s=128

dk

August 11, 2012
Tweet

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

  8. None
  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
  13. None
  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

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

  31. None
  32. None
  33. None
  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
  35. None
  36. None
  37. What’s a collection?

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

    POST api/lists/
  41. None
  42. None
  43. Keep views atomic. Tip

  44. None
  45. Load interfaces progressively. Tip

  46. None
  47. None
  48. GET api/lists/1 - 200 OK

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

  52. None
  53. None
  54. Best practices Presentation layer Recap

  55. Subclass Backbone Atomic views Progressive rendering Recap

  56. Main Container

  57. None
  58. Use a view manager. Tip

  59. None
  60. None
  61. None
  62. https://gist.github.com/2991554

  63. Performance.

  64. None
  65. GET api/deliveries

  66. 100ms response time.

  67. Cache aggressively. Tip

  68. Action caching.

  69. None
  70. None
  71. None
  72. https://gist.github.com/2990581

  73. View caching.

  74. None
  75. None
  76. None
  77. None
  78. None
  79. Cached

  80. Cached

  81. None
  82. Photo Photo Sender Sender Action cached View cached GET api/deliveries

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

  84. None
  85. Perceived performance.

  86. Assume success. Tip

  87. None
  88. None
  89. None
  90. None
  91. None
  92. Be greedy. Tip

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

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

  96. None
  97. Keep data in sync. Tip

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

  99. None
  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

  112. None
  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