Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone...
-
Upload
brian-mann -
Category
Technology
-
view
1.048 -
download
2
description
Transcript of Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone...
![Page 1: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/1.jpg)
Little Opinions Big Possibilities
@BackboneRailsBrian Mann
The Tools and Patterns for Building Large Scale Backbone Applications
Atlanta, GA
![Page 2: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/2.jpg)
![Page 3: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/3.jpg)
![Page 4: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/4.jpg)
What is a large scale application?
![Page 5: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/5.jpg)
In my view, large-scale Javascript apps are non-trivial applications requiring significant developer effort to maintain, where most heavy lifting of data manipulation and display falls to the browser.
Addy Osmani “Patterns For Large-Scale JavaScript Application Architecture”
“
“
![Page 6: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/6.jpg)
If working on a significantly large Javascript application, remember to dedicate sufficient time to planning the underlying architecture that makes the most sense. It's often more complex than you may initially imagine.
Addy Osmani “Patterns For Large-Scale JavaScript Application Architecture”
“
“
![Page 7: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/7.jpg)
What is not a large scale application?
![Page 9: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/9.jpg)
Raising
the Bar
![Page 10: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/10.jpg)
Google Analytics
WordPress
Rdio
Pandora
![Page 11: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/11.jpg)
![Page 12: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/12.jpg)
![Page 13: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/13.jpg)
![Page 14: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/14.jpg)
![Page 15: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/15.jpg)
![Page 16: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/16.jpg)
![Page 17: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/17.jpg)
![Page 18: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/18.jpg)
![Page 19: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/19.jpg)
![Page 20: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/20.jpg)
![Page 21: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/21.jpg)
![Page 22: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/22.jpg)
![Page 23: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/23.jpg)
• Multiple Routers
• View Management
• Nesting
• Cleanup
• Complex Events
• Lots of state changes
• Many Entities (Models / Collections)
Characteristics
= Ton of JS Files
![Page 24: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/24.jpg)
Overcoming the gap
![Page 25: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/25.jpg)
Engineering is serious business
![Page 26: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/26.jpg)
Stop blaming Backbone.
<EMBRACE IT>
![Page 27: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/27.jpg)
The essential premise at the heart of Backbone has always been to try and discover the minimal set of data-structuring (Models and Collections) and user interface (Views and URLs) primitives that are useful when building web applications with JavaScript.
...In an ecosystem where overarching, decides-everything-for-you frameworks are commonplace, and many libraries require your site to be restructured to suit their look, feel, and default behavior — Backbone should continue to be a tool that gives you the freedom to design the full experience of your web application.
Jeremy Ashkenas Releasing Backbone v1.0
“
“
![Page 28: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/28.jpg)
MonolithicFrameworks
Focused Small Tools
![Page 29: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/29.jpg)
Leverage the Eco-system
![Page 30: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/30.jpg)
Pick the Right Tool
• 2-way Data-Binding
• Nested Collections
• Advanced Querying
• Filtering / Sorting
• Grids
• View Models and Computed Properties
Stickit / RivetsBB.AssociationsBB.QueryBB.ProjectionsBackGridBB.Mutators /BB.Computed
Fields
![Page 31: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/31.jpg)
Application Architecture
![Page 32: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/32.jpg)
What we get
• Routers
• Views
• Events
class Router extends Backbone.Router routes: "users" : "listUsers" "users/new" : "newUser" "users/:id" : "showUser" "users/:id/edit" : "editUser" "dashboard" : "showDashboard" "admin/users" : "listAdminUsers" "admin/users/:id" : "showAdminUser" "contacts" : "listContacts" "contacts/new" : "newContact" "contacts/:id" : "showContact" listUsers: -> users = new Users users.fetch() usersView = new View({collection: users}) $("#users").html(usersView.render().el)
![Page 33: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/33.jpg)
What we get
• Routers
• Views
• Events
class Router extends Backbone.Router routes: "users" : "listUsers" "users/new" : "newUser" "users/:id" : "showUser" "users/:id/edit" : "editUser" "dashboard" : "showDashboard" "admin/users" : "listAdminUsers" "admin/users/:id" : "showAdminUser" "contacts" : "listContacts" "contacts/new" : "newContact" "contacts/:id" : "showContact" listUsers: -> users = new Users users.fetch() usersView = new View({collection: users}) $("#users").html(usersView.render().el)
![Page 34: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/34.jpg)
What we get
• Routers
• Views
• Events
class Router extends Backbone.Router routes: "users" : "listUsers" "users/new" : "newUser" "users/:id" : "showUser" "users/:id/edit" : "editUser" "dashboard" : "showDashboard" "admin/users" : "listAdminUsers" "admin/users/:id" : "showAdminUser" "contacts" : "listContacts" "contacts/new" : "newContact" "contacts/:id" : "showContact" listUsers: -> users = new Users users.fetch() usersView = new View({collection: users}) $("#users").html(usersView.render().el)
![Page 35: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/35.jpg)
What we get
• Routers
• Views
• Events
class Router extends Backbone.Router routes: "users" : "listUsers" "users/new" : "newUser" "users/:id" : "showUser" "users/:id/edit" : "editUser" "dashboard" : "showDashboard" "admin/users" : "listAdminUsers" "admin/users/:id" : "showAdminUser" "contacts" : "listContacts" "contacts/new" : "newContact" "contacts/:id" : "showContact" listUsers: -> users = new Users users.fetch() usersView = new View({collection: users}) $("#users").html(usersView.render().el)
![Page 36: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/36.jpg)
What we get
• Routers
• Views
• Events
class Router extends Backbone.Router routes: "users" : "listUsers" "users/new" : "newUser" "users/:id" : "showUser" "users/:id/edit" : "editUser" "dashboard" : "showDashboard" "admin/users" : "listAdminUsers" "admin/users/:id" : "showAdminUser" "contacts" : "listContacts" "contacts/new" : "newContact" "contacts/:id" : "showContact" listUsers: -> users = new Users users.fetch() usersView = new View({collection: users}) $("#users").html(usersView.render().el)
![Page 37: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/37.jpg)
What we get
• Routers
• Views
• Events
class Router extends Backbone.Router routes: "users" : "listUsers" "users/new" : "newUser" "users/:id" : "showUser" "users/:id/edit" : "editUser" "dashboard" : "showDashboard" "admin/users" : "listAdminUsers" "admin/users/:id" : "showAdminUser" "contacts" : "listContacts" "contacts/new" : "newContact" "contacts/:id" : "showContact" listUsers: -> users = new Users users.fetch() usersView = new View({collection: users}) $("#users").html(usersView.render().el)
![Page 38: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/38.jpg)
• Application• App Modules
• -Router
• -Controllers
• -Specialized Views
• Components
• Mixins
• Entities
• Config
Specialized Objects
![Page 39: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/39.jpg)
• Application• App Modules
• -Router
• -Controllers
• -Specialized Views
• Components
• Mixins
• Entities
• Config
Specialized Objects
![Page 40: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/40.jpg)
• Application• App Modules
• -Router
• -Controllers
• -Specialized Views
• Components
• Mixins
• Entities
• Config
• Modules
• Messaging Bus
• Request
• Command
• Pub / Sub
Specialized Objects
![Page 41: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/41.jpg)
Visualize Our App
ULTIMATE CONTAINER
APPLICATION
Application
EntitiesUsers Sales
Items
Contacts Notes
Components
Mixins
Config
![Page 42: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/42.jpg)
Visualize Our App
ULTIMATE CONTAINER
APPLICATION
Application
EntitiesUsers Sales
Items
Contacts Notes
Components
Mixins
Config
![Page 43: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/43.jpg)
Visualize Our App
ULTIMATE CONTAINER
APPLICATION
Application
EntitiesUsers Sales
Items
Contacts Notes
Components
Mixins
Config
![Page 44: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/44.jpg)
Visualize Our App
ULTIMATE CONTAINER
APPLICATION
Application
EntitiesUsers Sales
Items
Contacts Notes
Components
Mixins
Config
APPLICATION INSTANCE
#header-region
#main-region
#footer-region
Application Regions
Storing Entitiesand Resources
![Page 45: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/45.jpg)
New ControllerShow Controller
List Controller
Visualize Our App
RESOURCE AUTHORITY
APP MODULE
ApplicationApp Module
Handlers<Requests>
<Commands><Pub / Sub >
Router
![Page 46: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/46.jpg)
New ControllerShow Controller
List Controller
Visualize Our App
RESOURCE AUTHORITY
APP MODULE
ApplicationApp Module
Handlers<Requests>
<Commands><Pub / Sub >
Router
THE GATEKEEPER
USERS
LIST
SHOW
NEW
ADMINUSERS
LIST
EDIT
DASHBOARDUSERS LIST
<App Request><App Command>
/users/users/:id/users/new
![Page 47: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/47.jpg)
Visualize Our App
Visual Composer
ControllerItem View
Layout
Collection View
Application
Controller
App Module
![Page 48: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/48.jpg)
Visualize Our App
Visual Composer
ControllerItem View
Layout
Collection View
Application
Controller
App ModuleController Concerns
It Giveth Life
layout = new List.Layout
Layout
![Page 49: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/49.jpg)
Visualize Our App
Visual Composer
ControllerItem View
Layout
Collection View
Application
Controller
App Module
UnderstandsView Dependencies
usersCollection = App.request "user:entities"
Layout
Controller Concerns
USERS COLLECTION
![Page 50: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/50.jpg)
Visualize Our App
Visual Composer
ControllerItem View
Layout
Collection View
Application
Controller
App Module
USERS COLLECTION
Listens & Respondsto View Events
Controller Concerns
Layout
![Page 51: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/51.jpg)
Visualize Our App
Visual Composer
ControllerItem View
Layout
Collection View
Application
Controller
App Module
USERS COLLECTION
Listens & Respondsto View Events
Controller Concerns
Layout
@listenTo layout, "show", => @listUsers(usersCollection)
listUsers: (users) -> new List.CollectionView({ collection: users })
![Page 52: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/52.jpg)
Visualize Our App
Visual Composer
ControllerItem View
Layout
Collection View
Application
Controller
App Module
Collection View
Controller Concerns
Layout
USERS COLLECTION+
layout.usersRegion.show(collectionView)
Layout
![Page 53: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/53.jpg)
Visualize Our App
Visual Composer
ControllerItem View
Layout
Collection View
Application
Controller
App Module
Requests AdditionalServices / Components
Controller Concerns
![Page 54: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/54.jpg)
Visualize Our App
Visual Composer
ControllerItem View
Layout
Collection View
Application
Controller
App Module
Spinner
COMPONENTS
Form
OK
Name:Address:
Grid
Controller Concerns
Item View
![Page 55: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/55.jpg)
Visualize Our App
Visual Composer
ControllerItem View
Layout
Collection View
Application
Controller
App Module
Spinner
COMPONENTS
Form
OK
Name:Address:
Grid
Controller Concerns
Item View
![Page 56: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/56.jpg)
Visualize Our App
Visual Composer
ControllerItem View
Layout
Collection View
Application
Controller
App Module
Spinner
COMPONENTS
Grid
Controller Concerns
Item View
![Page 57: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/57.jpg)
Visualize Our App
Presentation Manager
View
Application
Controller
App Module
View
<DOM />Template
![Page 58: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/58.jpg)
Visualize Our App
Presentation Manager
View
Application
Controller
App Module
View
<DOM />Template
Event Method When This Event Triggers
before:render onBeforeRender before view’s $el has been rendered into the DOM
render onRender view’s $el has been inserted, allowing you to work with the DOM
show onShow a!er a view has been inserted by a region into the DOM
dom:refresh onDomRefresh a!er a view has been shown but has been re-rendered at a later time
before:close onBeforeClose view has been told to close. return false to prevent it from closing
close onClose a!er view is closed. run custom code such as additional cleanup
![Page 59: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/59.jpg)
Visualize Our App
Presentation Manager
View
Application
Controller
App Module
View
<DOM />Template
class App.Views.SomeView extends Base.View mixin: ["focusable", "selectable"] onRender: -> ## We know we’re rendered, so manipulate the DOM. ## Now’s a great time to initialize a jQuery plugin. onClose: -> ## We know we’re about to be closed down. ## This is when we unbind / cleanup things we may have initialized at an earlier point.
![Page 60: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/60.jpg)
Visualize Our App
Presentation Manager
View
Application
Controller
App Module
View
<DOM />Template
class App.Views.SomeView extends Base.View mixin: ["focusable", "selectable"] onRender: -> ## We know we’re rendered, so manipulate the DOM. ## Now’s a great time to initialize a jQuery plugin. onClose: -> ## We know we’re about to be closed down. ## This is when we unbind / cleanup things we may have initialized at an earlier point.
initialize: -> someModel = new App.Models.someModel
![Page 61: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/61.jpg)
Visualize Our App
Presentation Manager
View
Application
Controller
App Module
View
<DOM />Template
class App.Views.SomeView extends Base.View mixin: ["focusable", "selectable"] onRender: -> ## We know we’re rendered, so manipulate the DOM. ## Now’s a great time to initialize a jQuery plugin. onClose: -> ## We know we’re about to be closed down. ## This is when we unbind / cleanup things we may have initialized at an earlier point.
initialize: -> someModel = new App.Models.someModel
![Page 62: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/62.jpg)
Visualize Our App
Presentation Manager
View
Application
Controller
App Module
View
<DOM />Template
Specialized Views
Item View
Model
Collection View
Collection
Layout
![Page 63: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/63.jpg)
Visualize Our App
Presentation Manager
<DOM />Template
View
Application
Controller
App Module
View
![Page 64: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/64.jpg)
Visualize Our App
Presentation Manager
<DOM />Template
View
Application
Controller
App Module
View
![Page 65: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/65.jpg)
Visualize Our App
Presentation Manager
<DOM />Template
View
Application
Controller
App Module
View<section> <div id="git-comment"><%= @comment %></div> <div id="git-author"> Authored by <%= @author %> on <%= @date %> </div> <div id="git-diff"> Showing <%= @num_changed %> changed files with <%= @num_additions %> additions. </div></section>
![Page 68: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/68.jpg)
Marionette JS
![Page 69: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/69.jpg)
• Application
• App Router
• Controllers
• Specialized Views• Layouts & Regions
• ItemView
• Collection View
• Composite View
• Modules
• Messaging Bus
• Request
• Command
• Pub / Sub
New Toys
![Page 70: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/70.jpg)
Messaging Bus
Controller
Entities
![Page 71: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/71.jpg)
APPLICATION
USERS
LIST SHOW NEW
ENTITIES
USER NOTE
NOTES
LIST NEW
App Modules Shared Resources
![Page 72: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/72.jpg)
Messaging Bus
Controller
Entities
## backbone/apps/users/list/[email protected] "UsersApp.List", (List, App, Backbone, Marionette, $, _) ->
class List.Controller extends App.Controllers.Base initialize: -> users = App.request "user:entities" ## ...remaining code...
## backbone/apps/entities/[email protected] "Entities", (Entities, App, Backbone, Marionette, $, _) ->
class User extends Entities.Model
class UsersCollection extends Entities.Collection model: User
App.reqres.setHandler "user:entities", -> users = new UsersCollection users.fetch() users
![Page 73: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/73.jpg)
Messaging Bus
Controller
Entities
## backbone/apps/users/list/[email protected] "UsersApp.List", (List, App, Backbone, Marionette, $, _) ->
class List.Controller extends App.Controllers.Base initialize: -> users = App.request "user:entities" ## ...remaining code...
## backbone/apps/entities/[email protected] "Entities", (Entities, App, Backbone, Marionette, $, _) ->
class User extends Entities.Model
class UsersCollection extends Entities.Collection model: User
App.reqres.setHandler "user:entities", -> users = new UsersCollection users.fetch() users
![Page 74: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/74.jpg)
Messaging Bus
Controller
Entities
![Page 75: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/75.jpg)
Messaging Bus
Controller
Entities
Application
![Page 76: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/76.jpg)
Folder Organization
backboneapp.js
![Page 77: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/77.jpg)
Folder Organization
backboneapp.jsapps
![Page 78: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/78.jpg)
Folder Organization
backboneapp.jsappsconfigentitiescomponentsmixinsbase
![Page 79: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/79.jpg)
Folder Organization
backboneapp.js
configentitiescomponentsmixinsbase
playlist playlist_songs albumalbum_comments
currently_playing
apps
![Page 80: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/80.jpg)
Folder Organization
backboneapp.js
configentitiescomponentsmixinsbase
playlist playlist_songs albumalbum_comments
currently_playing
apps
![Page 81: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/81.jpg)
Playlist.List
![Page 82: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/82.jpg)
![Page 83: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/83.jpg)
Playlist.New
![Page 84: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/84.jpg)
![Page 85: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/85.jpg)
Playlist.Show
![Page 86: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/86.jpg)
Playlist.Show
![Page 87: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/87.jpg)
Playlist.Show
![Page 88: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/88.jpg)
Playlist.Edit
![Page 89: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/89.jpg)
PlaylistSongs.List
![Page 90: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/90.jpg)
CurrentlyPlaying.Show
![Page 91: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/91.jpg)
CurrentlyPlaying.List
![Page 92: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/92.jpg)
CurrentlyPlaying.List
![Page 93: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/93.jpg)
apps playlist
playlist_songs
listshow
currently_playing
playlist_app.js
editnew
listplaylist_songs_app.js
listcurrently_playing_app.js
show
![Page 94: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/94.jpg)
apps playlist
playlist_songs
listshow
currently_playing
playlist_app.js
editnew
listplaylist_songs_app.js
listcurrently_playing_app.js
show
![Page 95: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/95.jpg)
apps playlist
playlist_songs
listshow
currently_playing
playlist_app.js
editnew
listplaylist_songs_app.js
listcurrently_playing_app.js
show
![Page 96: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/96.jpg)
apps playlist
playlist_songs
listshow
currently_playing
playlist_app.js
editnew
listplaylist_songs_app.js
listcurrently_playing_app.js
show
![Page 97: Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone Applications](https://reader037.fdocument.pub/reader037/viewer/2022110306/554bce18b4c905706a8b49b0/html5/thumbnails/97.jpg)
The End
@BackboneRailsBrian Mann