Aaron Chambers - Ember: when the lights go on

Presented at Hey! #16 on 7th April, 2015.

Transcript

1. ember:&when&the&lights&go&on @grandazz github.com/achambers
2. developing*since*2000 Javascript Ruby Java$and$Lotus$Notes
3. github.com/ember.cli/ember.cli.deploy
6. Wenguins
8. this%is%not an#ember#is#be(er#than#everything#else presenta(on
9. 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
11. the$wenguins'$journey$with ember
12. lightbulb!moments
13. we#didn't#just#jump#in
14. we#needed#to validate the$switch
17. Service'Status
19. // 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'); }); }
20. // 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); } }); }
21. // 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); }
23. data$based$ui$manipula.on
24. // 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; }
25. // 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; }
26. // 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(); }); });
27. then%the%very%next%commit...
28. // app/views/issues/index.html.haml $(function() { IssuesIndexController.init(); });
30. controllers
31. // 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(); } }
32. // 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 } }
34. models & interac(ng*with*data*stores
35. // 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... }; })();
37. views
38. {!-- 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}}
40. templa'ng
41. we#started#to#build#our#own#framework
42. we#started#to#build#our#own#framework BADLY
43. Use$a$framework,$or$don't.$Either$ way,$you$will. —"Someone"Awesome
44. conven&on'over'configura&on this.resource('posts', { path: '/posts' }) PostsRoute PostsController PostsView posts.hbs
45. no#more#globals var Diagnostics = { run: function() { // do stuff } }; window.IssuesIndexController = { init: function() { // do stuff; } };
46. no#more#globals#,>#es2015#modules // app/controllers/go-issues.js export default Em.ArrayController.extend({ status: function() { //do stuff }.property('hasProblem') }); // app/models/outage.js export default DS.Model.extend({ //attributes here }); // app/components/ss-accordion.js export default Em.Component.extend({ collapsed: false, //other properties here });
47. data$binding // models/tv_issue.js export default DS.Model.extend( name: DS.attr('string') ); // controllers/tv_issues.js export default Em.ArrayController.extend({ }); <!-- templates/tv_issues.hbs --> <ul> <#each> <li>{{name}}</li> </each> </ul>
48. lightbulb(moments didn't&stop there
51. leave%your%assump-ons at#the#door
59. don't&fight&the&framework
60. If#something#feels#harder#than#it# should#be,#it#probably#is.#You're# probably#doing#it#wrong. —"Someone"Awesome
63. ui#error#logging
64. ui#error#logging Ember.onerror = handleError; Ember.RSVP.on('error', handleError); function handleError(error) { Em.$.ajax('/error', { type: 'POST', data: { stack: error.stack } }); }
67. separa&on)of ui#and#api
68. clearer&separa)on&between&data and$user$interac,on
69. think&not&of&your&api&in&terms&of&ui& interac2ons,&but&in&terms&of&data& and&rela2onships
70. your%app%is%a client'of'your'api
73. build&tools
74. build&tools lightening(fast(deployments
75. build&tools lightening(fast(deployments pact%file%tes*ng
76. Come%and%chat%to%me
77. Come%and%chat%to%me at#the#bar tonight
78. Come%and%chat%to%me Thursday)9th)April 2"Wellington"Place
79. Aaron&Chambers @grandazz github.com/achambers
80. any$ques)ons? @grandazz github.com/achambers
81. thanks'for'having'me