Building Backbone.js Apps for Scale
-
Upload
crashlytics -
Category
Documents
-
view
6.672 -
download
0
Transcript of Building Backbone.js Apps for Scale
![Page 1: Building Backbone.js Apps for Scale](https://reader036.fdocuments.us/reader036/viewer/2022062418/554bcd26b4c9058f6c8b4846/html5/thumbnails/1.jpg)
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Building Backbone.js apps for scale
Patrick CamachoCrashlytics
1
Wednesday, October 24, 12
![Page 2: Building Backbone.js Apps for Scale](https://reader036.fdocuments.us/reader036/viewer/2022062418/554bcd26b4c9058f6c8b4846/html5/thumbnails/2.jpg)
Wednesday, October 24, 12
![Page 3: Building Backbone.js Apps for Scale](https://reader036.fdocuments.us/reader036/viewer/2022062418/554bcd26b4c9058f6c8b4846/html5/thumbnails/3.jpg)
Wednesday, October 24, 12
![Page 4: Building Backbone.js Apps for Scale](https://reader036.fdocuments.us/reader036/viewer/2022062418/554bcd26b4c9058f6c8b4846/html5/thumbnails/4.jpg)
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Our experience with Backbone.js
4
+----------------------+-------+-------+---------+---------+-----+-------+
| 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 |
| Collections | 503 | 385 | 27 | 96 | 4 | 4 |
| Routers | 239 | 171 | 3 | 8 | 3 | 21 |
| Views | 6052 | 4820 | 201 | 767 | 3 | 6 |
| 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 |
| Layouts | 965 | 762 | 39 | 164 | 4 | 5 |
| Regions | 28 | 20 | 1 | 3 | 3 | 7 |
+----------------------+-------+-------+---------+---------+-----+-------+
| CoffeeScript Total | 9033 | 6918 | 278 | 1181 | 4 | 6 |
+----------------------+-------+-------+---------+---------+-----+-------+
| Templates | 1713 | 1413 | -- | -- | -- | -- |
+----------------------+-------+-------+---------+---------+-----+-------+
| Total | 10746 | 8313 | 278 | 1181 | 4 | 6 |
+----------------------+-------+-------+---------+---------+-----+-------+
Large Scale Web Apps
+----------------------+-------+-------+---------+---------+-----+-------+| Name | Lines | LOC | Classes | Methods | M/C | LOC/M |+----------------------+-------+-------+---------+---------+-----+-------+| Total | 10746 | 8313 | 278 | 1181 | 4 | 6 |+----------------------+-------+-------+---------+---------+-----+-------+
Wednesday, October 24, 12
![Page 5: Building Backbone.js Apps for Scale](https://reader036.fdocuments.us/reader036/viewer/2022062418/554bcd26b4c9058f6c8b4846/html5/thumbnails/5.jpg)
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Our experience with Backbone.js
5
man-hours
First App
man-hours
Second App
Wednesday, October 24, 12
![Page 6: Building Backbone.js Apps for Scale](https://reader036.fdocuments.us/reader036/viewer/2022062418/554bcd26b4c9058f6c8b4846/html5/thumbnails/6.jpg)
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Our experience with Backbone.js
6
0
750
1500
2250
3000
92%Faster
What changed?
Wednesday, October 24, 12
![Page 7: Building Backbone.js Apps for Scale](https://reader036.fdocuments.us/reader036/viewer/2022062418/554bcd26b4c9058f6c8b4846/html5/thumbnails/7.jpg)
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL7
Structure and !ow
Wednesday, October 24, 12
![Page 8: Building Backbone.js Apps for Scale](https://reader036.fdocuments.us/reader036/viewer/2022062418/554bcd26b4c9058f6c8b4846/html5/thumbnails/8.jpg)
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Why Backbone.js?
‣ Pros• MV* components• Built for RESTful APIs• Simple to pick up and use
8
‣ Cons• A toolset, not a framework• Hard to grow teams around• No established patterns
Wednesday, October 24, 12
![Page 9: Building Backbone.js Apps for Scale](https://reader036.fdocuments.us/reader036/viewer/2022062418/554bcd26b4c9058f6c8b4846/html5/thumbnails/9.jpg)
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
What does Backbone.js give us?
9
ModelBackbone.Model,
Backbone.Collection
RoutingBackbone.Router, Backbone.History
ViewsBackbone.Views
MV* Building Blocks(to use as you see !t)
not scalable
EventsBackbone.Events
Wednesday, October 24, 12
![Page 10: Building Backbone.js Apps for Scale](https://reader036.fdocuments.us/reader036/viewer/2022062418/554bcd26b4c9058f6c8b4846/html5/thumbnails/10.jpg)
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Backbone.js !avored MVP
‣ Our patterns• One router, no logic• Backbone Models / Collections
10
DirectorsApp State Managers
PresentersBackbone.View
ViewsHTML
• Directors (App State Managers)• Presenters (Backbone.View)• Views (HTML)
Wednesday, October 24, 12
![Page 11: Building Backbone.js Apps for Scale](https://reader036.fdocuments.us/reader036/viewer/2022062418/554bcd26b4c9058f6c8b4846/html5/thumbnails/11.jpg)
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Backbone.js app structure
11
$(document).ready
App
Wednesday, October 24, 12
![Page 12: Building Backbone.js Apps for Scale](https://reader036.fdocuments.us/reader036/viewer/2022062418/554bcd26b4c9058f6c8b4846/html5/thumbnails/12.jpg)
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Backbone.js app structure
12
App
Router Directors
Helpers
Wednesday, October 24, 12
![Page 13: Building Backbone.js Apps for Scale](https://reader036.fdocuments.us/reader036/viewer/2022062418/554bcd26b4c9058f6c8b4846/html5/thumbnails/13.jpg)
Router Directors
Helpers
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Backbone.js app structure
13
App
Backbone.History.start()
Wednesday, October 24, 12
![Page 14: Building Backbone.js Apps for Scale](https://reader036.fdocuments.us/reader036/viewer/2022062418/554bcd26b4c9058f6c8b4846/html5/thumbnails/14.jpg)
DirectorsRouter
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Backbone.js app structure
14
Views
HelpersApp
Models
Wednesday, October 24, 12
![Page 15: Building Backbone.js Apps for Scale](https://reader036.fdocuments.us/reader036/viewer/2022062418/554bcd26b4c9058f6c8b4846/html5/thumbnails/15.jpg)
Views
HTML
Router Directors
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Backbone.js app structure
15
HelpersApp
Models
Wednesday, October 24, 12
![Page 16: Building Backbone.js Apps for Scale](https://reader036.fdocuments.us/reader036/viewer/2022062418/554bcd26b4c9058f6c8b4846/html5/thumbnails/16.jpg)
HTML
Views
DirectorsRouter
Models
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Backbone.js app structure
16
HelpersApp
Wednesday, October 24, 12
![Page 17: Building Backbone.js Apps for Scale](https://reader036.fdocuments.us/reader036/viewer/2022062418/554bcd26b4c9058f6c8b4846/html5/thumbnails/17.jpg)
Views
HTML
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Backbone.js app structure
17
Router
Models
Directors
HelpersApp
Browser History Navigation
Wednesday, October 24, 12
![Page 18: Building Backbone.js Apps for Scale](https://reader036.fdocuments.us/reader036/viewer/2022062418/554bcd26b4c9058f6c8b4846/html5/thumbnails/18.jpg)
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Keep code maintainable
18
Wednesday, October 24, 12
![Page 19: Building Backbone.js Apps for Scale](https://reader036.fdocuments.us/reader036/viewer/2022062418/554bcd26b4c9058f6c8b4846/html5/thumbnails/19.jpg)
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Test everything
‣ Clarify the thought‣ Minimize risks‣ Document functionality
19
it 'instantiates the application if a valid name is passed in', ->spyOn CLS.Apps, 'Crashlytics'CLS.init 'Crashlytics'expect(CLS.Apps.Crashlytics).toHaveBeenCalled()
Wednesday, October 24, 12
![Page 20: Building Backbone.js Apps for Scale](https://reader036.fdocuments.us/reader036/viewer/2022062418/554bcd26b4c9058f6c8b4846/html5/thumbnails/20.jpg)
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" />');...
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Use prototypes and chaining
20
“Spaghetti” code
Wednesday, October 24, 12
![Page 21: Building Backbone.js Apps for Scale](https://reader036.fdocuments.us/reader036/viewer/2022062418/554bcd26b4c9058f6c8b4846/html5/thumbnails/21.jpg)
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Use prototypes and chaining
21
class Navigation extends Backbone.ViewtagName : 'nav'id : 'navigation'events : 'click .previous' : 'previous''click .next' : 'next'
initialize : (options = {}) ->@currentPage = options.currentPage or 1@renderIssues()
...
class Issues extends Backbone.ViewtagName : 'ul'id : 'issues'
...
OOP
Wednesday, October 24, 12
![Page 22: Building Backbone.js Apps for Scale](https://reader036.fdocuments.us/reader036/viewer/2022062418/554bcd26b4c9058f6c8b4846/html5/thumbnails/22.jpg)
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Composite architecture
22
Layout
Region
CollectionItem
Region
Item Item
‣ Backbone.Marionette‣ Building blocks‣ Limited dependencies
Wednesday, October 24, 12
![Page 23: Building Backbone.js Apps for Scale](https://reader036.fdocuments.us/reader036/viewer/2022062418/554bcd26b4c9058f6c8b4846/html5/thumbnails/23.jpg)
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
State management
‣ Backbone.StateManager‣ Web apps are stateful‣ Lose the conditional statements
23
Wednesday, October 24, 12
![Page 24: Building Backbone.js Apps for Scale](https://reader036.fdocuments.us/reader036/viewer/2022062418/554bcd26b4c9058f6c8b4846/html5/thumbnails/24.jpg)
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Keep your code organized
24
Wednesday, October 24, 12
![Page 25: Building Backbone.js Apps for Scale](https://reader036.fdocuments.us/reader036/viewer/2022062418/554bcd26b4c9058f6c8b4846/html5/thumbnails/25.jpg)
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Namespace and "le structure
‣ One Object per !le‣ File names line up with Object names‣ Directory structure maps to namespace
25
class CLS.Models.Organization
models organization.coffee
Wednesday, October 24, 12
![Page 26: Building Backbone.js Apps for Scale](https://reader036.fdocuments.us/reader036/viewer/2022062418/554bcd26b4c9058f6c8b4846/html5/thumbnails/26.jpg)
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Automation FTW
26
Wednesday, October 24, 12
![Page 27: Building Backbone.js Apps for Scale](https://reader036.fdocuments.us/reader036/viewer/2022062418/554bcd26b4c9058f6c8b4846/html5/thumbnails/27.jpg)
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Save time, be standardized
27
‣ Compilers and watchers‣ Scaffolding / generating‣ Asset management
Wednesday, October 24, 12
![Page 28: Building Backbone.js Apps for Scale](https://reader036.fdocuments.us/reader036/viewer/2022062418/554bcd26b4c9058f6c8b4846/html5/thumbnails/28.jpg)
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Coming soon...
28
‣ Command line interface‣ Scalable development SOPs‣ Application #ow / architecture‣ Automated test generation‣ Clear !le and code organization
Wednesday, October 24, 12
![Page 29: Building Backbone.js Apps for Scale](https://reader036.fdocuments.us/reader036/viewer/2022062418/554bcd26b4c9058f6c8b4846/html5/thumbnails/29.jpg)
© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL
Thank You
29
Patrick CamachoCrashlytics
Wednesday, October 24, 12