Your SlideShare is downloading. ×
0
Building Backbone.js Apps for Scale
Building Backbone.js Apps for Scale
Building Backbone.js Apps for Scale
Building Backbone.js Apps for Scale
Building Backbone.js Apps for Scale
Building Backbone.js Apps for Scale
Building Backbone.js Apps for Scale
Building Backbone.js Apps for Scale
Building Backbone.js Apps for Scale
Building Backbone.js Apps for Scale
Building Backbone.js Apps for Scale
Building Backbone.js Apps for Scale
Building Backbone.js Apps for Scale
Building Backbone.js Apps for Scale
Building Backbone.js Apps for Scale
Building Backbone.js Apps for Scale
Building Backbone.js Apps for Scale
Building Backbone.js Apps for Scale
Building Backbone.js Apps for Scale
Building Backbone.js Apps for Scale
Building Backbone.js Apps for Scale
Building Backbone.js Apps for Scale
Building Backbone.js Apps for Scale
Building Backbone.js Apps for Scale
Building Backbone.js Apps for Scale
Building Backbone.js Apps for Scale
Building Backbone.js Apps for Scale
Building Backbone.js Apps for Scale
Building Backbone.js Apps for Scale
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Building Backbone.js Apps for Scale

6,711

Published on

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

No Downloads
Views
Total Views
6,711
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
55
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Building Backbone.js apps for scale Patrick Camacho Crashlytics 1 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  • 2. Wednesday, October 24, 12
  • 3. Wednesday, October 24, 12
  • 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. Our experience with Backbone.js First App Second App man-hours man-hours 5 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  • 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. Structure and flow 7 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  • 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. 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. 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. Backbone.js app structure App $(document).ready 11 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  • 12. Backbone.js app structure App Helpers Router Directors 12 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  • 13. Backbone.js app structure App Helpers Router Directors Backbone.History.start() 13 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  • 14. Backbone.js app structure App Helpers Router Directors Views Models 14 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  • 15. Backbone.js app structure App Helpers Router Directors Views Models HTML 15 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  • 16. Backbone.js app structure App Helpers Router Directors Views Models HTML 16 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  • 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. Keep code maintainable 18 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  • 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. 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. 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. 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. State management ‣ Backbone.StateManager ‣ Web apps are stateful ‣ Lose the conditional statements 23 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  • 24. Keep your code organized 24 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  • 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. Automation FTW 26 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  • 27. Save time, be standardized ‣ Compilers and watchers ‣ Scaffolding / generating ‣ Asset management 27 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12
  • 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. Thank You Patrick Camacho Crashlytics 29 CRASHLYTICS CONFIDENTIAL © 2012. All rights reservedWednesday, October 24, 12

×