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

778 views
707 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
778
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. BACKBONE JS { Journey to the Front End }Brian Mann@backbonerailsBackboneRails.com
  2. 2. MY EXPERIENCEWITH BACKBONE
  3. 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 patternsBackbone JS: Journey to the Front End BACKBONERAILS.com
  4. 4. BACKBONE IN A NUTSHELL
  5. 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 codeBackbone JS: Journey to the Front End BACKBONERAILS.com
  6. 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 SupportBackbone JS: Journey to the Front End BACKBONERAILS.com
  7. 7. SHOW DON’T TELL
  8. 8. Pandora Google AnalyticsWuFoo Rdio
  9. 9. Google Analytics1. Loading feedback while fetching data from server
  10. 10. Google Analytics1. Loading feedback while fetching data from server
  11. 11. Google Analytics2. Dialog Selection Events
  12. 12. Google Analytics2. Dialog Selection Events
  13. 13. WuFoo1. Picked up and dragged “Single Line Text”
  14. 14. WuFoo1. Picked up and dragged “Single Line Text”
  15. 15. WuFoo2. Passively saved to server, displayed single line text
  16. 16. WuFoo2. Passively saved to server, displayed single line text
  17. 17. WuFoo3. Two Way Data Binding
  18. 18. WuFoo3. Two Way Data Binding
  19. 19. WuFoo4. Immediate Selection Feedback
  20. 20. WuFoo4. Immediate Selection Feedback
  21. 21. Rdio1. Changing sort order - hovered over “Song” drop down
  22. 22. Rdio1. Changing sort order - hovered over “Song” drop down
  23. 23. Rdio2. Clicking “Artist” to sort songs by Artist
  24. 24. Rdio2. Clicking “Artist” to sort songs by Artist
  25. 25. Rdio3. Shows loading spinner while fetching new data
  26. 26. Rdio3. Shows loading spinner while fetching new data
  27. 27. Rdio4. New collection is shown, URL is updated
  28. 28. Rdio4. New collection is shown, URL is updated
  29. 29. EVOLUTION OF THE WEB
  30. 30. http://www.serversrule.com/ before 2005Stateless Servers
  31. 31. http://www.serversrule.com/ <html> <head> <title>Best Page in the Universe</title> </head> <body> <div id="header"> <ul> <li> <a href="link1">Link 1</a> </li> <li> <a href="link2">Link 2</a> </li> <li> <a href="link3">Link 3</a> </li> </ul> before 2005 </div> <div id="main">Home Page Content</div> </body> </html>Stateless Servers
  32. 32. http://www.serversrule.com/ My Awesome Site Link 1 | Link 2 | Link 3 Home Page before 2005Stateless Servers
  33. 33. http://www.serversrule.com/ My Awesome Site Link 1 | Link 2 | Link 3 Home Page before 2005Stateless Servers
  34. 34. http://www.serversrule.com/link1 My Awesome Site Link 1 | Link 2 | Link 3 Home Page before 2005Stateless Servers
  35. 35. http://www.serversrule.com/link1 before 2005Stateless Servers
  36. 36. http://www.serversrule.com/link1 <html> <head> <title>Best Page in the Universe</title> </head> <body> <div id="header"> <ul> <li class="active"> <a href="link1">Link 1</a> </li> <li> <a href="link2">Link 2</a> </li> <li> <a href="link3">Link 3</a> </li> </ul> before 2005 </div> <div id="main">Link 1 - Content</div> </body> </html>Stateless Servers
  37. 37. http://www.serversrule.com/link1 <html> <head> <title>Best Page in the Universe</title> </head> <body> <div id="header"> <ul> <li class="active"> <a href="link1">Link 1</a> </li> <li> <a href="link2">Link 2</a> </li> <li> <a href="link3">Link 3</a> </li> </ul> before 2005 </div> <div id="main">Link 1 - Content</div> </body> </html>Stateless Servers
  38. 38. http://www.serversrule.com/link1 My Awesome Site Link 1 | Link 2 | Link 3 Link 1 - Content before 2005Stateless Servers
  39. 39. http://www.serversrule.com/link1 My Awesome Site Link 1 | Link 2 | Link 3 Link 1 - Content before 2005Stateless Servers
  40. 40. http://www.serversrule.com/link1 My Awesome Site Link 1 | Link 2 | Link 3 Link 1 - Content before 2005 2006 - 2009Stateless Servers Heavy AJAX Use
  41. 41. http://www.serversrule.com/link1 My Awesome Site Link 1 | Link 2 | Link 3 Link 1 - Content before 2005 2006 - 2009Stateless Servers Heavy AJAX Use
  42. 42. 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
  43. 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. 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"> </div> </body> </html>Stateless Servers Heavy AJAX Use
  45. 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">Link 2 - Content</div> </body> </html>Stateless Servers Heavy AJAX Use
  46. 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. 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> 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
  48. 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> <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
  49. 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. 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 <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. 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 </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
  52. 52. http://www.serversrule.com/link1 My Awesome Site Link 1 | Link 2 | Link 3 Link 1 - Content before 2005 2006 - 2009Stateless Servers Heavy AJAX Use
  53. 53. http://www.serversrule.com/link1 My Awesome Site Link 1 | Link 2 | Link 3 Link 2 - Content before 2005 2006 - 2009Stateless Servers Heavy AJAX Use
  54. 54. http://www.serversrule.com/link1 My Awesome Site Link 1 | Link 2 | Link 3 Link 2 - Content before 2005 2006 - 2009Stateless Servers Heavy AJAX Use
  55. 55. http://www.serversrule.com/link1 My Awesome Site Link 1 | Link 2 | Link 3 Link 2 - Content before 2005 2006 - 2009 2010 - nowStateless Servers Heavy AJAX Use Modern MVC
  56. 56. 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
  57. 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}, Object { ... type=”click” .. }] Link 2 - Content {name: “Link3”, active: false} before 2005 2006 - 2009 2010 - now Stateless Servers Heavy AJAX Use Modern MVC
  58. 58. 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
  59. 59. Backbone Components • Entities ‣ Models ‣ CollectionsBackbone JS: Journey to the Front End BACKBONERAILS.com
  60. 60. Backbone Components • Entities Model ‣ Models ‣ Collections User firstName: Brian lastName: Mann fullName() save()Backbone JS: Journey to the Front End BACKBONERAILS.com
  61. 61. Backbone Components • Entities Model ‣ Models ‣ Collections User firstName: Brian lastName: Mann fullName() save()Backbone JS: Journey to the Front End BACKBONERAILS.com
  62. 62. Backbone Components • Entities Model ‣ Models ‣ Collections User firstName: Brian lastName: Mann fullName() save()Backbone JS: Journey to the Front End BACKBONERAILS.com
  63. 63. 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 clientBackbone JS: Journey to the Front End BACKBONERAILS.com
  64. 64. Backbone Components • Entities Collection ‣ Models ‣ Collections User User User User User UserBackbone JS: Journey to the Front End BACKBONERAILS.com
  65. 65. 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 serverBackbone JS: Journey to the Front End BACKBONERAILS.com
  66. 66. 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 eventsBackbone JS: Journey to the Front End BACKBONERAILS.com
  67. 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 • Routers ‣ listen for and react to client side URLsBackbone JS: Journey to the Front End BACKBONERAILS.com
  68. 68. 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 URLsBackbone JS: Journey to the Front End BACKBONERAILS.com
  69. 69. 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 • EventsBackbone JS: Journey to the Front End BACKBONERAILS.com
  70. 70. RELATIONSHIP BETWEEN VIEWS AND MODELS
  71. 71. http://www.app.com/#users/1/editHi, 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
  72. 72. http://www.app.com/#users/1/editHi, 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
  73. 73. http://www.app.com/#users/1/editHi, 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 xModel add new friend... Template + cancel Save
  74. 74. { "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" } ]}
  75. 75. { "id": 1, "picture": "images/user_1.png",<div id=”user”>Hi, Stanley Kubrick</div> "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" } ] }
  76. 76. { "id": 1, "picture": "images/user_1.png",<div id=”user”>Hi, Stanley Kubrick</div> "age": 70, "name": "Stanley Kubrick", "gender": "male", "company": "MGM", "phone": "832-547-3983", "email": "stanley.kubrick@mgm.com", <a href=”mailto:stanley.kubrick@mgm.com”> "address": "Hertfordshire England", Email Stanley "friends": [ </a> { "id": 1, "name": "Malcolm McDowell" }, { "id": 2, "name": "Arthur C. Clarke" }, { "id": 3, "name": "Peter Sellers" } ] }
  77. 77. { "id": 1, "picture": "images/user_1.png",<div id=”user”>Hi, Stanley Kubrick</div> "age": 70, "name": "Stanley Kubrick", "gender": "male", "company": "MGM", "phone": "832-547-3983", "email": "stanley.kubrick@mgm.com", <a href=”mailto:stanley.kubrick@mgm.com”> "address": "Hertfordshire England", Email Stanley "friends": [ </a> { "id": 1, "name": "Malcolm McDowell" }, <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> } ] }
  78. 78. { "id": 1, "picture": "images/user_1.png",<div id=”user”>Hi, Stanley Kubrick</div> "age": 70, "name": "Stanley Kubrick", "gender": "male", "company": "MGM", "phone": "832-547-3983", "email": "stanley.kubrick@mgm.com", <a href=”mailto:stanley.kubrick@mgm.com”> "address": "Hertfordshire England", Email Stanley "friends": [ </a> { "id": 1, "name": "Malcolm McDowell" }, <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> } ] }
  79. 79. { "id": 1, "picture": "images/user_1.png",<div id=”user”>Hi, Stanley Kubrick</div> "age": 70, "name": "gender": "male", "company": "MGM", "phone": "832-547-3983", "email": "stanley.kubrick@mgm.com", <a href=”mailto:stanley.kubrick@mgm.com”> "address": "Hertfordshire England", Email Stanley "friends": [ </a> { "id": 1, "name": "Malcolm McDowell" }, <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> } ] }
  80. 80. { "id": 1, "picture": "images/user_1.png",<div id=”user”>Hi, Stanley Kubrick</div> "age": 70, "name": "Paul Thomas Anderson", "gender": "male", "company": "MGM", "phone": "832-547-3983", "email": "stanley.kubrick@mgm.com", <a href=”mailto:stanley.kubrick@mgm.com”> "address": "Hertfordshire England", Email Stanley "friends": [ </a> { "id": 1, "name": "Malcolm McDowell" }, <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> } ] }
  81. 81. { "id": 1, "picture": "images/user_1.png",<div id=”user”>Hi, Stanley Kubrick</div> "age": 70, "name": "Paul Thomas Anderson", "gender": "male", "company": "MGM", "phone": "832-547-3983", "email": "stanley.kubrick@mgm.com", <a href=”mailto:stanley.kubrick@mgm.com”> "address": "Hertfordshire England", Email Stanley "friends": [ </a> { "id": 1, "name": "Malcolm McDowell" }, <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> } ] }
  82. 82. { "id": 1, "picture": "images/user_1.png", "age": 70, "name": "Paul Thomas Anderson", "gender": "male", "company": "MGM", "phone": "832-547-3983", "email": "stanley.kubrick@mgm.com",<a href=”mailto:stanley.kubrick@mgm.com”> "address": "Hertfordshire England", Email Stanley "friends": [</a> { "id": 1, "name": "Malcolm McDowell" },<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> } ] }
  83. 83. { "id": 1, "picture": "images/user_1.png",<div id=”user”>Hi, Paul Thomas Anderson</div> "age": 70, "name": "Paul Thomas Anderson", "gender": "male", "company": "MGM", "phone": "832-547-3983", "email": "stanley.kubrick@mgm.com", <a href=”mailto:stanley.kubrick@mgm.com”> "address": "Hertfordshire England", Email Stanley "friends": [ </a> { "id": 1, "name": "Malcolm McDowell" }, <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> } ] }
  84. 84. { "id": 1, "picture": "images/user_1.png",<div id=”user”>Hi, Paul Thomas Anderson</div> "age": 70, "name": "Stanley Kubrick", "gender": "male", "company": "MGM", "phone": "832-547-3983", "email": "stanley.kubrick@mgm.com", <a href=”mailto:stanley.kubrick@mgm.com”> "address": "Hertfordshire England", Email Stanley "friends": [ </a> { "id": 1, "name": "Malcolm McDowell" }, <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> } ] }
  85. 85. { "id": 1, "picture": "images/user_1.png",<div id=”user”>Hi, Paul Thomas Anderson</div> "age": 70, "name": "Stanley Kubrick", "gender": "male", "company": "MGM", "phone": "832-547-3983", "email": "stanley.kubrick@mgm.com", <a href=”mailto:stanley.kubrick@mgm.com”> "address": "Hertfordshire England", Email Stanley "friends": [ </a> { "id": 1, "name": "Malcolm McDowell" }, <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> } ] }
  86. 86. { "id": 1, "picture": "images/user_1.png",<div id=”user”>Hi, Paul Thomas Anderson</div> "age": 70, "name": "Stanley Kubrick", "gender": "male", "company": "MGM", "phone": "832-547-3983", "email": <a href=”mailto:stanley.kubrick@mgm.com”> "address": "Hertfordshire England", Email Stanley "friends": [ </a> { "id": 1, "name": "Malcolm McDowell" }, <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> } ] }
  87. 87. { "id": 1, "picture": "images/user_1.png",<div id=”user”>Hi, Paul Thomas Anderson</div> "age": 70, "name": "Stanley Kubrick", "gender": "male", "company": "MGM", "phone": "832-547-3983", "email": "pta@ptanderson.com", <a href=”mailto:stanley.kubrick@mgm.com”> "address": "Hertfordshire England", Email Stanley "friends": [ </a> { "id": 1, "name": "Malcolm McDowell" }, <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> } ] }
  88. 88. { "id": 1, "picture": "images/user_1.png",<div id=”user”>Hi, Paul Thomas Anderson</div> "age": 70, "name": "Stanley Kubrick", "gender": "male", "company": "MGM", "phone": "832-547-3983", "email": "pta@ptanderson.com", <a href=”mailto:stanley.kubrick@mgm.com”> "address": "Hertfordshire England", Email Stanley "friends": [ </a> { "id": 1, "name": "Malcolm McDowell" }, <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> } ] }
  89. 89. { "id": 1, "picture": "images/user_1.png",<div id=”user”>Hi, Paul Thomas Anderson</div> "age": 70, "name": "Stanley Kubrick", "gender": "male", "company": "MGM", "phone": "832-547-3983", "email": "pta@ptanderson.com", "address": "Hertfordshire England", "friends": [ { "id": 1, "name": "Malcolm McDowell" }, <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> } ] }
  90. 90. { "id": 1, "picture": "images/user_1.png",<div id=”user”>Hi, Paul Thomas Anderson</div> "age": 70, "name": "Stanley Kubrick", "gender": "male", "company": "MGM", "phone": "832-547-3983", "email": "pta@ptanderson.com",<a href=”mailto:pta@ptanderson.com”> "address": "Hertfordshire England", Email Paul "friends": [</a> { "id": 1, "name": "Malcolm McDowell" }, <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> } ] }
  91. 91. { "id": 1, "picture": "images/user_1.png",<div id=”user”>Hi, Paul Thomas Anderson</div> "age": 70, "name": "Stanley Kubrick", "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, "name": "Malcolm McDowell" }, <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> } ] ] } }
  92. 92. { "id": 1, "picture": "images/user_1.png",<div id=”user”>Hi, Paul Thomas Anderson</div> "age": 70, "name": "Stanley Kubrick", "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, "name": "Malcolm McDowell" }, <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> } ] ] } }
  93. 93. { "id": 1, "picture": "images/user_1.png",<div id=”user”>Hi, Paul Thomas Anderson</div> "age": 70, "name": "Stanley Kubrick", "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, "name": "Malcolm McDowell" } <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> ] ] } }
  94. 94. { "id": 1, "picture": "images/user_1.png",<div id=”user”>Hi, Paul Thomas Anderson</div> "age": 70, "name": "Stanley Kubrick", "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": , "name": } <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> ] }
  95. 95. { "id": 1, "picture": "images/user_1.png",<div id=”user”>Hi, Paul Thomas Anderson</div> "age": 70, "name": "Stanley Kubrick", "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": 4 , "name": "Daniel Day Lewis" } <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> ] }
  96. 96. { "id": 1, "picture": "images/user_1.png",<div id=”user”>Hi, Paul Thomas Anderson</div> "age": 70, "name": "Stanley Kubrick", "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": 4 , "name": "Daniel Day Lewis" } <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> ] }
  97. 97. { "id": 1, "picture": "images/user_1.png",<div id=”user”>Hi, Paul Thomas Anderson</div> "age": 70, "name": "Stanley Kubrick", "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": 4 , "name": "Daniel Day Lewis" } ] } ] }
  98. 98. { "id": 1, "picture": "images/user_1.png",<div id=”user”>Hi, Paul Thomas Anderson</div> "age": 70, "name": "Stanley Kubrick", "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": 4 , "name": "Daniel Day Lewis" }<div id=”friends”> <span id=”count”>You have 1 friend:</span> ] <ul> } <li>Daniel Day Lewis</li> </ul></div> ] }
  99. 99. { "id": 1, "picture": "images/user_1.png",<div id=”user”>Hi, Paul Thomas Anderson</div> "age": 70, "name": "Stanley Kubrick", "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": 4 , "name": "Daniel Day Lewis" }<div id=”friends”> <span id=”count”>You have 1 friend:</span> ] <ul> } <li>Daniel Day Lewis</li> </ul></div> ] }
  100. 100. BACKBONE IN ACTION
  101. 101. View Layout Container
  102. 102. Title View View Layout Container
  103. 103. Title View View Layout Container Day Views
  104. 104. Title View Time Control View View Layout Container Day Views
  105. 105. Title View Time Control View Chosen Time View View Layout Container Day Views
  106. 106. Event
  107. 107.  Calendar Month
  108. 108.  
  109. 109.  |
  110. 110.  
  111. 111.  Week
  112. 112.  
  113. 113.  |
  114. 114.  
  115. 115.  Day
  116. 116.  -February-
  117. 117.   M T W TH F S SU 1 2 3 4 5 6 7 8 9 10 11 12 13 1415 16 17 18 19 20 21 22 23 24 25 26 27 28
  118. 118. [{ id: 1, name: Doctors Appt, Event
  119. 119.  Calendar Month
  120. 120.  
  121. 121.  |
  122. 122.  
  123. 123.  Week
  124. 124.  
  125. 125.  |
  126. 126.  
  127. 127.  Day where: Dentist, date: 02-02-2013,
  128. 128.  -February-
  129. 129.   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}]
  130. 130. [{ id: 1, name: Doctors Appt, Event
  131. 131.  Calendar Month
  132. 132.  
  133. 133.  |
  134. 134.  
  135. 135.  Week
  136. 136.  
  137. 137.  |
  138. 138.  
  139. 139.  Day where: Dentist, date: 02-02-2013,
  140. 140.  -February-
  141. 141.   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
  142. 142.   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
  143. 143.   Buy
  144. 144.   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
  145. 145.  }] Vet
  146. 146. [{ id: 1, name: Doctors Appt, Event
  147. 147.  Calendar Month
  148. 148.  
  149. 149.  |
  150. 150.  
  151. 151.  Week
  152. 152.  
  153. 153.  |
  154. 154.  
  155. 155.  Day where: Dentist, date: 02-02-2013,
  156. 156.  -February-
  157. 157.   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
  158. 158.   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
  159. 159.   Buy
  160. 160.   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
  161. 161.  }] Vet
  162. 162. [{ id: 1, name: Doctors Appt, Event
  163. 163.  Calendar Month
  164. 164.  
  165. 165.  |
  166. 166.  
  167. 167.  Week
  168. 168.  
  169. 169.  |
  170. 170.  
  171. 171.  Day where: Dentist, date: 02-02-2013,

×