Building Backbone.js Apps for Scale

7,218 views
7,019 views

Published on

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,218
On SlideShare
0
From Embeds
0
Number of Embeds
4,366
Actions
Shares
0
Downloads
63
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Building Backbone.js Apps for Scale

  1. 1. Building Backbone.js apps for scale Patrick Camacho Crashlytics 1 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  2. 2. Wednesday, October 24, 12
  3. 3. Wednesday, October 24, 12
  4. 4. Our experience with Backbone.js +----------------------+-------+-------+---------+---------+-----+-------+ | Name | Lines | LOC | Classes | Methods | M/C | LOC/M | +----------------------+-------+-------+---------+---------+-----+-------+ | Apps | 232 | 143 | 2 | 16 | 8 | 9 | | Controllers | 885 | 644 | 10 | 57 | 6 | 11 | | Helpers | 407 | 280 | 13 | 45 | 3 | 6 | | Models | 739 | 492 | 23 | 192 | 8 | 3 | Large Scale | Collections | Routers | Views | | | 503 | 239 | 6052 | 385 | 171 | 4820 | 27 | 3 | 201 | 96 | 8 | 767 | 4 | 3 | 3 | 4 | 21 | 6 | Web Apps | Backbone Views | 346 | 287 | 14 | 29 | 2 | 10 | | Item Views | 3887 | 3124 | 124 | 456 | 4 | 7 | | Collection Views | 76 | 64 | 5 | 16 | 3 | 4 | +----------------------+-------+-------+---------+---------+-----+-------+ | Composite Views | 745 | 563 | 18 | 99 | 6 | 6 | | Name | Layouts | Lines 965 | LOC || Classes 164Methods | | | | 762 39 | | | 4 | 5 M/C | LOC/M | +----------------------+-------+-------+---------+---------+-----+-------+ | Regions | 28 | 20 | 1 | 3 | 3 | 7 | | Total +----------------------+-------+-------+---------+---------+-----+-------+ 4 | | 10746 | 8313 | 278 | 1181 | 6 | +----------------------+-------+-------+---------+---------+-----+-------+ | CoffeeScript Total | 9033 | 6918 | 278 | 1181 | 4 | 6 | +----------------------+-------+-------+---------+---------+-----+-------+ | Templates | 1713 | 1413 | -- | -- | -- | -- | +----------------------+-------+-------+---------+---------+-----+-------+ | Total | 10746 | 8313 | 278 | 1181 | 4 | 6 | +----------------------+-------+-------+---------+---------+-----+-------+ 4 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  5. 5. Our experience with Backbone.js First App Second App man-hours man-hours 5 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  6. 6. Our experience with Backbone.js 3000 2250 92% Faster 1500 750 What changed? 0 6 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  7. 7. Structure and flow 7 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  8. 8. Why Backbone.js? ‣ Pros ‣ Cons • MV* components • A toolset, not a framework • Built for RESTful APIs • Hard to grow teams around • Simple to pick up and use • No established patterns 8 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  9. 9. What does Backbone.js give us? Model Views Backbone.Model, Backbone.Views Backbone.Collection Routing Events Backbone.Router, Backbone.Events Backbone.History MV* Building Blocks (to use as you see fit) not scalable 9 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  10. 10. Backbone.js flavored MVP ‣ Our patterns Views • One router, no logic HTML • Backbone Models / Collections • Views (HTML) Presenters • Presenters (Backbone.View) Backbone.View • Directors (App State Managers) Directors App State Managers 10 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  11. 11. Backbone.js app structure App $(document).ready 11 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  12. 12. Backbone.js app structure App Helpers Router Directors 12 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  13. 13. Backbone.js app structure App Helpers Router Directors Backbone.History.start() 13 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  14. 14. Backbone.js app structure App Helpers Router Directors Views Models 14 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  15. 15. Backbone.js app structure App Helpers Router Directors Views Models HTML 15 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  16. 16. Backbone.js app structure App Helpers Router Directors Views Models HTML 16 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  17. 17. Backbone.js app structure App Helpers Router Directors Browser History Navigation Views Models HTML 17 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  18. 18. Keep code maintainable 18 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  19. 19. Test everything it instantiates the application if a valid name is passed in, -> spyOn CLS.Apps, Crashlytics CLS.init Crashlytics expect(CLS.Apps.Crashlytics).toHaveBeenCalled() ‣ Clarify the thought ‣ Minimize risks ‣ Document functionality 19 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  20. 20. Use prototypes and chaining var current_page; $(".next").click(function () { clear_list(); current_page = current_page + 1; update_page(); $("#previous").removeClass(disabled); var issues = $(<div class="issue-list" />); ... $(".prev").click(function () { if(current_page != 1){ current_page = current_page - 1; update_page(); if(current_page == 1){ $("#previous").addClass(disabled); } var issues = $(<div class="issue-list" />); ... “Spaghetti” code 20 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  21. 21. Use prototypes and chaining class Navigation extends Backbone.View tagName : nav id : navigation events : click .previous : previous click .next : next initialize : (options = {}) -> @currentPage = options.currentPage or 1 @renderIssues() ... class Issues extends Backbone.View tagName : ul id : issues ... OOP 21 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  22. 22. Composite architecture Layout ‣ Backbone.Marionette Region Region ‣ Building blocks ‣ Limited dependencies Item Collection Item Item 22 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  23. 23. State management ‣ Backbone.StateManager ‣ Web apps are stateful ‣ Lose the conditional statements 23 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  24. 24. Keep your code organized 24 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  25. 25. Namespace and file structure ‣ One Object per file ‣ File names line up with Object names ‣ Directory structure maps to namespace models organization.coffee class CLS.Models.Organization 25 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  26. 26. Automation FTW 26 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  27. 27. Save time, be standardized ‣ Compilers and watchers ‣ Scaffolding / generating ‣ Asset management 27 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  28. 28. Coming soon... ‣ Command line interface ‣ Scalable development SOPs ‣ Application flow / architecture ‣ Automated test generation ‣ Clear file and code organization 28 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  29. 29. Thank You Patrick Camacho Crashlytics 29 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12

×