Building Backbone.js Apps for Scale

© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL

Building Backbone.js apps for scale

Patrick CamachoCrashlytics

1

Wednesday, October 24, 12




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




5

man-hours

First App

man-hours

Second App




6

0

750

1500

2250

3000

92%Faster

What changed?


© 2012. All rights reservedCRASHLYTICS CONFIDENTIAL7

Structure and !ow



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



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



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)



Backbone.js app structure

11

$(document).ready

App




12

App

Router Directors

Helpers


Router Directors

Helpers



13

App

Backbone.History.start()


DirectorsRouter



14

Views

HelpersApp

Models


Views

HTML

Router Directors



15

HelpersApp

Models


HTML

Views

DirectorsRouter

Models



16

HelpersApp


Views

HTML



17

Router

Models

Directors

HelpersApp

Browser History Navigation



Keep code maintainable

18



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()


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" />');...


Use prototypes and chaining

20

“Spaghetti” code



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



Composite architecture

22

Layout

Region

CollectionItem

Region

Item Item

‣ Backbone.Marionette‣ Building blocks‣ Limited dependencies



State management

‣ Backbone.StateManager‣ Web apps are stateful‣ Lose the conditional statements

23



Keep your code organized

24



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



Automation FTW

26



Save time, be standardized

27

‣ Compilers and watchers‣ Scaffolding / generating‣ Asset management



Coming soon...

28

‣ Command line interface‣ Scalable development SOPs‣ Application #ow / architecture‣ Automated test generation‣ Clear !le and code organization



Thank You

29

Patrick CamachoCrashlytics


Documents

Building Backbone.js Apps for Scale