Backbone + Rails - Journey to the Front End [Atlanta Ruby Meetup]

795 views

Published on

I gave this talk Feb 13th, 2013 at the Atlanta Ruby Meetup - covering Rails + Backbone.js

In this presentation I'll cover how well Ruby on Rails + Backbone work together. There are a lot of misconceptions when moving logic to the client, and how that changes the backend.

Rails has a lot of tools that make this a breeze, and with the right setup, working with javascript templates, using Rails view helpers, and generating JSON is super simple.

Rails comes with everything you need to deploy to production, minify, concatenate, and obfuscate all your Javascript files, and even load them in the proper order via the Asset Pipeline.

See videos and screencasts at:
http://www.backbonerails.com

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

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

No notes for slide

Backbone + Rails - Journey to the Front End [Atlanta Ruby Meetup]

  1. 1. BACKBONE + RAILS { Journey to the Front End }
  2. 2. MY BACKGROUND
  3. 3. Looking Back • Came from MVC PHP :-( before 2011 ‣ CodeIgniter • Built internal CRM’s • Used jQuery / AJAX for front end logic ‣ Spaghetti code ‣ One giant file ‣ Perplexing... never felt right • Started Ruby on Rails - late 2011Backbone + Rails: Journey to the Front End
  4. 4. FIRST IMPRESSIONS
  5. 5. BACKENDAWESOME
  6. 6. FRONTENDTERRIBLE
  7. 7. GOOD-LUCK WITH JQUERY_UJS
  8. 8. THE PROBLEM DOMAIN
  9. 9. Pandora Google AnalyticsWuFoo Rdio
  10. 10. (UN)FORTUNATELY THAT’S OUR APP
  11. 11. BETTER.
  12. 12. FASTER.
  13. 13. CHEAPER.
  14. 14. ...and with only 1 developer
  15. 15. THIS AIN’T GONNA WORK
  16. 16. What solves this problem? • + Give logical structure to the DOM • + Separate behavior, presentation, and implementation • + Automatically keep view changes in sync • + Prevent jQuery spaghetti code callbacksBackbone + Rails: Journey to the Front End
  17. 17. What solves this problem? • + Give logical structure to the DOM • + Separate behavior, presentation, and implementation • + Automatically keep view changes in sync • + Prevent jQuery spaghetti code callbacks = Javascript MVC FrameworksBackbone + Rails: Journey to the Front End
  18. 18. Difficult Questions • What’s the best Framework? • What are the differences between... ‣ Backbone JS Jan 2012 ‣ Ember JS ‣ Knockout JS ‣ ... Spine ... Batman ... Angular ...Backbone + Rails: Journey to the Front End
  19. 19. Why I Chose Backbone • Highly successful production-ready track record ‣ Major players using it successfully • Non-intimidating documentation • Seemed to be built for Rails out of the box ‣ REST API - No Configuration • Awesome community support ‣ Lots of tutorials ‣ Stack OverflowBackbone + Rails: Journey to the Front End
  20. 20. How Backbone Works • Introduces the concepts of Client Side MVC ‣ View - managing particular DOM node (template) ‣ Models / Collections - storing state of entities ‣ Router - Interprets client side URL / fires events ‣ Events - communication mechanism between components • The Ramifications ‣ No more mixed presentation and behavior ‣ You’re in control of everything, all interactions ‣ Enough basic structure to build widgets / small SPA’sBackbone + Rails: Journey to the Front End
  21. 21. EXAMPLE USE CASE
  22. 22. [{ id: 1, name: "Doctors Appt", Event
  23. 23.  Calendar Month
  24. 24.  
  25. 25.  |
  26. 26.  
  27. 27.  Week
  28. 28.  
  29. 29.  |
  30. 30.  
  31. 31.  Day where: Dentist, date: 02-02-2013, -February- 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
  32. 32.   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
  33. 33.   Buy
  34. 34.   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
  35. 35.  }] Vet
  36. 36. [{ id: 1, name: Doctors Appt, Event
  37. 37.  Calendar Month
  38. 38.  
  39. 39.  |
  40. 40.  
  41. 41.  Week
  42. 42.  
  43. 43.  |
  44. 44.  
  45. 45.  Day where: Dentist, date: 02-02-2013, -February- 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
  46. 46.   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
  47. 47.   Buy
  48. 48.   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
  49. 49.  }] Vet
  50. 50. [{ id: 1, name: Doctors Appt, Event
  51. 51.  Calendar Month
  52. 52.  
  53. 53.  |
  54. 54.  
  55. 55.  Week
  56. 56.  
  57. 57.  |
  58. 58.  
  59. 59.  Day where: Dentist, date: 02-02-2013, -February- 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
  60. 60.   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
  61. 61.   Buy
  62. 62.   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
  63. 63.  }] Vet
  64. 64. [{ id: 1, name: Doctors Appt, Event
  65. 65.  Calendar Month
  66. 66.  
  67. 67.  |
  68. 68.  
  69. 69.  Week
  70. 70.  
  71. 71.  |
  72. 72.  
  73. 73.  Day where: Dentist, date: 02-02-2013, -February- 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
  74. 74.   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
  75. 75.   Buy
  76. 76.   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
  77. 77.  }] Vet
  78. 78. [{ id: 1, name: Doctors Appt, Event
  79. 79.  Calendar Month
  80. 80.  
  81. 81.  |
  82. 82.  
  83. 83.  Week
  84. 84.  
  85. 85.  |
  86. 86.  
  87. 87.  Day where: Dentist, date: 02-02-2013, -February- 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
  88. 88.   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
  89. 89.   Buy
  90. 90.   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
  91. 91.  }] Vet
  92. 92. [{ id: 1, name: Doctors Appt, Event
  93. 93.  Calendar Month
  94. 94.  
  95. 95.  |
  96. 96.  
  97. 97.  Week
  98. 98.  
  99. 99.  |
  100. 100.  
  101. 101.  Day where: Dentist, date: 02-02-2013, -February- 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
  102. 102.   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
  103. 103.   Buy
  104. 104.   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
  105. 105.  }] Vet
  106. 106. [{ id: 1, name: Doctors Appt, Event
  107. 107.  Calendar Month
  108. 108.  
  109. 109.  |
  110. 110.  
  111. 111.  Week
  112. 112.  
  113. 113.  |
  114. 114.  
  115. 115.  Day where: Dentist, date: 02-02-2013, -February- 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
  116. 116.   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
  117. 117.   Buy
  118. 118.   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
  119. 119.  }] Vet
  120. 120. [{ id: 1, name: Doctors Appt, Event
  121. 121.  Calendar Month
  122. 122.  
  123. 123.  |
  124. 124.  
  125. 125.  Week
  126. 126.  
  127. 127.  |
  128. 128.  
  129. 129.  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, Buy
  130. 130.   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
  131. 131.   date: 02-24-2013, Meetup time_start: 10:00am, Centergy
  132. 132.  }] time_end: 11:00am 9pm Bld
  133. 133. [{ id: 1, name: Doctors Appt, Event
  134. 134.  Calendar Month
  135. 135.  
  136. 136.  |
  137. 137.  
  138. 138.  Week
  139. 139.  
  140. 140.  |
  141. 141.  
  142. 142.  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, Buy
  143. 143.   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
  144. 144.   date: 02-24-2013, Meetup time_start: 10:00am, Centergy
  145. 145.  }] time_end: 11:00am 9pm Bld
  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, -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, Buy
  156. 156.   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
  157. 157.   date: 02-24-2013, Meetup time_start: 10:00am, Centergy
  158. 158.  }] time_end: 11:00am 9pm Bld
  159. 159. [{ id: 1, name: Doctors Appt, Event
  160. 160.  Calendar Month
  161. 161.  
  162. 162.  |
  163. 163.  
  164. 164.  Week
  165. 165.  
  166. 166.  |
  167. 167.  
  168. 168.  Day where: Dentist, date: 02-02-2013, -Valentines
  169. 169.  Day- time_start: 2:00pm, time_end: 3:00pm},{ id: 2, name: Ruby Meetup, Edit
  170. 170.  Event February
  171. 171.  14,
  172. 172.  2013 where: Centergy Bld, date: 02-13-2013, time_start: 7:00pm, time_end: 9:00pm Name Buy
  173. 173.  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}]
  174. 174. [{ id: 1, name: Doctors Appt, Event
  175. 175.  Calendar Month
  176. 176.  
  177. 177.  |
  178. 178.  
  179. 179.  Week
  180. 180.  
  181. 181.  |
  182. 182.  
  183. 183.  Day where: Dentist, date: 02-02-2013, -Valentines
  184. 184.  Day- time_start: 2:00pm, time_end: 3:00pm},{ id: 2, name: Ruby Meetup, Edit
  185. 185.  Event February
  186. 186.  14,
  187. 187.  2013 where: Centergy Bld, date: 02-13-2013, time_start: 7:00pm, time_end: 9:00pm Name Buy
  188. 188.  Flowers!},{ id: 3, name: Buy Flowers!, Where Walmart where: null, date: 02-14-2013, time_start: null, Start 5:00
  189. 189.  pM time_end: null},{ id: 4, End 6:00
  190. 190.  pM name: Visit Vet, where: Avian Center, date: 02-24-2013, Save time_start: 10:00am, time_end: 11:00am}]
  191. 191. [{ id: 1, name: Doctors Appt, Event
  192. 192.  Calendar Month
  193. 193.  
  194. 194.  |
  195. 195.  
  196. 196.  Week
  197. 197.  
  198. 198.  |
  199. 199.  
  200. 200.  Day where: Dentist, date: 02-02-2013, -Valentines
  201. 201.  Day- time_start: 2:00pm, time_end: 3:00pm},{ id: 2, name: Ruby Meetup, Edit
  202. 202.  Event February
  203. 203.  14,
  204. 204.  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
  205. 205.  pM time_end: null},{ id: 4, End 6:00
  206. 206.  pM name: Visit Vet, where: Avian Center, date: 02-24-2013, Save time_start: 10:00am, time_end: 11:00am}]
  207. 207. [{ id: 1, name: Doctors Appt, Event
  208. 208.  Calendar Month
  209. 209.  
  210. 210.  |
  211. 211.  
  212. 212.  Week
  213. 213.  
  214. 214.  |
  215. 215.  
  216. 216.  Day where: Dentist, date: 02-02-2013, -Valentines
  217. 217.  Day- time_start: 2:00pm, time_end: 3:00pm},{ id: 2, name: Ruby Meetup, Edit
  218. 218.  Event February
  219. 219.  14,
  220. 220.  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
  221. 221.  pM time_end: null},{ id: 4, End 6:00
  222. 222.  pM name: Visit Vet, where: Avian Center, date: 02-24-2013, Save time_start: 10:00am, time_end: 11:00am}]
  223. 223. [{ id: 1, name: Doctors Appt, Event
  224. 224.  Calendar Month
  225. 225.  
  226. 226.  |
  227. 227.  
  228. 228.  Week
  229. 229.  
  230. 230.  |
  231. 231.  
  232. 232.  Day where: Dentist, date: 02-02-2013, -Valentines
  233. 233.  Day- time_start: 2:00pm, time_end: 3:00pm},{ id: 2, name: Ruby Meetup, Edit
  234. 234.  Event February
  235. 235.  14,
  236. 236.  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
  237. 237.  pM time_end: null},{ id: 4, End 6:00
  238. 238.  pM name: Visit Vet, where: Avian Center, date: 02-24-2013, Save time_start: 10:00am, time_end: 11:00am}]
  239. 239. [{ id: 1, name: Doctors Appt, Event
  240. 240.  Calendar Month
  241. 241.  
  242. 242.  |
  243. 243.  
  244. 244.  Week
  245. 245.  
  246. 246.  |
  247. 247.  
  248. 248.  Day where: Dentist, date: 02-02-2013, -Valentines
  249. 249.  Day- time_start: 2:00pm, time_end: 3:00pm},{ id: 2, name: Ruby Meetup, Edit
  250. 250.  Event February
  251. 251.  14,
  252. 252.  2013 where: Centergy Bld, date: 02-13-2013, time_start: 7:00pm, time_end: 9:00pm Name Chocolate},{ id: 3, name: Where Walmart where: date: 02-14-2013, time_start: Start 5:00
  253. 253.  pM time_end:},{ id: 4, End 6:00
  254. 254.  pM name: Visit Vet, where: Avian Center, date: 02-24-2013, Save time_start: 10:00am, time_end: 11:00am}]
  255. 255. [{ id: 1, name: Doctors Appt, Event
  256. 256.  Calendar Month
  257. 257.  
  258. 258.  |
  259. 259.  
  260. 260.  Week
  261. 261.  
  262. 262.  |
  263. 263.  
  264. 264.  Day where: Dentist, date: 02-02-2013, -Valentines
  265. 265.  Day- time_start: 2:00pm, time_end: 3:00pm},{ id: 2, name: Ruby Meetup, Edit
  266. 266.  Event February
  267. 267.  14,
  268. 268.  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
  269. 269.  pM time_end: 6:00pm},{ id: 4, End 6:00
  270. 270.  pM name: Visit Vet, where: Avian Center, date: 02-24-2013, Save time_start: 10:00am, time_end: 11:00am}]
  271. 271. [{ id: 1, name: Doctors Appt, Event
  272. 272.  Calendar Month
  273. 273.  
  274. 274.  |
  275. 275.  
  276. 276.  Week
  277. 277.  
  278. 278.  |
  279. 279.  
  280. 280.  Day where: Dentist, date: 02-02-2013, -Valentines
  281. 281.  Day- time_start: 2:00pm, time_end: 3:00pm},{ id: 2, name: Ruby Meetup, Edit
  282. 282.  Event February
  283. 283.  14,
  284. 284.  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
  285. 285.  pM time_end: 6:00pm},{ id: 4, End 6:00
  286. 286.  pM name: Visit Vet, where: Avian Center, date: 02-24-2013, Save time_start: 10:00am, time_end: 11:00am}]
  287. 287. [{ id: 1, name: Doctors Appt, Event
  288. 288.  Calendar Month
  289. 289.  
  290. 290.  |
  291. 291.  
  292. 292.  Week
  293. 293.  
  294. 294.  |
  295. 295.  
  296. 296.  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, 5-6pm time_start: 7:00pm, Chocolate time_end: 9:00pm Walmart},{ id: 3, name: Chocolate, where: Walmart, 6pm 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
  297. 297.   date: 02-24-2013, Meetup time_start: 10:00am, Centergy
  298. 298.  }] time_end: 11:00am 9pm Bld
  299. 299. Client ServerM M V VC C
  300. 300. Client Server JS ONM M V VC C JS ON
  301. 301. 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 % VClient M C
  302. 302. FREQUENTLY ASKED QUESTIONS
  303. 303. Do you still need Rails? • Asset Pipeline ! • No more awesome helpers right? ‣ wrong. • Routes.rb / I18n / Controller Instance Vars • Precompiled JST • ActiveRecord / Controllers / GemsBackbone + Rails: Journey to the Front End
  304. 304. EVERYTHING ELSE STAYS THE SAME
  305. 305. IDEAL API
  306. 306. JSON GENERATION
  307. 307. { 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 } ]}
  308. 308. { id: 1, picture: images/user_1.png,div id=”user”Hello, 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 } ] }
  309. 309. { id: 1, picture: images/user_1.png,div id=”user”Hello, 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 } ] }
  310. 310. { id: 1, picture: images/user_1.png,div id=”user”Hello, 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 liMalcolm McDowell/li }, liArthur C. Clarke/li { liPeter Sellers/li id: 3, /ul name: Peter Sellers /div } ] }
  311. 311. Rabl https://github.com/nesquena/rabl## models/user.rbclass User ActiveRecord::Base has_many :posts attr_accessible :first_name, :last_name def full_name #{first_name} #{last_name} endend
  312. 312. Rabl https://github.com/nesquena/rabl## models/user.rbclass User ActiveRecord::Base has_many :posts attr_accessible :first_name, :last_name def full_name #{first_name} #{last_name} end ## views/users/index.json.rablend 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
  313. 313. 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
  314. 314. ASSET PIPELINE
  315. 315. //= 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/apps1. Dependency Management
  316. 316. //= 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/apps1. Dependency Management
  317. 317. //= 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/apps1. Dependency Management
  318. 318. //= 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/apps1. Dependency Management
  319. 319. //= 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/apps1. Dependency Management
  320. 320. 2. Concatenationscript src=/assets/jquery.js?body=1 type=text/javascript/scriptscript src=/assets/lib/underscore.js?body=1 type=text/javascript/scriptscript src=/assets/lib/backbone.js?body=1 type=text/javascript/scriptscript src=/assets/lib/marionette.js?body=1 type=text/javascript/scriptscript src=/assets/backbone/config/marionette/renderer.js?body=1 type=text/javascript/scriptscript src=/assets/backbone/app.js?body=1 type=text/javascript/scriptscript src=/assets/backbone/entities/_base/collections.js?body=1 type=text/javascript/scriptscript src=/assets/backbone/entities/_base/models.js?body=1 type=text/javascript/scriptscript src=/assets/backbone/entities/header.js?body=1 type=text/javascript/scriptscript src=/assets/backbone/apps/footer/footer_app.js?body=1 type=text/javascript/scriptscript src=/assets/backbone/apps/footer/show/show_controller.js?body=1 type=text/javascript/scriptscript src=/assets/backbone/apps/footer/show/show_view.js?body=1 type=text/javascript/scriptscript src=/assets/backbone/apps/header/header_app.js?body=1 type=text/javascript/scriptscript src=/assets/backbone/apps/header/list/list_controller.js?body=1 type=text/javascript/scriptscript src=/assets/backbone/apps/header/list/list_view.js?body=1 type=text/javascript/scriptscript src=/assets/backbone/apps/header/list/templates/_header.js?body=1 type=text/javascript/scriptscript src=/assets/backbone/apps/header/list/templates/headers.js?body=1 type=text/javascript/scriptscript src=/assets/application.js?body=1 type=text/javascript/script Development
  321. 321. 2. Concatenationscript src=/assets/application-8c8a70f80dfbcf26505f7e9ee9a0267d.js type=text/javascript/script Production
  322. 322. (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||typeoft==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;vars,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;varr,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){returne.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){vart=dt.split(|),n=e.createDocumentFragment();if(n.createElement)while(t.length)n.createElement(t.pop());return n}function Mt(e,t){returne.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){varn,r,i;if(t.nodeType!==1)return;n=t.nodeName.toLowerCase();if(!b.support.noCloneEventt[b.expando]){i=b._data(t);for(r ini.events)b.removeEvent(t,r,i.handle);t.removeAttribute(b.expando)}if(n===scriptt.text!==e.text)_t(t).text=e.text,Dt(t);elseif(n===object)t.parentNode(t.outerHTML=e.outerHTML),b.support.html5Clonee.innerHTML!b.trim(t.innerHTML)(t.innerHTML=e.innerHTML);elseif(n===inputxt.test(e.type))t.defaultChecked=t.checked=e.checked,t.value!==e.value(t.value=e.value);elseif(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=typeofe.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(tin 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){varn,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
  323. 323. 4. CoffeeScript
  324. 324. 4. CoffeeScript@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
  325. 325. JAVASCRIPT TEMPLATES
  326. 326. ## users/templates/show.jst.eco%- @linkTo Routes.user_path(@id), Class: button button-mini, - % i class=icons-user/i Show User% end %
  327. 327. ## 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 %
  328. 328. ## 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--
  329. 329. MAJOR CHALLENGES
  330. 330. Technical Difficulties • Huge mental shi / nuanced decisions ‣ When / how to load server resources ‣ Handling Routing w/Dialogs ‣ Complex nested layouts • Lack of Application Infrastructure May 2012 ‣ Slow, Painful Development ‣ Bug Recursions ‣ Edge Cases ‣ Excess BoilerplateBackbone + Rails: Journey to the Front End
  331. 331. BACKBONE ISUNOPINIONATED
  332. 332. BACKBONE STACK MARIONETTE STACK Routers Application Messaging Bus Views VS Modules Models App Router Templates Controllers Specialized Views Layouts Regions Composite Views Collection Views Item Views Models Templates
  333. 333. APPLICATION
  334. 334. APPLICATIONMODULE 1 MODULE 2 MODULE 3
  335. 335. APPLICATIONUSERS LEADS APPOINTMENTS
  336. 336. APPLICATIONUSERS LEADS APPOINTMENTS CONTROLLERS
  337. 337. APPLICATION USERS LEADS APPOINTMENTSLIST SHOW NEW LIST SHOW NEW LIST SHOW NEW
  338. 338. APPLICATION USERS LEADS APPOINTMENTSLIST SHOW NEW LIST SHOW NEW LIST SHOW NEW VIEWS / ENTITIES
  339. 339. APPLICATION USERS LEADS APPOINTMENTSLIST SHOW NEW LIST SHOW NEW LIST SHOW NEWV E V E V E V E V E V E V E V E V E
  340. 340. APPLICATION USERS LEADS APPOINTMENTSLIST SHOW NEW LIST SHOW NEW LIST SHOW NEWV E V E V E V E V E V E V E V E V E TEMPLATES

×