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

1. BACKBONE JS { Journey to the Front End } Brian Mann @backbonerails BackboneRails.com

2. MY EXPERIENCE WITH BACKBONE

3. 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

4. BACKBONE IN A NUTSHELL

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

7. SHOW DON’T TELL

9. Pandora Google Analytics WuFoo Rdio

10. Google Analytics 1. Loading feedback while fetching data from server

11. Google Analytics 1. Loading feedback while fetching data from server

12. Google Analytics 2. Dialog Selection Events

13. Google Analytics 2. Dialog Selection Events

14. WuFoo 1. Picked up and dragged “Single Line Text”

15. WuFoo 1. Picked up and dragged “Single Line Text”

16. WuFoo 2. Passively saved to server, displayed single line text

17. WuFoo 2. Passively saved to server, displayed single line text

18. WuFoo 3. Two Way Data Binding

19. WuFoo 3. Two Way Data Binding

20. WuFoo 4. Immediate Selection Feedback

21. WuFoo 4. Immediate Selection Feedback

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

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

24. Rdio 2. Clicking “Artist” to sort songs by Artist

25. Rdio 2. Clicking “Artist” to sort songs by Artist

26. Rdio 3. Shows loading spinner while fetching new data

27. Rdio 3. Shows loading spinner while fetching new data

28. Rdio 4. New collection is shown, URL is updated

29. Rdio 4. New collection is shown, URL is updated

30. EVOLUTION OF THE WEB

31. http://www.serversrule.com/ before 2005 Stateless Servers

32. 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

33. http://www.serversrule.com/ My Awesome Site Link 1 | Link 2 | Link 3 Home Page before 2005 Stateless Servers

34. http://www.serversrule.com/ My Awesome Site Link 1 | Link 2 | Link 3 Home Page before 2005 Stateless Servers

35. http://www.serversrule.com/link1 My Awesome Site Link 1 | Link 2 | Link 3 Home Page before 2005 Stateless Servers

36. http://www.serversrule.com/link1 before 2005 Stateless Servers

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. 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

39. http://www.serversrule.com/link1 My Awesome Site Link 1 | Link 2 | Link 3 Link 1 - Content before 2005 Stateless Servers

40. http://www.serversrule.com/link1 My Awesome Site Link 1 | Link 2 | Link 3 Link 1 - Content before 2005 Stateless Servers

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

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

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

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

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

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

71. RELATIONSHIP BETWEEN VIEWS AND MODELS

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

75. { "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" } ] }

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", "address": "Hertfordshire England", "friends": [ { "id": 1, "name": "Malcolm McDowell" }, { "id": 2, "name": "Arthur C. Clarke" }, { "id": 3, "name": "Peter Sellers" } ] }

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" }, { "id": 2, "name": "Arthur C. Clarke" }, { "id": 3, "name": "Peter Sellers" } ] }

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. { "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> } ] }

80. { "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> } ] }

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. { "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> } ] }

83. { "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> } ] }

84. { "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> } ] }

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. { "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> } ] }

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": <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. { "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. { "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> } ] }

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", "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> } ] }

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", "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> } ] }

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. { "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> } ] ] } }

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": 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> ] ] } }

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": , "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> ] }

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. { "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> ] }

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" } ] } ] }

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. { "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> ] }

101. BACKBONE IN ACTION

102. View Layout Container

103. Title View View Layout Container

104. Title View View Layout Container Day Views

105. Title View Time Control View View Layout Container Day Views

106. Title View Time Control View Chosen Time View View Layout Container Day Views

107. Event

108. Calendar Month

110. |

112. Week

114. |

116. Day

117. -February-

118. 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

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

120. Calendar Month

122. |

124. Week

126. |

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

129. -February-

130. 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 }]

132. Calendar Month

134. |

136. Week

138. |

141. -February-

142. 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

143. 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

144. Buy

145. 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

146. }] Vet

148. Calendar Month

150. |

152. Week

154. |

157. -February-

160. Buy

162. }] Vet

164. Calendar Month

166. |

168. Week

170. |

173. -February-

176. Buy

178. }] Vet

180. Calendar Month

182. |

184. Week

186. |

189. -February-

192. Buy

194. }] Vet

196. Calendar Month

198. |

200. Week

202. |

205. -February-

208. Buy

210. }] Vet

212. Calendar Month

214. |

216. Week

218. |

221. -February-

224. Buy

226. }] Vet

228. Calendar Month

230. |

232. Week

234. |

237. -February-

240. Buy

242. }] Vet

244. Calendar Month

246. |

248. Week

250. |

253. -February-

254. time_start: 2:00pm, time_end: 3:00pm },{ id: 2, M T W TH F S SU name: Ruby Meetup, 8 9 10 11 12 13 14 where: Centergy Bld, date: 02-13-2013, Buy

255. time_start: 7:00pm, time_end: 9:00pm Flowers! },{ id: 3, name: Buy Flowers!, where: null, 6pm date: 02-14-2013, time_start: null, },{ time_end: null 7pm id: 4, 7-9pm name: Visit Vet, where: Avian Center, 8pm Ruby

256. date: 02-24-2013, Meetup time_start: 10:00am, Centergy

257. }] time_end: 11:00am 9pm Bld

259. Calendar Month

261. |

263. Week

265. |

268. -February-

274. Calendar Month

276. |

278. Week

280. |

283. -February-

289. Calendar Month

291. |

293. Week

295. |

298. -February-

304. Calendar Month

306. |

308. Week

310. |

312. Day where: Dentist, date: 02-02-2013, -Valentines

313. Day- time_start: 2:00pm, time_end: 3:00pm },{ id: 2, name: Ruby Meetup, Edit

314. Event February

315. 14,

316. 2013 where: Centergy Bld, date: 02-13-2013, time_start: 7:00pm, time_end: 9:00pm Name Buy

317. Flowers! },{ id: 3, name: Buy Flowers!, Where where: null, date: 02-14-2013, time_start: null, Start time_end: null },{ id: 4, End name: Visit Vet, where: Avian Center, date: 02-24-2013, Save time_start: 10:00am, time_end: 11:00am }]

319. Calendar Month

321. |

323. Week

325. |

329. Event February

330. 14,

331. 2013 where: Centergy Bld, date: 02-13-2013, time_start: 7:00pm, time_end: 9:00pm Name Buy

332. Flowers! },{ id: 3, name: Buy Flowers!, Where Walmart where: null, date: 02-14-2013, time_start: null, Start 5:00

333. pM time_end: null },{ id: 4, End 6:00

334. pM name: Visit Vet, where: Avian Center, date: 02-24-2013, Save time_start: 10:00am, time_end: 11:00am }]

336. Calendar Month

338. |

340. Week

342. |

346. Event February

347. 14,

348. 2013 where: Centergy Bld, date: 02-13-2013, time_start: 7:00pm, time_end: 9:00pm Name },{ id: 3, name: Buy Flowers!, Where Walmart where: null, date: 02-14-2013, time_start: null, Start 5:00

352. Calendar Month

354. |

356. Week

358. |

362. Event February

363. 14,

364. 2013 where: Centergy Bld, date: 02-13-2013, time_start: 7:00pm, time_end: 9:00pm Name Chocolate },{ id: 3, name: Buy Flowers!, Where Walmart where: null, date: 02-14-2013, time_start: null, Start 5:00

368. Calendar Month

370. |

372. Week

374. |

378. Event February

379. 14,

380. 2013 where: Centergy Bld, date: 02-13-2013, time_start: 7:00pm, time_end: 9:00pm Name Chocolate },{ id: 3, name: Buy Flowers!, Where Walmart where: null, date: 02-14-2013, time_start: null, Start 5:00

384. Calendar Month

386. |

388. Week

390. |

394. Event February

395. 14,

396. 2013 where: Centergy Bld, date: 02-13-2013, time_start: 7:00pm, time_end: 9:00pm Name Chocolate },{ id: 3, name: Chocolate, Where Walmart where: Walmart, date: 02-14-2013, time_start: 5:00pm, Start 5:00

397. pM time_end: 6:00pm },{ id: 4, End 6:00

400. Calendar Month

402. |

404. Week

406. |

410. Event February

411. 14,

412. 2013 where: Centergy Bld, date: 02-13-2013, time_start: 7:00pm, time_end: 9:00pm Name Chocolate },{ id: 3, name: Chocolate, Where Walmart where: Walmart, date: 02-14-2013, time_start: 5:00pm, Start 5:00

413. pM time_end: 6:00pm },{ id: 4, End 6:00

416. Calendar Month

418. |

420. Week

422. |

424. Day where: Dentist, date: 02-02-2013, -February- time_start: 2:00pm, time_end: 3:00pm },{ id: 2, M T W TH F S SU name: Ruby Meetup, 8 9 10 11 12 13 14 where: Centergy Bld, date: 02-13-2013, time_start: 7:00pm, time_end: 9:00pm 5pm },{ 5-6pm id: 3, name: Chocolate, Chocolate where: Walmart, 6pm Walmart date: 02-14-2013, time_start: 5:00pm, },{ time_end: 6:00pm 7pm id: 4, 7-9pm name: Visit Vet, where: Avian Center, 8pm Ruby

427. CHANGES TO THE SERVER

428. Client Server M M V V C C

429. Client Server JS ON M M V V C C JS ON

430. Server M C V div id=header-region/div div id=main-region/div JS ON div id=footer-region/div ON JS %= javascript_tag do % $(function() { App.start(); }); % end % V Client M C

431. TOOLS YOU’LL NEED

432. The Backbone of Backbone • JSON Generation • Bootstrapping Data • Dependency Management ‣ Folder / File Conventions ‣ Ensuring JS files load in the correct order • Environment Optimizations ‣ Concatenation ‣ Minification / Obfuscation • Precompiled JST Strategy Backbone JS: Journey to the Front End BACKBONERAILS.com

433. JSON GENERATION

434. Rabl https://github.com/nesquena/rabl ## models/user.rb class User ActiveRecord::Base has_many :posts attr_accessible :first_name, :last_name def full_name #{first_name} #{last_name} end end

435. Rabl https://github.com/nesquena/rabl ## models/user.rb class User ActiveRecord::Base has_many :posts attr_accessible :first_name, :last_name def full_name #{first_name} #{last_name} end ## views/users/index.json.rabl end collection @users attributes :id, :first_name, :last_name, :full_name, :date_created node do |user| { :date_created_formatted = user.date_created.to_s(:db), :date_created_ago = time_ago_in_words(user.date_created) } end child :posts do attributes :id, :title, :body end

436. Rabl [{ id: 1, https://github.com/nesquena/rabl first_name: Brian, last_name: Mann, ## models/user.rb full_name: Brian Mann, class User ActiveRecord::Base 2013-02-02T18:35:35.511, date_created: has_many :posts date_created_formatted: 2013-02-02 1:35:35, date_created_ago: about 2 weeks, posts: [{ attr_accessible :first_name, :last_name id: 100, title: BackboneRails Released!, def full_name body: go download them., #{first_name}}]#{last_name} end },{ ## views/users/index.json.rabl id: 2, end first_name: Jennifer, last_name: Shehane, collection @users full_name: Jennifer Shehane, date_created: 2013-02-10T22:13:46.245, attributes :id, :first_name,2013-02-10 5:13:46, date_created_formatted: :last_name, :full_name, :date_created date_created_ago: 3 days, nodeposts: [{ do |user| { id: 101, :date_created_formatted = user.date_created.to_s(:db), title: You misspelled ‘tenants’ in Ep02, :date_created_ago ‘tenets’, body: should be = time_ago_in_words(user.date_created) } },{ id: 102, end title: Uhhh....., body: It is misspelled on every single slide :D, child :posts do }] attributes :id, :title, :body }] end

437. BOOTSTRAPPING DATA

438. head ... script window.gon = {}; gon.current_user = { first_name:Brian, last_name:Mann, account_id:1, user_id:1013, is_admin:true }; /script ... /head Making Data Available on Load

439. WORKING WITH JAVASCRIPT FILES

440. //= require jquery //= require lib/underscore //= require lib/backbone //= require lib/marionette //= require_tree ./backbone/config //= require backbone/app //= require_tree ./backbone/entities //= require_tree ./backbone/mixins //= require_tree ./backbone/views //= require_tree ./backbone/components //= require_tree ./backbone/apps 1. Dependency Management

445. 2. Concatenation script src=/assets/jquery.js?body=1 type=text/javascript/script script src=/assets/lib/underscore.js?body=1 type=text/javascript/script script src=/assets/lib/backbone.js?body=1 type=text/javascript/script script src=/assets/lib/marionette.js?body=1 type=text/javascript/script script src=/assets/backbone/config/marionette/renderer.js?body=1 type=text/javascript/script script src=/assets/backbone/app.js?body=1 type=text/javascript/script script src=/assets/backbone/entities/_base/collections.js?body=1 type=text/javascript/script script src=/assets/backbone/entities/_base/models.js?body=1 type=text/javascript/script script src=/assets/backbone/entities/header.js?body=1 type=text/javascript/script script src=/assets/backbone/apps/footer/footer_app.js?body=1 type=text/javascript/script script src=/assets/backbone/apps/footer/show/show_controller.js?body=1 type=text/javascript/script script src=/assets/backbone/apps/footer/show/show_view.js?body=1 type=text/javascript/script script src=/assets/backbone/apps/header/header_app.js?body=1 type=text/javascript/script script src=/assets/backbone/apps/header/list/list_controller.js?body=1 type=text/javascript/script script src=/assets/backbone/apps/header/list/list_view.js?body=1 type=text/javascript/script script src=/assets/backbone/apps/header/list/templates/_header.js?body=1 type=text/javascript/script script src=/assets/backbone/apps/header/list/templates/headers.js?body=1 type=text/javascript/script script src=/assets/application.js?body=1 type=text/javascript/script Development

446. 2. Concatenation script src=/assets/application-8c8a70f80dfbcf26505f7e9ee9a0267d.js type=text/javascript/script Production

447. (function(e,t){function P(e){var t=e.length,n=b.type(e);return b.isWindow(e)?!1:e.nodeType===1t?!0:n===array||n!==function(t===0||typeof t==numbert0t-1 in e)}function B(e){var t=H[e]={};return b.each(e.match(E)||[],function(e,n){t[n]=!0}),t}function I(e,n,r,i){if(!b.acceptData(e))return;var s,o,u=b.expando,a=typeof n==string,f=e.nodeType,c=f?b.cache:e,h=f?e[u]:e[u]u;if((!h||!c[h]||!i!c[h].data)ar===t)return;h||(f?e[u]=h=l.pop()||b.guid+ +:h=u),c[h]||(c[h]={},f||(c[h].toJSON=b.noop));if(typeof n==object||typeof n==function)i?c[h]=b.extend(c[h],n):c[h].data=b.extend(c[h].data,n);return s=c[h],i|| (s.data||(s.data={}),s=s.data),r!==t(s[b.camelCase(n)]=r),a?(o=s[n],o==null(o=s[b.camelCase(n)])):o=s,o}function q(e,t,n){if(!b.acceptData(e))return;var r,i,s,o=e.nodeType,u=o?b.cache:e,a=o?e[b.expando]:b.expando;if(!u[a])return;if(t){s=n?u[a]:u[a].data;if(s){b.isArray(t)?t=t.concat(b.map(t,b.camelCase)):t in s?t=[t]: (t=b.camelCase(t),t in s?t=[t]:t=t.split( ));for(r=0,i=t.length;ri;r++)delete s[t[r]];if(!(n?U:b.isEmptyObject)(s))return}}if(!n){delete u[a].data;if(!U(u[a]))return}o? b.cleanData([e],!0):b.support.deleteExpando||u!=u.window?delete u[a]:u[a]=null}function R(e,n,r){if(r===te.nodeType===1){var i=data-+n.replace(F,- $1).toLowerCase();r=e.getAttribute(i);if(typeof r==string){try{r=r===true?!0:r===false?!1:r===null?null:+r+===r?+r:j.test(r)?b.parseJSON(r):r}catch(s){} b.data(e,n,r)}else r=t}return r}function U(e){var t;for(t in e){if(t===datab.isEmptyObject(e[t]))continue;if(t!==toJSON)return!1}return!0}function it(){return!0} function st(){return!1}function ct(e,t){do e=e[t];while(ee.nodeType!==1);return e}function ht(e,t,n){t=t||0;if(b.isFunction(t))return b.grep(e,function(e,r){var i=!! t.call(e,r,e);return i===n});if(t.nodeType)return b.grep(e,function(e){return e===t===n});if(typeof t==string){var r=b.grep(e,function(e){return e.nodeType===1});if(at.test(t))return b.filter(t,r,!n);t=b.filter(t,r)}return b.grep(e,function(e){return b.inArray(e,t)=0===n})}function pt(e){var t=dt.split(|),n=e.createDocumentFragment();if(n.createElement)while(t.length)n.createElement(t.pop());return n}function Mt(e,t){return e.getElementsByTagName(t)[0]||e.appendChild(e.ownerDocument.createElement(t))}function _t(e){var t=e.getAttributeNode(type);return e.type=(tt.specified) +/+e.type,e}function Dt(e){var t=Ct.exec(e.type);return t?e.type=t[1]:e.removeAttribute(type),e}function Pt(e,t){var n,r=0;for(;(n=e[r])!=null;r+ +)b._data(n,globalEval,!t||b._data(t[r],globalEval))}function Ht(e,t){if(t.nodeType!==1||!b.hasData(e))return;var n,r,i,s=b._data(e),o=b._data(t,s),u=s.events;if(u) {delete o.handle,o.events={};for(n in u)for(r=0,i=u[n].length;ri;r++)b.event.add(t,n,u[n][r])}o.data(o.data=b.extend({},o.data))}function Bt(e,t){var n,r,i;if(t.nodeType!==1)return;n=t.nodeName.toLowerCase();if(!b.support.noCloneEventt[b.expando]){i=b._data(t);for(r in i.events)b.removeEvent(t,r,i.handle);t.removeAttribute(b.expando)}if(n===scriptt.text!==e.text)_t(t).text=e.text,Dt(t);else if(n===object)t.parentNode(t.outerHTML=e.outerHTML),b.support.html5Clonee.innerHTML!b.trim(t.innerHTML)(t.innerHTML=e.innerHTML);else if(n===inputxt.test(e.type))t.defaultChecked=t.checked=e.checked,t.value!==e.value(t.value=e.value);else if(n===option)t.defaultSelected=t.selected=e.defaultSelected;else if(n===input||n===textarea)t.defaultValue=e.defaultValue}function jt(e,n){var r,s,o=0,u=typeof e.getElementsByTagName!==i?e.getElementsByTagName(n||*):typeof e.querySelectorAll!==i?e.querySelectorAll(n||*):t;if(!u)for(u=[],r=e.childNodes||e;(s=r[o])! =null;o++)!n||b.nodeName(s,n)?u.push(s):b.merge(u,jt(s,n));return n===t||nb.nodeName(e,n)?b.merge([e],u):u}function Ft(e) {xt.test(e.type)(e.defaultChecked=e.checked)}function tn(e,t){if(t in e)return t;var n=t.charAt(0).toUpperCase()+t.slice(1),r=t,i=en.length;while(i--){t=en[i]+n;if(t in e)return t}return r}function nn(e,t){return e=t||e,b.css(e,display)===none||!b.contains(e.ownerDocument,e)}function rn(e,t){var n,r,i,s=[],o=0,u=e.length;for(;ou;o++){r=e[o];if(!r.style)continue;s[o]=b._data(r,olddisplay),n=r.style.display,t?(! 3. Minification / Obfuscation

448. 4. CoﬀeeScript

449. 4. CoﬀeeScript @App.module UsersApp.List, (List, App, Backbone, Marionette, $, _) - List.Controller = listUsers: - users = App.request user:entities @layout = @getLayoutView() @layout.on show, = @showPanel users @listUsers users App.mainRegion.show @layout listUsers: (users) - usersView = @getUsersView users usersView.on itemview:edit:user, (iv, user) - App.vent.trigger edit:user, user @layout.tableRegion.show usersView getUsersView: (users) - new List.Users collection: users getLayoutView: - new List.Layout

450. JAVASCRIPT TEMPLATING STRATEGY

451. Handling the HTML • Templates hold the actual HTML markup • Used just like server side templates ‣ Usually stored as a separate file ‣ Interpolate model/collection properties • Various template languages: ‣ ECO (Embedded Coﬀeescript) ‣ Handlebars / Mustache ‣ Underscore • Server is responsible for precompiling them Backbone JS: Journey to the Front End BACKBONERAILS.com

452. ## users/templates/show.jst.eco %- @linkTo Routes.user_path(@id), Class: button button-mini, - % i class='icons-user'/i Show User % end %

453. ## users/templates/show.jst.eco %- @linkTo Routes.user_path(@id), Class: button button-mini, - % i class='icons-user'/i Show User % end % ## users/show.html.erb %= link_to user_path(@user), class: button button-mini do % i class='icons-user'/i Show User % end %

454. ## users/templates/show.jst.eco %- @linkTo Routes.user_path(@id), Class: button button-mini, - % i class='icons-user'/i Show User % end % ## users/show.html.erb %= link_to user_path(@user), class: button button-mini do % i class='icons-user'/i Show User % end % !-- a href=users/1 class=button button-mini i class='icons-user'/i Show User /a --

455. EVERYTHING ELSE STAYS THE SAME

456. APPLICATION ARCHITECTURE

457. APPLICATION

458. APPLICATION MODULE 1 MODULE 2 MODULE 3

459. APPLICATION USERS LEADS APPOINTMENTS

460. APPLICATION USERS LEADS APPOINTMENTS CONTROLLERS

461. APPLICATION USERS LEADS APPOINTMENTS LIST SHOW NEW LIST SHOW NEW LIST SHOW NEW

462. APPLICATION USERS LEADS APPOINTMENTS LIST SHOW NEW LIST SHOW NEW LIST SHOW NEW VIEWS / ENTITIES

463. APPLICATION USERS LEADS APPOINTMENTS LIST SHOW NEW LIST SHOW NEW LIST SHOW NEW V E V E V E V E V E V E V E V E V E

464. APPLICATION USERS LEADS APPOINTMENTS LIST SHOW NEW LIST SHOW NEW LIST SHOW NEW V E V E V E V E V E V E V E V E V E TEMPLATES

465. APPLICATION USERS LEADS APPOINTMENTS LIST SHOW NEW LIST SHOW NEW LIST SHOW NEW V E V E V E V E V E V E V E V E V E T T T T T T T T T

466. APPLICATION USERS LEADS APPOINTMENTS LIST SHOW NEW LIST SHOW NEW LIST SHOW NEW V E V E V E V E V E V E V E V E V E T T T T T T T T T

467. Brian Mann @backbonerails BackboneRails.com Screencasts available for streaming and downloading

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

More Related Content

What's hot (12)

Viewers also liked (6)

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

Recently uploaded (20)

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