I gave this talk Feb 18th, 2013 at Dev Nexus as an introduction to Backbone.js
http://www.devnexus.com/s/presentations#id-1481
Moving logic to the client unlocks unlimited potential, but is a challenging endeavor. In this talk we’ll be covering the use cases for Backbone, and show real world examples. We’ll be covering the tenets of client side MVC development, and what tools and resources you need on the server to make this possible, especially when deploying to production. We’ll also get to see how development with a framework like Backbone changes your applications’ workflow, and we’ll be diving into some of those approaches typical in day to day development.
You should walk away knowing:
Backbone’s role, when to use it, and how it works
Typical challenges you’ll need to overcome
What server side tools are a necessity
Where to go from here
Skill Level: Beginner
For videos and screencasts visit:
http://www.backbonerails.com
3. A Little Perspective
• Web Application Developer
‣ Backbone / Ruby on Rails
• Scaling Our Project
‣ Totals about 600 JS files
‣ Close to 80 different JS modules
‣ 120+ server models
‣ Entirely Single Page
• Published Screencasts
‣ Chronicles development patterns
Backbone JS: Journey to the Front End BACKBONERAILS.com
5. 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
Backbone JS: Journey to the Front End BACKBONERAILS.com
6. 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
Backbone JS: Journey to the Front End BACKBONERAILS.com
41. http://www.serversrule.com/link1
My Awesome Site Link 1 | Link 2 | Link 3
Link 1 - Content
before 2005 2006 - 2009
Stateless Servers Heavy AJAX Use
42. http://www.serversrule.com/link1
My Awesome Site Link 1 | Link 2 | Link 3
Link 1 - Content
before 2005 2006 - 2009
Stateless Servers Heavy AJAX Use
43. http://www.serversrule.com/link1
<html>
My Awesome Site
<head> Link 1 | Link 2 | Link 3
<title>Best Page in the Universe</title>
</head>
<body>
<div id="header">
<ul>
<li class="active">
Link 1 - Content
</li>
<a href="link1">Link 1</a>
<li>
<a href="link2">Link 2</a>
</li>
<li>
<a href="link3">Link 3</a>
</li>
</ul>
before 2005 </div> 2006 - 2009
<div id="main">Link 1 - Content</div>
</body>
</html>
Stateless Servers Heavy AJAX Use
44. http://www.serversrule.com/link1
<html>
My Awesome Site
<head> Link 1 | Link 2 | Link 3
<title>Best Page in the Universe</title>
</head>
<body>
<div id="header">
<ul>
<li class="active">
Link 1 - Content
</li>
<a href="link1">Link 1</a>
<li>
<a href="link2">Link 2</a>
</li>
<li>
<a href="link3">Link 3</a>
</li>
</ul>
before 2005 </div> 2006 - 2009
<div id="main">Link 1 - Content</div>
</body>
</html>
Stateless Servers Heavy AJAX Use
45. http://www.serversrule.com/link1
<html>
My Awesome Site
<head> Link 1 | Link 2 | Link 3
<title>Best Page in the Universe</title>
</head>
<body>
<div id="header">
<ul>
<li class="active">
Link 1 - Content
</li>
<a href="link1">Link 1</a>
<li>
<a href="link2">Link 2</a>
</li>
<li>
<a href="link3">Link 3</a>
</li>
</ul>
before 2005 </div> 2006 - 2009
<div id="main"> </div>
</body>
</html>
Stateless Servers Heavy AJAX Use
46. http://www.serversrule.com/link1
<html>
My Awesome Site
<head> Link 1 | Link 2 | Link 3
<title>Best Page in the Universe</title>
</head>
<body>
<div id="header">
<ul>
<li class="active">
Link 1 - Content
</li>
<a href="link1">Link 1</a>
<li>
<a href="link2">Link 2</a>
</li>
<li>
<a href="link3">Link 3</a>
</li>
</ul>
before 2005 </div> 2006 - 2009
<div id="main">Link 2 - Content</div>
</body>
</html>
Stateless Servers Heavy AJAX Use
47. http://www.serversrule.com/link1
<html>
My Awesome Site
<head> Link 1 | Link 2 | Link 3
<title>Best Page in the Universe</title>
</head>
<body>
<div id="header">
<ul>
<li class="active">
Link 1 - Content
</li>
<a href="link1">Link 1</a>
<li>
<a href="link2">Link 2</a>
</li>
<li>
<a href="link3">Link 3</a>
</li>
</ul>
before 2005 </div> 2006 - 2009
<div id="main">Link 2 - Content</div>
</body>
</html>
Stateless Servers Heavy AJAX Use
48. http://www.serversrule.com/link1
<html>
My Awesome Site
<head> Link 1 | Link 2 | Link 3
<title>Best Page in the Universe</title>
</head>
<body>
<div id="header">
<ul>
Link <a - Content 1</a>
1 href="link1">Link
</li>
<li>
<a href="link2">Link 2</a>
</li>
<li>
<a href="link3">Link 3</a>
</li>
</ul>
before 2005 </div> 2006 - 2009
<div id="main">Link 2 - Content</div>
</body>
</html>
Stateless Servers Heavy AJAX Use
49. http://www.serversrule.com/link1
<html>
My Awesome Site
<head> Link 1 | Link 2 | Link 3
<title>Best Page in the Universe</title>
</head>
<body>
<div id="header">
<ul>
<li>
Link 1 - Content
</li>
<a href="link1">Link 1</a>
<li>
<a href="link2">Link 2</a>
</li>
<li>
<a href="link3">Link 3</a>
</li>
</ul>
before 2005 </div> 2006 - 2009
<div id="main">Link 2 - Content</div>
</body>
</html>
Stateless Servers Heavy AJAX Use
50. http://www.serversrule.com/link1
<html>
My Awesome Site
<head> Link 1 | Link 2 | Link 3
<title>Best Page in the Universe</title>
</head>
<body>
<div id="header">
<ul>
<li>
Link 1 - Content
</li>
<a href="link1">Link 1</a>
<li>
<a href="link2">Link 2</a>
</li>
<li>
<a href="link3">Link 3</a>
</li>
</ul>
before 2005 </div> 2006 - 2009
<div id="main">Link 2 - Content</div>
</body>
</html>
Stateless Servers Heavy AJAX Use
51. http://www.serversrule.com/link1
<html>
My Awesome Site
<head> Link 1 | Link 2 | Link 3
<title>Best Page in the Universe</title>
</head>
<body>
<div id="header">
<ul>
<li>
Link 1 - Content
<a href="link1">Link 1</a>
</li>
<a href="link2">Link 2</a>
</li>
<li>
<a href="link3">Link 3</a>
</li>
</ul>
before 2005 </div> 2006 - 2009
<div id="main">Link 2 - Content</div>
</body>
</html>
Stateless Servers Heavy AJAX Use
52. http://www.serversrule.com/link1
<html>
My Awesome Site
<head> Link 1 | Link 2 | Link 3
<title>Best Page in the Universe</title>
</head>
<body>
<div id="header">
<ul>
<li>
Link 1 - Content
</li>
<a href="link1">Link 1</a>
<li class="active">
<a href="link2">Link 2</a>
</li>
<li>
<a href="link3">Link 3</a>
</li>
</ul>
before 2005 </div> 2006 - 2009
<div id="main">Link 2 - Content</div>
</body>
</html>
Stateless Servers Heavy AJAX Use
53. http://www.serversrule.com/link1
My Awesome Site Link 1 | Link 2 | Link 3
Link 1 - Content
before 2005 2006 - 2009
Stateless Servers Heavy AJAX Use
54. http://www.serversrule.com/link1
My Awesome Site Link 1 | Link 2 | Link 3
Link 2 - Content
before 2005 2006 - 2009
Stateless Servers Heavy AJAX Use
55. http://www.serversrule.com/link1
My Awesome Site Link 1 | Link 2 | Link 3
Link 2 - Content
before 2005 2006 - 2009
Stateless Servers Heavy AJAX Use
56. http://www.serversrule.com/link1
My Awesome Site Link 1 | Link 2 | Link 3
Link 2 - Content
before 2005 2006 - 2009 2010 - now
Stateless Servers Heavy AJAX Use Modern MVC
57. http://www.serversrule.com/link1
My Awesome Site Link 1 | Link 2 | Link 3
<Links Collection>
Models:
[
{name: “Link1”, active: false},
{name: “Link2”, active: true},
] Link 2 - Content
{name: “Link3”, active: false}
before 2005 2006 - 2009 2010 - now
Stateless Servers Heavy AJAX Use Modern MVC
58. http://www.serversrule.com/link1
My Awesome Site Link 1 | Link 2 | Link 3
<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
Stateless Servers Heavy AJAX Use Modern MVC
59. http://www.serversrule.com/link1
My Awesome Site Link 1 | Link 2 | Link 3
<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
Stateless Servers Heavy AJAX Use Modern MVC
60. Backbone Components
• Entities
‣ Models
‣ Collections
Backbone JS: Journey to the Front End BACKBONERAILS.com
61. Backbone Components
• Entities
Model
‣ Models
‣ Collections
User
firstName: Brian
lastName: Mann
fullName()
save()
Backbone JS: Journey to the Front End BACKBONERAILS.com
62. Backbone Components
• Entities
Model
‣ Models
‣ Collections
User
firstName: Brian
lastName: Mann
fullName()
save()
Backbone JS: Journey to the Front End BACKBONERAILS.com
63. Backbone Components
• Entities
Model
‣ Models
‣ Collections
User
firstName: Brian
lastName: Mann
fullName()
save()
Backbone JS: Journey to the Front End BACKBONERAILS.com
64. 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 JS: Journey to the Front End BACKBONERAILS.com
65. Backbone Components
• Entities
Collection
‣ Models
‣ Collections
User User User
User User User
Backbone JS: Journey to the Front End BACKBONERAILS.com
66. 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 JS: Journey to the Front End BACKBONERAILS.com
67. 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 JS: Journey to the Front End BACKBONERAILS.com
68. 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
• Routers
‣ listen for and react to client side URLs
Backbone JS: Journey to the Front End BACKBONERAILS.com
69. Backbone Components
• Entities http://www.app.com/#users
‣ Models
‣ Collections
• Views
‣ usually paired with a model or collection
Z
‣ given a template (a chunk of HTML)
‣ responsible for rendering + responding to model/collection events
• Routers
‣ listen for and react to client side URLs
Backbone JS: Journey to the Front End BACKBONERAILS.com
70. 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
• Routers
‣ listen for and react to client side URLs
• Events
Backbone JS: Journey to the Front End BACKBONERAILS.com
72. 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
73. http://www.app.com/#users/1/edit
Hi, Stanley Kubrick Edit Profile
Name Stanley Kubrick
Age 70 View
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
74. http://www.app.com/#users/1/edit
Hi, Stanley Kubrick Edit Profile
Name Stanley Kubrick
Age 70 View
Gender male female
Email stanley.kubrick@mgm.com
Friends 1. Malcolm McDowell x
2. Arthur C. Clarke x
3. Peter Sellers x
Model add new friend... Template
+
cancel Save