beyond dom manipulations: building stateful modules with events and promises
DESCRIPTION
Presented at jQuery Conf Portland 2013TRANSCRIPT
![Page 1: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/1.jpg)
Building Stateful Modules with Events and PromisesDOM Manipulation
patrickCAMACHO
Beyond
Friday, June 14, 13
![Page 2: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/2.jpg)
Crashlytics for Android & iOS
Friday, June 14, 13
![Page 3: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/3.jpg)
Friday, June 14, 13
![Page 4: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/4.jpg)
Friday, June 14, 13
![Page 5: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/5.jpg)
Friday, June 14, 13
![Page 6: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/6.jpg)
Friday, June 14, 13
![Page 7: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/7.jpg)
Rails to Backbone.
Friday, June 14, 13
![Page 8: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/8.jpg)
What did we have?
ModelBackbone.Model
Backbone.Collection
RoutingBackbone.Router,Backbone.History
ViewsBackbone.Views
EventsBackbone.Events
MV* components
Friday, June 14, 13
![Page 9: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/9.jpg)
What’s missing?
Friday, June 14, 13
![Page 10: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/10.jpg)
Transitioning Pages to States.
Friday, June 14, 13
![Page 11: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/11.jpg)
Piecemeal.
App
State
Friday, June 14, 13
![Page 12: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/12.jpg)
Piecemeal.
App
Router
State
Friday, June 14, 13
![Page 13: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/13.jpg)
Piecemeal.
App
Router Directors
State
Friday, June 14, 13
![Page 14: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/14.jpg)
Piecemeal.
App
Router Directors
State
Friday, June 14, 13
![Page 15: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/15.jpg)
Adding a modal.
Friday, June 14, 13
![Page 16: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/16.jpg)
Friday, June 14, 13
![Page 17: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/17.jpg)
Needed better structure.
• Built on single flow and
states
• Modal didn’t fit flow
• Back to the
drawing board
App
Router Directors
State
Friday, June 14, 13
![Page 18: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/18.jpg)
Needed better structure.
• Built on single flow and
states
• Modal didn’t fit flow
• Back to the
drawing board
App
Router Directors
State
Settings
Friday, June 14, 13
![Page 19: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/19.jpg)
The birth of the “module”.
• Entirely independent pieces of functionality
• It could accept events and start / stop itself
State
this.$('.settings').click(function(){ CLS.Components.Settings.trigger('start');});
Settings
this.$('.overlay').click((function(){ this.trigger('stop');}).bind(this));
Friday, June 14, 13
![Page 20: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/20.jpg)
Async behavior.
Friday, June 14, 13
![Page 21: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/21.jpg)
Async behavior in states.
• Fetching data, animations, etc
• Want to shut anything down when stopping
Settings
Server
(rendering)
Friday, June 14, 13
![Page 22: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/22.jpg)
Promises.
• $.Promises and $.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
![Page 23: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/23.jpg)
Using with Components.
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
![Page 24: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/24.jpg)
Good in the short run.
• Only had one application
• Components lived
forever
• Singletons hid the
problems
Settings Alert Center
Real Time Analytics
Friday, June 14, 13
![Page 25: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/25.jpg)
Multiple applications.
Friday, June 14, 13
![Page 26: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/26.jpg)
Distinct functionality.
Friday, June 14, 13
![Page 27: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/27.jpg)
Distinct functionality.
Friday, June 14, 13
![Page 28: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/28.jpg)
Multiple applications.
• Lost core assumption of a page-long app
• Apps began to look more and more like modules
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
![Page 29: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/29.jpg)
Multiple applications.
Apps
Router Directors
State
Friday, June 14, 13
![Page 30: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/30.jpg)
Persistent functionalty.
• Components needed to be started / stopped by apps on
start / stop
• Not all should be started or stopped
• Back to heavy conditionals
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
![Page 31: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/31.jpg)
Finding a pattern.
Friday, June 14, 13
![Page 32: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/32.jpg)
Same problem, different levels.
• Eventing
• Start
• Stop
• Dependencies
App
State State
Component Component Component
Friday, June 14, 13
![Page 33: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/33.jpg)
Isolating knowledge.
Friday, June 14, 13
![Page 34: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/34.jpg)
Too many direct references.
• Don’t know outside information
• Clearest in stopping dependencies
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
![Page 35: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/35.jpg)
Eventing with arguments.
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
![Page 36: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/36.jpg)
• Wanted events, but not the knowledge
Still tightly coupled.
Dashboard.start = function() { Onboarding.trigger('stop', this.dependencies); LoggedOut.trigger('stop', this.dependencies);}
Friday, June 14, 13
![Page 37: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/37.jpg)
Simplify functionality.
Friday, June 14, 13
![Page 38: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/38.jpg)
Using a vent.
• All of these pieces are using events
• Isolate that functionality to a single unit
Vent
Vent = function() {...}Vent.prototype.on = function() {...}Vent.prototype.one = function() {...}Vent.prototype.off = function() {...}Vent.prototype.trigger = function() {...}
Friday, June 14, 13
![Page 39: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/39.jpg)
Sharing a vent.
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
![Page 40: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/40.jpg)
Smart subscriptions.
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
![Page 41: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/41.jpg)
Sharing information.
Friday, June 14, 13
![Page 42: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/42.jpg)
• Share data between modules
• Use vent to register responses and request
Synchronous data returns.
VentDashboard Settings
Friday, June 14, 13
![Page 43: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/43.jpg)
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');}
Synchronous data returns.
Friday, June 14, 13
![Page 44: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/44.jpg)
Tying it all together.
Friday, June 14, 13
![Page 45: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/45.jpg)
Modularize all the things!
• Isolated functionality
• Start / stop
• Managing dependencies
• Eventing
• Async behavior
Friday, June 14, 13
![Page 46: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/46.jpg)
Modularize all the things!
Component
App
State
• Isolated functionality
• Start / stop
• Managing dependencies
• Eventing
• Async behavior
Friday, June 14, 13
![Page 47: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/47.jpg)
Vent
Rethinking the flow.
Friday, June 14, 13
![Page 48: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/48.jpg)
Vent
Rethinking the flow.
Router
Friday, June 14, 13
![Page 49: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/49.jpg)
ComponentsVent
Rethinking the flow.
Apps
Router
Friday, June 14, 13
![Page 50: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/50.jpg)
Vent
ComponentsVent
Rethinking the flow.
Apps
Router
States
Friday, June 14, 13
![Page 51: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/51.jpg)
Vent
Vent
ComponentsVent
Rethinking the flow.
Apps
Router
States
States
Friday, June 14, 13
![Page 52: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/52.jpg)
Making it yours
• Manage complexity and scale
• Isolate functionality into modules
• Manage dependencies
• Allow modules to communicate through a vent
Friday, June 14, 13
![Page 53: Beyond DOM Manipulations: Building Stateful Modules with Events and Promises](https://reader037.vdocuments.net/reader037/viewer/2022110302/545b83feb1af9f40378b5c80/html5/thumbnails/53.jpg)
YOUpatrickCAMACHO
Thank
try.crashlytics.com/jobs
Friday, June 14, 13