Little Opinions, Big Possibilities: The Tools and Patterns for Building Large Scale Backbone...

Little Opinions Big Possibilities

@BackboneRailsBrian Mann

The Tools and Patterns for Building Large Scale Backbone Applications

Atlanta, GA

What is a large scale application?

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”

“

“

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”

“

“

What is not a large scale application?

http://www.todomvc.com

TodoMVC

Raising

the Bar

Google Analytics

WordPress

Rdio

Pandora

• Multiple Routers

• View Management

• Nesting

• Cleanup

• Complex Events

• Lots of state changes

• Many Entities (Models / Collections)

Characteristics

= Ton of JS Files

Overcoming the gap

Engineering is serious business

Stop blaming Backbone.

<EMBRACE IT>

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

“

“

MonolithicFrameworks

Focused Small Tools

Leverage the Eco-system

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

Application Architecture

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)

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)

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)

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)

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)

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)

• Application• App Modules

• -Router

• -Controllers

• -Specialized Views

• Components

• Mixins

• Entities

• Config

Specialized Objects

• Application• App Modules

• -Router

• -Controllers

• -Specialized Views

• Components

• Mixins

• Entities

• Config

Specialized Objects

• Application• App Modules

• -Router

• -Controllers

• -Specialized Views

• Components

• Mixins

• Entities

• Config

• Modules

• Messaging Bus

• Request

• Command

• Pub / Sub

Specialized Objects

Visualize Our App

ULTIMATE CONTAINER

APPLICATION

Application

EntitiesUsers Sales

Items

Contacts Notes

Components

Mixins

Config

Visualize Our App

ULTIMATE CONTAINER

APPLICATION

Application

EntitiesUsers Sales

Items

Contacts Notes

Components

Mixins

Config

Visualize Our App

ULTIMATE CONTAINER

APPLICATION

Application

EntitiesUsers Sales

Items

Contacts Notes

Components

Mixins

Config

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

New ControllerShow Controller

List Controller

Visualize Our App

RESOURCE AUTHORITY

APP MODULE

ApplicationApp Module

Handlers<Requests>

<Commands><Pub / Sub >

Router

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

Visualize Our App

Visual Composer

ControllerItem View

Layout

Collection View

Application

Controller

App Module

Visualize Our App

Visual Composer

ControllerItem View

Layout

Collection View

Application

Controller

App ModuleController Concerns

It Giveth Life

layout = new List.Layout

Layout

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

Visualize Our App

Visual Composer

ControllerItem View

Layout

Collection View

Application

Controller

App Module

USERS COLLECTION

Listens & Respondsto View Events

Controller Concerns

Layout

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

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

Visualize Our App

Visual Composer

ControllerItem View

Layout

Collection View

Application

Controller

App Module

Requests AdditionalServices / Components

Controller Concerns

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

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

Visualize Our App

Visual Composer

ControllerItem View

Layout

Collection View

Application

Controller

App Module

Spinner

COMPONENTS

Grid

Controller Concerns

Item View

Visualize Our App

Presentation Manager

View

Application

Controller

App Module

View

<DOM />Template

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

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.

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

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

Visualize Our App

Presentation Manager

View

Application

Controller

App Module

View

<DOM />Template

Specialized Views

Item View

Model

Collection View

Collection

Layout

Visualize Our App

Presentation Manager

<DOM />Template

View

Application

Controller

App Module

View

Visualize Our App

Presentation Manager

<DOM />Template

View

Application

Controller

App Module

View

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>

www.backplug.io

www.backplug.io

Marionette JS

• Application

• App Router

• Controllers

• Specialized Views• Layouts & Regions

• ItemView

• Collection View

• Composite View

• Modules

• Messaging Bus

• Request

• Command

• Pub / Sub

New Toys

Messaging Bus

Controller

Entities

APPLICATION

USERS

LIST SHOW NEW

ENTITIES

USER NOTE

NOTES

LIST NEW

App Modules Shared Resources

Messaging Bus

Controller

Entities

## backbone/apps/users/list/list_controller.js@App.module "UsersApp.List", (List, App, Backbone, Marionette, $, _) ->

class List.Controller extends App.Controllers.Base initialize: -> users = App.request "user:entities" ## ...remaining code...

## backbone/apps/entities/user.js@App.module "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

Messaging Bus

Controller

Entities

## backbone/apps/users/list/list_controller.js@App.module "UsersApp.List", (List, App, Backbone, Marionette, $, _) ->

class List.Controller extends App.Controllers.Base initialize: -> users = App.request "user:entities" ## ...remaining code...

## backbone/apps/entities/user.js@App.module "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

Messaging Bus

Controller

Entities

Messaging Bus

Controller

Entities

Application

Folder Organization

backboneapp.js

Folder Organization

backboneapp.jsapps

Folder Organization

backboneapp.jsappsconfigentitiescomponentsmixinsbase

Folder Organization

backboneapp.js

configentitiescomponentsmixinsbase

playlist playlist_songs albumalbum_comments

currently_playing

apps

Folder Organization

backboneapp.js

configentitiescomponentsmixinsbase

playlist playlist_songs albumalbum_comments

currently_playing

apps

Playlist.List

Playlist.New

Playlist.Show

Playlist.Show

Playlist.Show

Playlist.Edit

PlaylistSongs.List

CurrentlyPlaying.Show

CurrentlyPlaying.List

CurrentlyPlaying.List

apps playlist

playlist_songs

listshow

currently_playing

playlist_app.js

editnew

listplaylist_songs_app.js

listcurrently_playing_app.js

show

apps playlist

playlist_songs

listshow

currently_playing

playlist_app.js

editnew

listplaylist_songs_app.js

listcurrently_playing_app.js

show

apps playlist

playlist_songs

listshow

currently_playing

playlist_app.js

editnew

listplaylist_songs_app.js

listcurrently_playing_app.js

show

apps playlist

playlist_songs

listshow

currently_playing

playlist_app.js

editnew

listplaylist_songs_app.js

listcurrently_playing_app.js

show

The End

@BackboneRailsBrian Mann