JavaScript Event Patterns

Overview of event patterns for JavaScript applications. Presented for a tech breakfast at Lab49 DC.

1. JavaScript Event Patterns A brief overview
2. • All UIs are fundamentally event driven • All UIs are fundamentally asynchronous • JavaScript is a language for managing UIs Why Events?
3. • Complex systems are event driven • Complex systems are asynchronous • JavaScript wants to be a language that plays well in complex systems Why Events?
4. Why Events? • Enable distributed architecture • Promote robustness in the face of certain failure • Encourage loose coupling • Promote separation of concerns
5. 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!
6. 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() {});
7. 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
8. Flag-carrying Framework
9. Backbone.js
10. Example var Editor = Backbone.Model.extend({}), CommandBar = {}; _.extend(CommandBar, Backbone.Events); CommandBar.on("save", Editor.save.bind(Editor));
11. 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}); }
12. 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
13. Flag-carrying Framework
14. Twitter/Flight.js
15. 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); });
16. 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.
17. 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
18. Questions?