This document discusses the evolution of a modular application architecture using events and promises. It describes how the author transitioned from a single page application built with Backbone to independent, reusable modules. Key aspects discussed include isolating functionality into independent modules, managing dependencies between modules using events, and allowing asynchronous behavior through promises. The use of a central event object called a "Vent" is introduced to facilitate communication between modules and share data and responses. The overall goal is to build applications using isolated, reusable modules that can be composed together and communicate asynchronously through a shared event system.

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