JavaScript Event Patterns A brief overview 

● All UIs are fundamentally event driven ● All UIs are fundamentally asynchronous ● JavaScript is a language for managing UIs Why Events? 

● Complex systems are event driven ● Complex systems are asynchronous ● JavaScript wants to be a language that plays well in complex systems Why Events? 

Why Events? ● Enable distributed architecture ● Promote robustness in the face of certain failure ● Encourage loose coupling ● Promote separation of concerns 

Event Patterns ● Publish-Subscribe (one-to-many) vs ● Event Bus / Message Queue (many-to-many) Observer vs. Mediator in the cage match of the century! 

Publish-Subscribe document.querySelector("#my-checkbox"). addEventListener("click", function(evt) { /* IE ... what about IE? */ }); var model = {}; extend(model, MyEventMixin); model.on("change", this.updateView); /* Alternately */ view.listenTo(model, "change", function() {}); 

Advantages of Pub-Sub ● Easy to reason about ○ Publisher and subscriber must have access to each other ● No global dependencies ● Low chance of event collisions Disadvantages of Pub-Sub ● Impossible to query the global state ● Not fully asynchronous ○ Publisher and subscriber must exist concurrently 

Flag-carrying Framework 

Backbone.js 

Example var Editor = Backbone.Model.extend({}), CommandBar = {}; _.extend(CommandBar, Backbone.Events); CommandBar.on("save", Editor.save.bind(Editor)); 

Message Queue var dispatcher = new MyEventDispatcher(); dispatcher.subscribe("my.event", this.updateView); /* Some time later and in a completely different part of the codebase */ function createFrombulators() { dispatcher.publish("my.event", {some: data}); } 

Advantages of Message Queue ● Fully asynchronous ○ The dispatcher mediates between publisher(s) and subscriber(s). They do not have to possess references to each other. ● Possible to query the global state Disadvantages of Message Queue ● Harder to reason about / debug ● Single point of failure ● Potential for collisions in queues as application grows 

Flag-carrying Framework 

Twitter/Flight.js 

Example define([ "flight/lib/component" ], function(defineComponent) { function Editor() { var editor = this; this.on("command-bar.save", function() { editor.trigger("editor.save", {content: editor.getContent()}); }); } return defineComponent(Editor); }); 

Who wins? Use both patterns. Pub-sub for command passing inside of a component and for smaller applications. Message Queue for passing data into a larger application. NB: The Backbone root level module has Backbone.Events mixed into it. Backbone applications can use the Backbone module as a message queue. 

See Also Client-Side Messaging Essentials: http://freshbrewedcode.com/jimcowart/2013/02/07/client-side-messaging-essentials/ Patterns For Large-Scale JavaScript Application Architecture: http://addyosmani.com/largescalejavascript/#mediatorpattern Mediator.js: http://thejacklawson.com/Mediator.js/ PostalJS: https://github.com/postaljs/postal.js and https://github.com/postaljs/monologue.js Flight: https://github.com/twitter/flight 

Questions?