Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Building Backbone.js apps for scale                            Patrick Camacho                               Crashlytics  ...
Wednesday, October 24, 12
Wednesday, October 24, 12
Our experience with Backbone.js                                            +----------------------+-------+-------+-------...
Our experience with Backbone.js                            First App                     Second App                       ...
Our experience with Backbone.js                            3000                            2250                           ...
Structure and flow  7                              CRASHLYTICS CONFIDENTIAL   © 2012. All rights reservedWednesday, Octobe...
Why Backbone.js?      ‣   Pros                              ‣   Cons          • MV* components                       • A t...
What does Backbone.js give us?                                  Model                                                     ...
Backbone.js flavored MVP      ‣   Our patterns                                              Views           •   One router...
Backbone.js app structure                                  App                            $(document).ready 11            ...
Backbone.js app structure                             App                          Helpers                            Rout...
Backbone.js app structure                             App                          Helpers                            Rout...
Backbone.js app structure                             App                          Helpers                            Rout...
Backbone.js app structure                             App                          Helpers                            Rout...
Backbone.js app structure                             App                          Helpers                            Rout...
Backbone.js app structure                                               App                          Helpers              ...
Keep code maintainable 18                                CRASHLYTICS CONFIDENTIAL   © 2012. All rights reservedWednesday, ...
Test everything   it instantiates the application if a valid name is passed in, ->     spyOn CLS.Apps, Crashlytics     CLS...
Use prototypes and chaining                      var current_page;                      $(".next").click(function () {    ...
Use prototypes and chaining                            class Navigation extends Backbone.View                             ...
Composite architecture                                                            Layout   ‣ Backbone.Marionette          ...
State management      ‣ Backbone.StateManager      ‣ Web apps are stateful      ‣ Lose the conditional statements 23      ...
Keep your code organized 24                                 CRASHLYTICS CONFIDENTIAL   © 2012. All rights reservedWednesda...
Namespace and file structure      ‣ One Object per file      ‣ File names line up with Object names      ‣ Directory struc...
Automation FTW 26                             CRASHLYTICS CONFIDENTIAL   © 2012. All rights reservedWednesday, October 24,...
Save time, be standardized                            ‣ Compilers and watchers                            ‣ Scaffolding / g...
Coming soon...      ‣ Command line interface      ‣ Scalable development SOPs      ‣ Application flow / architecture      ...
Thank You                              Patrick Camacho                                 Crashlytics 29                     ...
Nächste SlideShare
Wird geladen in …5
×

Building Backbone.js Apps for Scale

7.501 Aufrufe

Veröffentlicht am

  • DOWNLOAD FULL eBOOK INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc eBook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookeBOOK Crime, eeBOOK Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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

×