Backbone JS - Journey to the Front End [Dev Nexus Conference]

BACKBONE JS
{ Journey to the Front End }

Brian Mann
@backbonerails
BackboneRails.com

MY
EXPERIENCE
WITH BACKBONE

A Little Perspective

• Web Application Developer
‣ Backbone / Ruby on Rails

• Scaling Our Project
‣ Totals about 600 JS files
‣ Close to 80 diﬀerent JS modules
‣ 120+ server models
‣ Entirely Single Page

• Published Screencasts
‣ Chronicles development patterns

Backbone JS: Journey to the Front End BACKBONERAILS.com

Key Points

• Introduces the building blocks of MVC frameworks
• Manages the complexity of front end logic
• Provides the structural components for organizing
‣ Presentation
‣ Behavior
‣ Implementation

• Keeps view changes in sync
• Eliminates unmanageable spaghetti code


Tenets of Backbone

• Powered by RESTful JSON API
• Low Profile
‣ Unopinionated
‣ Leaves implementation up to the developer

• Small Set of Documentation
• Huge Success Record
‣ Major players using it in production

• Awesome Community Support


Pandora Google Analytics

WuFoo Rdio

Google Analytics

1. Loading feedback while fetching data from server

Google Analytics

2. Dialog Selection Events

WuFoo

1. Picked up and dragged “Single Line Text”

WuFoo

2. Passively saved to server, displayed single line text

WuFoo

3. Two Way Data Binding

WuFoo

4. Immediate Selection Feedback

Rdio

1. Changing sort order - hovered over “Song” drop down

Rdio

2. Clicking “Artist” to sort songs by Artist

Rdio

3. Shows loading spinner while fetching new data

Rdio

4. New collection is shown, URL is updated

http://www.serversrule.com/

before 2005

Stateless Servers


<html>
<head>
<title>Best Page in the Universe</title>
</head>
<body>
<div id="header">
<ul>
<li>
<a href="link1">Link 1</a>
</li>
<li>
</li>
<li>
</li>
</ul>
before 2005 </div>
<div id="main">Home Page Content</div>
</body>
</html>

Stateless Servers


My Awesome Site Link 1 | Link 2 | Link 3

Home Page

before 2005

Stateless Servers

http://www.serversrule.com/link1


Home Page

before 2005

Stateless Servers


before 2005

Stateless Servers


<html>
<head>
</head>
<body>
<div id="header">
<ul>
<li class="active">
</li>
<li>
</li>
<li>
</li>
</ul>
before 2005 </div>
<div id="main">Link 1 - Content</div>
</body>
</html>

Stateless Servers



Link 1 - Content

before 2005

Stateless Servers



Link 1 - Content

before 2005 2006 - 2009

Stateless Servers Heavy AJAX Use


<html>
My Awesome Site
<head> Link 1 | Link 2 | Link 3
</head>
<body>
<div id="header">
<ul>
<li class="active">

Link 1 - Content
</li>

<li>
</li>
<li>
</li>
</ul>
before 2005 </div> 2006 - 2009
</body>
</html>



<html>
My Awesome Site
</head>
<body>
<div id="header">
<ul>
<li class="active">

Link 1 - Content
</li>

<li>
</li>
<li>
</li>
</ul>
before 2005 </div> 2006 - 2009
<div id="main"> </div>
</body>
</html>



<html>
My Awesome Site
</head>
<body>
<div id="header">
<ul>
<li class="active">

Link 1 - Content
</li>

<li>
</li>
<li>
</li>
</ul>
before 2005 </div> 2006 - 2009
</body>
</html>



<html>
My Awesome Site
</head>
<body>
<div id="header">
<ul>

Link <a - Content 1</a>
1 href="link1">Link
</li>
<li>
</li>
<li>
</li>
</ul>
before 2005 </div> 2006 - 2009
</body>
</html>



<html>
My Awesome Site
</head>
<body>
<div id="header">
<ul>
<li>

Link 1 - Content
</li>

<li>
</li>
<li>
</li>
</ul>
before 2005 </div> 2006 - 2009
</body>
</html>



<html>
My Awesome Site
</head>
<body>
<div id="header">
<ul>
<li>

Link 1 - Content
</li>

</li>
<li>
</li>
</ul>
before 2005 </div> 2006 - 2009
</body>
</html>



<html>
My Awesome Site
</head>
<body>
<div id="header">
<ul>
<li>

Link 1 - Content
</li>

<li class="active">
</li>
<li>
</li>
</ul>
before 2005 </div> 2006 - 2009
</body>
</html>




Link 2 - Content

before 2005 2006 - 2009




Link 2 - Content

before 2005 2006 - 2009 2010 - now

Stateless Servers Heavy AJAX Use Modern MVC


<Links Collection>
Models:
[
{name: “Link1”, active: false},
{name: “Link2”, active: true},

] Link 2 - Content
{name: “Link3”, active: false}

before 2005 2006 - 2009 2010 - now



<Links Collection>
Models:
[
{name: “Link1”, active: false},
{name: “Link2”, active: true}, Object { ... type=”click” .. }

] Link 2 - Content
{name: “Link3”, active: false}

before 2005 2006 - 2009 2010 - now



<Links Collection>
Models: 1. Capture event, prevent default action
[
{name: “Link1”, 2. Call method on model to set {active: true}
active: false},
{name: “Link2”, active: true}, Object { ... type=”click” .. }
{name: “Link3”, 3. Fires event which causes previously
] Link 2 - Content
active: false}
selected <li> to deselect itself - and
current <li> to select itself
<li class=”active”>...</li>

4. Let our managing controller know this
click event has occurred
before 2005 2006 - 2009 2010 - now
5. Controller decides what the next action
should be


Backbone Components

• Entities
‣ Models
‣ Collections


Backbone Components

• Entities
Model
‣ Models
‣ Collections
User

firstName: Brian
lastName: Mann

fullName()
save()


Backbone Components

• Entities Events
Model
‣ Models
Name When This Event Triggers
‣ Collections
User change when any model attributes have changed

firstName: Brian change:[attribute] when a specific attribute has changed
lastName: Mann
destroy when a model is destroyed

fullName() sync
when a model has successfully synced with
save() the server

error when a model’s save call fails on the server

when a models validations fails on the
invalid
client


Backbone Components

• Entities
Collection
‣ Models
‣ Collections
User User User

User User User


Backbone Components

• Entities
Collection
‣ Models Events
‣ Collections
Name When This Event Triggers
User User User
add when a model is added to the collection

remove when a model is removed from a collection

when the collection’s entire contents have
reset
been replaced

User User
sort User
when the collection has been re-sorted

when a collection has started to request to
request
the server
when a collection has been successfully
sync
synced with the server


Backbone Components

• Entities
‣ Models
‣ Collections

• Views
‣ usually paired with a model or collection
‣ given a template (a chunk of HTML)
‣ responsible for rendering + responding to model/collection events


Backbone Components

• Entities
‣ Models
‣ Collections

• Views

• Routers
‣ listen for and react to client side URLs


Backbone Components

• Entities http://www.app.com/#users

‣ Models
‣ Collections

• Views
Z

• Routers


Backbone Components

• Entities
‣ Models
‣ Collections

• Views

• Routers

• Events


RELATIONSHIP BETWEEN
VIEWS AND MODELS

http://www.app.com/#users/1/edit

Hi, Stanley Kubrick Edit Profile

Name Stanley Kubrick

Age 70

Gender male female

Email stanley.kubrick@mgm.com

Friends 1. Malcolm McDowell x
2. Arthur C. Clarke x
3. Peter Sellers x

add new friend... +

cancel Save




Age 70 View
Gender male female


3. Peter Sellers x

add new friend... +

cancel Save




Age 70 View
Gender male female


3. Peter Sellers x
Model add new friend... Template
+

cancel Save

{
"id": 1,
"picture": "images/user_1.png",
"age": 70,
"name": "Stanley Kubrick",
"gender": "male",
"company": "MGM",
"phone": "832-547-3983",
"email": "stanley.kubrick@mgm.com",
"address": "Hertfordshire England",
"friends": [
{
"id": 1,
"name": "Malcolm McDowell"
},
{
"id": 2,
"name": "Arthur C. Clarke"
},
{
"id": 3,
"name": "Peter Sellers"
}
]
}

{
"id": 1,
<div id=”user”>Hi, Stanley Kubrick</div> "age": 70,
"gender": "male",
"company": "MGM",
"phone": "832-547-3983",
"friends": [
{
"id": 1,
},
{
"id": 2,
},
{
"id": 3,
}
]
}

{
"id": 1,
"gender": "male",
"company": "MGM",
"phone": "832-547-3983",
<a href=”mailto:stanley.kubrick@mgm.com”>
Email Stanley
"friends": [
</a> {
"id": 1,
},
{
"id": 2,
},
{
"id": 3,
}
]
}

{
"id": 1,
"gender": "male",
"company": "MGM",
"phone": "832-547-3983",
Email Stanley
"friends": [
</a> {
"id": 1,
},
<div id=”friends”> {
<span id=”count”>You have 3 friends:</span> "id": 2,
<ul> "name": "Arthur C. Clarke"
<li>Malcolm McDowell</li> },
<li>Arthur C. Clarke</li> {
<li>Peter Sellers</li> "id": 3,
</ul> "name": "Peter Sellers"
</div> }
]
}

{
"id": 1,
"name":
"gender": "male",
"company": "MGM",
"phone": "832-547-3983",
Email Stanley
"friends": [
</a> {
"id": 1,
},
</div> }
]
}

{
"id": 1,
"name": "Paul Thomas Anderson",
"gender": "male",
"company": "MGM",
"phone": "832-547-3983",
Email Stanley
"friends": [
</a> {
"id": 1,
},
</div> }
]
}

{
"id": 1,
"age": 70,
"gender": "male",
"company": "MGM",
"phone": "832-547-3983",
Email Stanley
"friends": [
</a> {
"id": 1,
},
</div> }
]
}

{
"id": 1,
<div id=”user”>Hi, Paul Thomas Anderson</div> "age": 70,
"gender": "male",
"company": "MGM",
"phone": "832-547-3983",
Email Stanley
"friends": [
</a> {
"id": 1,
},
</div> }
]
}

{
"id": 1,
"gender": "male",
"company": "MGM",
"phone": "832-547-3983",
Email Stanley
"friends": [
</a> {
"id": 1,
},
</div> }
]
}

{
"id": 1,
"gender": "male",
"company": "MGM",
"phone": "832-547-3983",
"email":
Email Stanley
"friends": [
</a> {
"id": 1,
},
</div> }
]
}

{
"id": 1,
"gender": "male",
"company": "MGM",
"phone": "832-547-3983",
"email": "pta@ptanderson.com",
Email Stanley
"friends": [
</a> {
"id": 1,
},
</div> }
]
}

{
"id": 1,
"gender": "male",
"company": "MGM",
"phone": "832-547-3983",
"friends": [
{
"id": 1,
},
</div> }
]
}

{
"id": 1,
"gender": "male",
"company": "MGM",
"phone": "832-547-3983",
<a href=”mailto:pta@ptanderson.com”> "address": "Hertfordshire England",
Email Paul "friends": [
</a> {
"id": 1,
},
</div> }
]
}

{
"id": 1,
<div id=”user”>Hi, Paul Thomas Anderson</div>
"age": 70,
"gender": "male",
"company": "MGM",
"phone": "832-547-3983",
<a href=”mailto:pta@ptanderson.com”> "email": "stanley.kubrick@mgm.com",
Email Paul "address": "Hertfordshire England",
"friends": [
</a>
{
"id": 1,
},
</div> }
]
]
}
}

{
"id": 1,
"age": 70,
"gender": "male",
"company": "MGM",
"phone": "832-547-3983",
"friends": [
</a>
{
"id": 1,
}
<div id=”friends”>
<span id=”count”>You have 3 friends:</span>
<ul>
<li>Malcolm McDowell</li>
<li>Arthur C. Clarke</li>
<li>Peter Sellers</li>
</ul>
</div>
]
]
}
}

{
"id": 1,
"age": 70,
"gender": "male",
"company": "MGM",
"phone": "832-547-3983",
"friends": [
</a>
{
"id": ,
"name":
}
<span id=”count”>You have 3 friends:</span> ]
<ul> }
</ul>
</div>

]
}

{
"id": 1,
"age": 70,
"gender": "male",
"company": "MGM",
"phone": "832-547-3983",
"friends": [
</a>
{
"id": 4 ,
"name": "Daniel Day Lewis"
}
<span id=”count”>You have 3 friends:</span> ]
<ul> }
</ul>
</div>

]
}

{
"id": 1,
"age": 70,
"gender": "male",
"company": "MGM",
"phone": "832-547-3983",
"friends": [
</a>
{
"id": 4 ,
}
]
}

]
}

{
"id": 1,
"age": 70,
"gender": "male",
"company": "MGM",
"phone": "832-547-3983",
"friends": [
</a>
{
"id": 4 ,
}
<span id=”count”>You have 1 friend:</span> ]
<ul> }
<li>Daniel Day Lewis</li>
</ul>
</div>

]
}

Title View

View Layout Container

Title View


Day Views

Title View Time Control View


Day Views

Title View Time Control View

Chosen Time View


Day Views

M T W TH F S SU
1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

[{
id: 1,
name: Doctors Appt,
Event

Day
where: Dentist,
date: 02-02-2013,

time_start: 2:00pm,
time_end: 3:00pm M T W TH F S SU
},{
id: 2,
name: Ruby Meetup,
1 2 3 4 5 6 7
where: Centergy Bld,
date: 02-13-2013,
time_start: 7:00pm,

},{
time_end: 9:00pm
8 9 10 11 12 13 14
id: 3,
name: Buy Flowers!,
where: null,
date: 02-14-2013,
time_start: null, 15 16 17 18 19 20 21
time_end: null
},{
id: 4,
name: Visit Vet,
where: Avian Center,
date: 02-24-2013,
22 23 24 25 26 27 28
time_start: 10:00am,
time_end: 11:00am
}]

time_start: 2:00pm,
time_end: 3:00pm M T W TH F S SU
},{
id: 2,
name: Ruby Meetup,
1 2 3 4 5 6 7
where: Centergy Bld,
Doctors

date: 02-13-2013, Appt
time_start: 7:00pm,

},{
time_end: 9:00pm
8 9 10 11 12 13 14
id: 3,
name: Buy Flowers!, Ruby

where: null, Meetup Flowers!
date: 02-14-2013,
time_start: null, 15 16 17 18 19 20 21
time_end: null
},{
id: 4,
name: Visit Vet,
where: Avian Center,
date: 02-24-2013,
22 23 24 25 26 27 28
time_start: 10:00am,
time_end: 11:00am Visit

Backbone JS - Journey to the Front End [Dev Nexus Conference]

Recommended

Recommended

More Related Content

What's hot

What's hot (12)

Viewers also liked

Viewers also liked (6)

Similar to Backbone JS - Journey to the Front End [Dev Nexus Conference]

Similar to Backbone JS - Journey to the Front End [Dev Nexus Conference] (20)

Recently uploaded

Recently uploaded (20)

Backbone JS - Journey to the Front End [Dev Nexus Conference]