Building Backbone.js Apps for Scale

Building Backbone.js apps for scale

Patrick Camacho
Crashlytics

1 CRASHLYTICS CONFIDENTIAL © 2012. All rights reserved

Wednesday, October 24, 12

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 |
+----------------------+-------+-------+---------+---------+-----+-------+




First App Second App

man-hours man-hours




3000

2250
92%
Faster
1500

750
What changed?
0



Structure and flow



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



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


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



Backbone.js app structure
App

$(document).ready



App Helpers

Router Directors



App Helpers

Router Directors

Backbone.History.start()



App Helpers

Router Directors

Views Models



App Helpers

Router Directors

Views Models

HTML



App Helpers

Router Directors

Browser History Navigation

Views Models

HTML



Keep code maintainable



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



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


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


Composite architecture

Layout

‣ Backbone.Marionette Region Region

‣ Building blocks

‣ Limited dependencies
Item Collection

Item Item



State management
‣ Backbone.StateManager
‣ Web apps are stateful

‣ Lose the conditional statements



Keep your code organized



Namespace and file structure
‣ One Object per file
‣ File names line up with Object names

‣ Directory structure maps to namespace

models
organization.coﬀee

class CLS.Models.Organization



Automation FTW



Save time, be standardized

‣ Compilers and watchers
‣ Scaﬀolding / generating

‣ Asset management



Coming soon...

‣ Command line interface
‣ Scalable development SOPs

‣ Application flow / architecture

‣ Automated test generation

‣ Clear file and code organization



Thank You
Patrick Camacho
Crashlytics



Building Backbone.js Apps for Scale

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Building Backbone.js Apps for Scale