Presented at jQuery Conf Portland 2013

1. Building Stateful Modules with Events and Promises
DOMManipulation
patrickCAMACHO
Beyond
Friday, June 14, 13

2. CrashlyticsforAndroid&iOS
Friday, June 14, 13

3. Friday, June 14, 13

4. Friday, June 14, 13

5. Friday, June 14, 13

6. Friday, June 14, 13

7. Railsto Backbone.
Friday, June 14, 13

8. Whatdidwehave?
Model
Backbone.Model
Backbone.Collection
Routing
Backbone.Router,
Backbone.History
Views
Backbone.Views
Events
Backbone.Events
MV* components
Friday, June 14, 13

9. What’smissing?
Friday, June 14, 13

10. TransitioningPagestoStates.
Friday, June 14, 13

11. Piecemeal.
App
State
Friday, June 14, 13

12. Piecemeal.
App
Router
State
Friday, June 14, 13

13. Piecemeal.
App
Router Directors
State
Friday, June 14, 13

14. Piecemeal.
App
Router Directors
State
Friday, June 14, 13

15. Addingamodal.
Friday, June 14, 13

16. Friday, June 14, 13

17. Neededbetterstructure.
• Builtonsingleflowand
states
• Modaldidn’tfitflow
• Backtothe
drawingboard
App
Router Directors
State
Friday, June 14, 13

18. Neededbetterstructure.
• Builtonsingleflowand
states
• Modaldidn’tfitflow
• Backtothe
drawingboard
App
Router Directors
State
Settings
Friday, June 14, 13

19. Thebirthofthe“module”.
• Entirelyindependentpiecesoffunctionality
• Itcouldaccepteventsandstart/stopitself
State
this.$('.settings').click(function(){
CLS.Components.Settings.trigger('start');
});
Settings
this.$('.overlay').click((function(){
this.trigger('stop');
}).bind(this));
Friday, June 14, 13

20. Asyncbehavior.
Friday, June 14, 13

21. Asyncbehaviorinstates.
• Fetchingdata,animations,etc
• Wanttoshutanythingdownwhenstopping
Settings
Server
(rendering)
Friday, June 14, 13

22. Promises.
• $.Promisesand$.Deferreds
• .done,.fail,.always
• .resolve,.reject
fetch1 = $.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

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

24. Goodintheshortrun.
• Onlyhadoneapplication
• Componentslived
forever
• Singletonshidthe
problems
Settings Alert Center
RealTime Analytics
Friday, June 14, 13

25. Multipleapplications.
Friday, June 14, 13

26. Distinctfunctionality.
Friday, June 14, 13

27. Distinctfunctionality.
Friday, June 14, 13

28. Multipleapplications.
• Lostcoreassumptionofapage-longapp
• Appsbegantolookmoreandmorelikemodules
Onboarding
Onboarding.start : function(){
if(this._isActive) return;
...
this._isActive = true;
}
Onboarding.stop : function(){
if(!this._isActive) return;
...
this._isActive = false;
}
Friday, June 14, 13

29. Multipleapplications.
Apps
Router Directors
State
Friday, June 14, 13

30. Persistentfunctionalty.
• Componentsneededtobestarted/stoppedbyappson
start/stop
• Notallshouldbestartedorstopped
• Backtoheavyconditionals
if(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

31. Findingapattern.
Friday, June 14, 13

32. Sameproblem,differentlevels.
• Eventing
• Start
• Stop
• Dependencies
App
State State
Component Component Component
Friday, June 14, 13

33. Isolatingknowledge.
Friday, June 14, 13

34. Toomanydirectreferences.
• Don’tknowoutsideinformation
• Clearestinstoppingdependencies
if(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

35. Eventingwitharguments.
Onboarding Dashboard
Dashboard.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

36. • Wantedevents,butnottheknowledge
Stilltightlycoupled.
Dashboard.start = function() {
Onboarding.trigger('stop', this.dependencies);
LoggedOut.trigger('stop', this.dependencies);
}
Friday, June 14, 13

37. Simplifyfunctionality.
Friday, June 14, 13

38. Usingavent.
• Allofthesepiecesareusingevents
• Isolatethatfunctionalitytoasingleunit
Vent
Vent = function() {...}
Vent.prototype.on = function() {...}
Vent.prototype.one = function() {...}
Vent.prototype.off = function() {...}
Vent.prototype.trigger = function() {...}
Friday, June 14, 13

39. Sharingavent.
OnboardingDashboard Vent
Onboarding.start = function() {
this.vent.trigger('app:dashboard:stop', this.dependencies);
this.vent.trigger('app:loggedOut:stop', this.dependencies);
}
Friday, June 14, 13

40. 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 Vent
Friday, June 14, 13

41. Sharinginformation.
Friday, June 14, 13

42. • Sharedatabetweenmodules
• Useventtoregisterresponsesandrequest
Synchronousdatareturns.
VentDashboard Settings
Friday, June 14, 13

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

44. Tyingitalltogether.
Friday, June 14, 13

45. Modularizeallthethings!
• Isolatedfunctionality
• Start/stop
• Managingdependencies
• Eventing
• Asyncbehavior
Friday, June 14, 13

46. Modularizeallthethings!
Component
App
State
• Isolatedfunctionality
• Start/stop
• Managingdependencies
• Eventing
• Asyncbehavior
Friday, June 14, 13

47. Vent
Rethinkingtheflow.
Friday, June 14, 13

48. Vent
Rethinkingtheflow.
Router
Friday, June 14, 13

49. ComponentsVent
Rethinkingtheflow.
Apps
Router
Friday, June 14, 13

50. Vent
ComponentsVent
Rethinkingtheflow.
Apps
Router
States
Friday, June 14, 13

51. Vent
Vent
ComponentsVent
Rethinkingtheflow.
Apps
Router
States
States
Friday, June 14, 13

52. Makingityours
• Managecomplexityandscale
• Isolatefunctionalityintomodules
• Managedependencies
• Allowmodulestocommunicatethroughavent
Friday, June 14, 13

53. YOUpatrickCAMACHO
Thank
try.crashlytics.com/jobs
Friday, June 14, 13