ember: when the lights go on

My BSkyB Engineering Offsite presentation about our journey with Ember and beyond

Transcript

1. ember:&when&the&lights&go&on @grandazz github.com/achambers
3. how$ember$saved$my$life @grandazz github.com/achambers
4. how$ember$saved$my$life @grandazz github.com/achambers
5. ember:&when&the&lights&go&on @grandazz github.com/achambers
6. Wenguins
8. Noah%update
10. this%is%not an#ember#is#be(er#than#everything#else presenta(on
11. browser'dev'boiled'down (shamelessley)borrowed)from)@ryanflorence) interac(ng*with*data*stores rendering'data'to'ui responding*to*user*interac/on router&&&urls project(stuff:(file(organisa3on,(build(tools(etc
13. our$journey$with ember
14. lightbulb!moments
15. we#didn't#just#jump#in
16. we#needed#to validate the$switch
19. Service'Status
21. // app/assets/javascripts/application.js function bindViewMoreDetailsLinks() { $('.more-details').hide(); $('.view-more').click(function(e) { e.preventDefault(); var viewMoreLink = $(this); var moreDetails = viewMoreLink.parents('.issue').find('.more-details'); if (moreDetails.is(':visible')) { moreDetails.hide(); viewMoreLink.text('More details'); } else { moreDetails.show(); viewMoreLink.text('Less details'); } viewMoreLink.toggleClass('opened'); }); }
22. // app/assets/javascripts/application.js function toggleElementsForEditors() { $.ajax({ url: '/sessions/current', dataType: 'json', success: function(data) { var loggedInStatus = data.logged_in; toggleNewIssueLink(loggedInStatus); toggleHeader(loggedInStatus); toggleAdditionalLinks(loggedInStatus); toggleSidebar(loggedInStatus); toggleFooter(loggedInStatus); toggleEditIssueLinks(loggedInStatus); toggleResolveIssueLinks(loggedInStatus); } }); }
23. // app/assets/javascripts/application.js function toggleHeader(loggedInStatus) { $('#skycom-masthead-wrapper').toggleClass('hidden', loggedInStatus); } function toggleAdditionalLinks(loggedInStatus) { $('.additional-links').toggleClass('hidden', loggedInStatus); } function toggleSidebar(loggedInStatus) { $('.sidebar').toggleClass('hidden', loggedInStatus); } function toggleFooter(loggedInStatus) { $('#skycom-footer-wrapper').toggleClass('hidden', loggedInStatus); } function toggleEditIssueLinks(loggedInStatus) { $('.btn.edit-issue').toggleClass('hidden', !loggedInStatus); } function toggleResolveIssueLinks(loggedInStatus) { $('.btn.resolve-issue').toggleClass('hidden', !loggedInStatus); }
25. data$based$ui$manipula.on
26. // app/views/issues/index.html.haml function microfilterCheck() { var deferred = $.Deferred(); $.getJSON('/sessions/current', function(json) { if (json.logged_in) { deferred.resolve() } else { Hub.runMicrofilterTest() .done(function() { deferred.reject(); }) .fail(function() { deferred.resolve(); }); } }); return deferred; }
27. // app/views/issues/index.html.haml function restrictionCheck() { var deferred = $.Deferred(); $.getJSON('/customers/current', function(json) { if (json.customer.has_debt_restriction) { deferred.reject('debt'); } else if (json.customer.has_high_spend_restriction) { deferred.reject('spend'); } else { deferred.resolve(); } }, function() { deferred.resolve(); }); return deferred; }
28. // app/views/issues/index.html.haml $(function() { var microfilterDeferred = microfilterCheck() var restrictionDeferred = restrictionCheck() $.when(microfilterDeferred, restrictionDeferred).always(function() { var args = Array.prototype.slice.call(arguments); if (restrictionDeferred.state() == 'rejected') { if (args.indexOf('spend') !== -1) { $('.high-spend-restriction-alert').removeClass('hidden'); } else if (args.indexOf('debt') !== -1) { $('.debt-restriction-alert').removeClass('hidden'); } } else if (microfilterDeferred.state() == 'rejected') { $('.microfilter-alert').removeClass('hidden'); } showIssues(); }); });
29. then%the%very%next%commit...
30. // app/views/issues/index.html.haml $(function() { IssuesIndexController.init(); });
32. controllers
33. // app/assets/javasctipts/User.js var User = { isAnEditor: function() { var deferred = $.Deferred(); $.ajax({ dataType: 'json', url: '/sessions/current', success: function(data) { deferred.resolve(data.logged_in); }, error: function() { deferred.reject(); } }); return deferred.promise(); } }
34. // app/assets/javascripts/Diagnostics.js var Diagnostics = { run: function() { //run some diagnostics goodness } } // app/assets/javascripts/CBS.js var CBS = { run: function() { //run some monstrosity of a service, //return a massive payload we don't need //and take forever to do so } }
36. models & interac(ng*with*data*stores
37. // app/assets/javascripts/views/IssueView.js (function() { window.IssuesView = { render: function() { this._showIssues(); this._toggleStatusMessage(); } // ...snip... }; })(); // app/assets/javascripts/views/DebtAlertView.js (function() { window.DebtAlertView = { render: function() { this._showAlert(); this._hideProducts(); this._hideSidebar(); this._informScreenReader(); } // ...snip... }; })();
39. views
40. {!-- app/assets/javascripts/templates/outages.hbs --}} {{#each outages}} <article class="issue"> <h3>{{description}}</h3> <p> <span class="label">Date issue was reported</span> </br> <strong>{{startedOn}}</strong> </p> </article> {{/each}}
42. templa'ng
43. we#started#to#build#our#own#framework
44. we#started#to#build#our#own#framework BADLY
45. Use$a$framework,$or$don't.$Either$ way,$you$will. —"Someone"Awesome
46. conven&on'over'configura&on this.resource('posts', { path: '/posts' }) PostsRoute PostsController PostsView posts.hbs
47. no#more#globals var Diagnostics = { run: function() { // do stuff } }; window.IssuesIndexController = { init: function() { // do stuff; } };
48. no#more#globals ServiceStatus.GoIssuesController = Em.ArrayController.extend({ status: function() { //do stuff }.property('hasProblem') }); ServiceStatus.Outage = DS.Model.extend({ //attributes here }); ServiceStatus.SsAccordionComponent = Em.Component.extend({ collapsed: false, //other properties here });
49. data$binding // models/tv_issue.js ServiceStatus.TvIssue = DS.Model.extend( name: DS.attr('string') ); // controllers.tv_issues.js ServiceStatus.TvIssuesController = Em.ArrayController.extend({ }); <!-- templates/tv_issues.hbs --> <ul> <#each> <li>{{name}}</li> </each> </ul>
50. lightbulb(moments didn't&stop there
53. leave%your%assump-ons at#the#door
61. don't&fight&the&framework
62. If#something#feels#harder#than#it# should#be,#it#probably#is.#You're# probably#doing#it#wrong. —"Someone"Awesome
65. ui#error#logging
66. ui#error#logging Ember.onerror = handleError; Ember.RSVP.on('error', handleError); function handleError(error) { Em.$.ajax('/error', { type: 'POST', data: { stack: error.stack } }); }
69. build&tools
70. ember%cli npm install -g ember-cli
71. ember%cli file$organisa,on ember new my-project - /app - /components - /controllers - /helpers - /models - /routes - /styles - /templates - /views - app.js - index.html - router.js - /config - /public - /tests
72. ember%cli es6$modules
73. ember%cli tes$ng
74. ember%cli asset%pipeline
75. ember%cli generators
76. ember%cli h"p$mock)server
77. ember%cli addons
80. separa&on)of ui#and#api
81. clearer&separa)on&between&data and$user$interac,on
82. think&not&of&your&api&in&terms&of&ui& interac2ons,&but&in&terms&of&data& and&rela2onships
83. your%app%is%a client'of'your'api
86. deployment
87. deploying*to*heroku and$serving$from$rails is#cool#and#all
88. but$we've$been$doing$that$for a"long"'me
89. we#can#do be#er
92. index.html app#1234.js app#5678.css
94. lets%push%this one$step$further
97. deployment*becomes*super*quick
98. just%push%some%sta,c%assets%to%S3 and$push$index.html$into$redis
99. not$to$men'on$cu*ng$over
102. pact%file%tes*ng
103. how$do$we$test$that$changes to#the#api
104. how$do$we$test$that$changes to#the#api don't&break&the&ui?
105. pact%(noun) A%formal%agreement%between% individuals%or%par8es. —%The%Google
106. the$rela(onship$of$the$web$app$consists$of: the$consumer$(ui) the$provider$(api)
107. Step%1%'%Define%the%consumer%expecta4ons
108. Step%2%'%Verify%expecta0ons%on%provider
109. imagine'if CBS verified'their'services'against'our'pact'files every%&me%they%released?
111. Thats&a&wrap
112. @grandazz github.com/achambers
113. any$ques)ons? @grandazz github.com/achambers
114. thankyou