Beyond DOM Manipulations: Building Stateful Modules with Events and Promises
Upcoming SlideShare
Loading in...5
×
 

Beyond DOM Manipulations: Building Stateful Modules with Events and Promises

on

  • 2,427 views

Presented at jQuery Conf Portland 2013

Presented at jQuery Conf Portland 2013

Statistics

Views

Total Views
2,427
Views on SlideShare
2,347
Embed Views
80

Actions

Likes
0
Downloads
13
Comments
0

5 Embeds 80

http://lanyrd.com 26
http://eventifier.co 25
https://twitter.com 23
http://www.feedspot.com 4
http://webcache.googleusercontent.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Beyond DOM Manipulations: Building Stateful Modules with Events and Promises Beyond DOM Manipulations: Building Stateful Modules with Events and Promises Presentation Transcript

  • Building Stateful Modules with Events and PromisesDOMManipulationpatrickCAMACHOBeyondFriday, June 14, 13
  • CrashlyticsforAndroid&iOSFriday, June 14, 13
  • Friday, June 14, 13
  • Friday, June 14, 13
  • Friday, June 14, 13
  • Friday, June 14, 13
  • Railsto Backbone.Friday, June 14, 13
  • Whatdidwehave?ModelBackbone.ModelBackbone.CollectionRoutingBackbone.Router,Backbone.HistoryViewsBackbone.ViewsEventsBackbone.EventsMV* componentsFriday, June 14, 13
  • What’smissing?Friday, June 14, 13
  • TransitioningPagestoStates.Friday, June 14, 13
  • Piecemeal.AppStateFriday, June 14, 13
  • Piecemeal.AppRouterStateFriday, June 14, 13
  • Piecemeal.AppRouter DirectorsStateFriday, June 14, 13
  • Piecemeal.AppRouter DirectorsStateFriday, June 14, 13
  • Addingamodal.Friday, June 14, 13
  • Friday, June 14, 13
  • Neededbetterstructure.• Builtonsingleflowandstates• Modaldidn’tfitflow• BacktothedrawingboardAppRouter DirectorsStateFriday, June 14, 13
  • Neededbetterstructure.• Builtonsingleflowandstates• Modaldidn’tfitflow• BacktothedrawingboardAppRouter DirectorsStateSettingsFriday, June 14, 13
  • Thebirthofthe“module”.• Entirelyindependentpiecesoffunctionality• Itcouldaccepteventsandstart/stopitselfStatethis.$(.settings).click(function(){CLS.Components.Settings.trigger(start);});Settingsthis.$(.overlay).click((function(){this.trigger(stop);}).bind(this));Friday, June 14, 13
  • Asyncbehavior.Friday, June 14, 13
  • Asyncbehaviorinstates.• Fetchingdata,animations,etc• WanttoshutanythingdownwhenstoppingSettingsServer(rendering)Friday, June 14, 13
  • Promises.• $.Promisesand$.Deferreds• .done,.fail,.always• .resolve,.rejectfetch1 = $.get(data.json);fetch2 = $.get(data2.json);fetch1.done(function(){ console.log(‘success!’); }fetch2.always(function(){ console.log(‘complete!’); }$.when(fetch1, fetch2).fail(function(){console.log(‘fail!’);});Friday, June 14, 13
  • UsingwithComponents.Settings.start = function() {this.stopDeferred = $.Deferred();fetch1 = $.get(data.json);this.stopDeferred.done(fetch1.abort);fetch2 = $.get(data2.json);this.stopDeferred.done(fetch2.abort);$.when(fetch1, fetch2).done(this.render.bind(this));}Settings.stop = function() {this.stopDeferred.resolve();}Friday, June 14, 13
  • Goodintheshortrun.• Onlyhadoneapplication• Componentslivedforever• SingletonshidtheproblemsSettings Alert CenterRealTime AnalyticsFriday, June 14, 13
  • Multipleapplications.Friday, June 14, 13
  • Distinctfunctionality.Friday, June 14, 13
  • Distinctfunctionality.Friday, June 14, 13
  • Multipleapplications.• Lostcoreassumptionofapage-longapp• AppsbegantolookmoreandmorelikemodulesOnboardingOnboarding.start : function(){if(this._isActive) return;...this._isActive = true;}Onboarding.stop : function(){if(!this._isActive) return;...this._isActive = false;}Friday, June 14, 13
  • Multipleapplications.AppsRouter DirectorsStateFriday, June 14, 13
  • Persistentfunctionalty.• Componentsneededtobestarted/stoppedbyappsonstart/stop• Notallshouldbestartedorstopped• Backtoheavyconditionalsif(nextApp === onboard) {CLS.Components.Settings.trigger(stop);CLS.Components.AlertCenter.trigger(stop);} else if(nextApp === logout) {CLS.Components.Settings.trigger(stop);CLS.Components.AlertCenter.trigger(stop);CLS.Components.RealTime.trigger(stop);} else if...Friday, June 14, 13
  • Findingapattern.Friday, June 14, 13
  • Sameproblem,differentlevels.• Eventing• Start• Stop• DependenciesAppState StateComponent Component ComponentFriday, June 14, 13
  • Isolatingknowledge.Friday, June 14, 13
  • Toomanydirectreferences.• Don’tknowoutsideinformation• Clearestinstoppingdependenciesif(nextApp === onboard) {CLS.Components.Settings.trigger(stop);CLS.Components.AlertCenter.trigger(stop);} else if(nextApp === logout) {CLS.Components.Settings.trigger(stop);CLS.Components.AlertCenter.trigger(stop);CLS.Components.RealTime.trigger(stop);} else if...Friday, June 14, 13
  • Eventingwitharguments.Onboarding DashboardDashboard.start = function() {Onboarding.trigger(stop, this.dependencies);}Onboarding.stop = function(dependencies) {if(dependencies == null) { dependencies = [] }this.dependencies.forEach(function(dependencies){if(dependencies.indexOf(dependency) < 0) {dependency.trigger(stop, dependencies);}});}Friday, June 14, 13
  • • Wantedevents,butnottheknowledgeStilltightlycoupled.Dashboard.start = function() {Onboarding.trigger(stop, this.dependencies);LoggedOut.trigger(stop, this.dependencies);}Friday, June 14, 13
  • Simplifyfunctionality.Friday, June 14, 13
  • Usingavent.• Allofthesepiecesareusingevents• IsolatethatfunctionalitytoasingleunitVentVent = function() {...}Vent.prototype.on = function() {...}Vent.prototype.one = function() {...}Vent.prototype.off = function() {...}Vent.prototype.trigger = function() {...}Friday, June 14, 13
  • Sharingavent.OnboardingDashboard VentOnboarding.start = function() {this.vent.trigger(app:dashboard:stop, this.dependencies);this.vent.trigger(app:loggedOut:stop, this.dependencies);}Friday, June 14, 13
  • Smartsubscriptions.Dashboard.start = function(vent) {this.vent.trigger(app:onBeforeStart, this.dependencies);this.vent.one(app:onBeforeStart, this.stop.bind(this));}Onboarding.start = function(vent) {this.vent.trigger(app:onBeforeStart, this.dependencies);this.vent.one(app:onBeforeStart, this.stop.bind(this));}OnboardingDashboard VentFriday, June 14, 13
  • Sharinginformation.Friday, June 14, 13
  • • Sharedatabetweenmodules• UseventtoregisterresponsesandrequestSynchronousdatareturns.VentDashboard SettingsFriday, June 14, 13
  • Dashboard.start = function() {this.currentApplication = ‘foo bar’this.vent.setResponse(current_application,(function(){ return this.currentApplication; }).bind(this););}Settings.start = function() {app = this.vent.requestResponse(current_application);}Synchronousdatareturns.Friday, June 14, 13
  • Tyingitalltogether.Friday, June 14, 13
  • Modularizeallthethings!• Isolatedfunctionality• Start/stop• Managingdependencies• Eventing• AsyncbehaviorFriday, June 14, 13
  • Modularizeallthethings!ComponentAppState• Isolatedfunctionality• Start/stop• Managingdependencies• Eventing• AsyncbehaviorFriday, June 14, 13
  • VentRethinkingtheflow.Friday, June 14, 13
  • VentRethinkingtheflow.RouterFriday, June 14, 13
  • ComponentsVentRethinkingtheflow.AppsRouterFriday, June 14, 13
  • VentComponentsVentRethinkingtheflow.AppsRouterStatesFriday, June 14, 13
  • VentVentComponentsVentRethinkingtheflow.AppsRouterStatesStatesFriday, June 14, 13
  • Makingityours• Managecomplexityandscale• Isolatefunctionalityintomodules• Managedependencies• AllowmodulestocommunicatethroughaventFriday, June 14, 13
  • YOUpatrickCAMACHOThanktry.crashlytics.com/jobsFriday, June 14, 13