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

1. BACKBONE + RAILS { Journey to the Front End }

2. MY BACKGROUND

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 2011 Backbone + Rails: Journey to the Front End

4. FIRST IMPRESSIONS

5. BACKEND AWESOME

6. FRONTEND TERRIBLE

7. GOOD-LUCK WITH JQUERY_UJS

8. THE PROBLEM DOMAIN

10. Pandora Google Analytics WuFoo Rdio

11. (UN)FORTUNATELY THAT’S OUR APP

12. BETTER.

13. FASTER.

14. CHEAPER.

15. ...and with only 1 developer

16. THIS AIN’T GONNA WORK

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 Backbone + Rails: Journey to the Front End

18. 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 Frameworks Backbone + Rails: Journey to the Front End

19. Diﬀicult Questions • What’s the best Framework? • What are the diﬀerences between... ‣ Backbone JS Jan 2012 ‣ Ember JS ‣ Knockout JS ‣ ... Spine ... Batman ... Angular ... Backbone + Rails: Journey to the Front End

20. 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 Overflow Backbone + Rails: Journey to the Front End

21. 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’s Backbone + Rails: Journey to the Front End

22. EXAMPLE USE CASE

23. [{ id: 1, name: "Doctors Appt", Event

24. Calendar Month

28. Week

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

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

34. Buy

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

36. }] Vet

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

38. Calendar Month

42. Week

48. Buy

50. }] Vet

52. Calendar Month

56. Week

62. Buy

64. }] Vet

66. Calendar Month

70. Week

76. Buy

78. }] Vet

80. Calendar Month

84. Week

90. Buy

92. }] Vet

94. Calendar Month

98. Week

100. |

104. Buy

106. }] Vet

108. Calendar Month

110. |

112. Week

114. |

118. Buy

120. }] Vet

122. Calendar Month

124. |

126. Week

128. |

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

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

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

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

135. Calendar Month

137. |

139. Week

141. |

148. Calendar Month

150. |

152. Week

154. |

161. Calendar Month

163. |

165. Week

167. |

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

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

171. Event February

172. 14,

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

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

176. Calendar Month

178. |

180. Week

182. |

186. Event February

187. 14,

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

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

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

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

193. Calendar Month

195. |

197. Week

199. |

203. Event February

204. 14,

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

209. Calendar Month

211. |

213. Week

215. |

219. Event February

220. 14,

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

225. Calendar Month

227. |

229. Week

231. |

235. Event February

236. 14,

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

241. Calendar Month

243. |

245. Week

247. |

251. Event February

252. 14,

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

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

257. Calendar Month

259. |

261. Week

263. |

267. Event February

268. 14,

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

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

273. Calendar Month

275. |

277. Week

279. |

283. Event February

284. 14,

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

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

289. Calendar Month

291. |

293. Week

295. |

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

300. Client Server M M V V C C

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

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

303. FREQUENTLY ASKED QUESTIONS

304. Do you still need Rails? • Asset Pipeline ! • No more awesome helpers right? ‣ wrong. • Routes.rb / I18n / Controller Instance Vars • Precompiled JST • ActiveRecord / Controllers / Gems Backbone + Rails: Journey to the Front End

305. EVERYTHING ELSE STAYS THE SAME

306. IDEAL API

307. JSON GENERATION

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

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

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

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

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

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

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

315. ASSET PIPELINE

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/apps 1. Dependency Management

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

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

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

324. 4. CoﬀeeScript

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

326. JAVASCRIPT TEMPLATES

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

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 %

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

330. MAJOR CHALLENGES

331. Technical Diﬀiculties • 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 Boilerplate Backbone + Rails: Journey to the Front End

332. BACKBONE IS UNOPINIONATED

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

334. APPLICATION

335. APPLICATION MODULE 1 MODULE 2 MODULE 3

336. APPLICATION USERS LEADS APPOINTMENTS

337. APPLICATION USERS LEADS APPOINTMENTS CONTROLLERS

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

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

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

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

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

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

344. Mission Accomplished • Highly repeatable patterns • Scalable solutions ‣ file / folder organization ‣ inter-app communication ‣ hardly any procedural code ‣ mostly configuration ‣ CSS conventions Dec 2012 • Began recording screencasts Backbone + Rails: Journey to the Front End

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

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

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (9)

Dernier

Dernier (20)

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