Slide 1

Slide 1 text

JavaScript Event Patterns A brief overview

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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!

Slide 6

Slide 6 text

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() {});

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Flag-carrying Framework

Slide 9

Slide 9 text

Backbone.js

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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}); }

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Flag-carrying Framework

Slide 14

Slide 14 text

Twitter/Flight.js

Slide 15

Slide 15 text

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); });

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Questions?