YUI 3: Events Evolved

  • 4,207 views
Uploaded on

An overview of some of the features in YUI 3's event system. Presented at YUIConf 2009.

An overview of some of the features in YUI 3's event system. Presented at YUIConf 2009.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,207
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
49
Comments
0
Likes
7

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Events Evolved Luke Smith yuilibrary: lsmith github: lsmith twitter: @ls_n YUICONF 2009Monday, January 17, 2011
  • 2. <input type="button" onclick="doSomething();"> YUICONF 2009Monday, January 17, 2011
  • 3. <input type="button" onclick="doSomething();"> YUICONF 2009Monday, January 17, 2011
  • 4. <input type="button" onclick="doSomething();"> button.onclick = doSomething; YUICONF 2009Monday, January 17, 2011
  • 5. <input type="button" onclick="doSomething();"> button.onclick = doSomething; YUICONF 2009Monday, January 17, 2011
  • 6. <input type="button" onclick="doSomething();"> button.onclick = doSomething; button.addEventListener(click, doSomething, false); YUICONF 2009Monday, January 17, 2011
  • 7. <input type="button" onclick="doSomething();"> button.onclick = doSomething; button.addEventListener(click, doSomething, false); YUICONF 2009Monday, January 17, 2011
  • 8. <input type="button" onclick="doSomething();"> button.onclick = doSomething; button.addEventListener(click, doSomething, false); YUICONF 2009Monday, January 17, 2011
  • 9. if (button.addEventListener) { button.addEventListener(click, doSomething, false); } else if (button.attachEvent) { button.attachEvent(click, doSomething); } else { button.onclick = doSomething; } YUICONF 2009Monday, January 17, 2011
  • 10. if (button.addEventListener) { button.addEventListener(click, doSomething, false); } else if (button.attachEvent) { button.attachEvent(click, doSomething); } else { button.onclick = doSomething; } DUMB YUICONF 2009Monday, January 17, 2011
  • 11. <input type="button" onclick="doSomething();"> button.onclick = doSomething; button.addEventListener(click, doSomething, false); if (button.addEventListener) { /* madness */ } YUICONF 2009Monday, January 17, 2011
  • 12. <input type="button" onclick="doSomething();"> button.onclick = doSomething; button.addEventListener(click, doSomething, false); if (button.addEventListener) { /* madness */ } addEvent(button, click, doSomething); YUICONF 2009Monday, January 17, 2011
  • 13. function doSomething(e) { if (e && e.preventDefault) { e.preventDefault(); } return false; } YUICONF 2009Monday, January 17, 2011
  • 14. function doSomething(e) { if (e && e.preventDefault) { e.preventDefault(); } return false; } YUICONF 2009Monday, January 17, 2011
  • 15. function doSomething(e) { if (e && e.preventDefault) { e.preventDefault(); } return false; } Weve been through this YUICONF 2009Monday, January 17, 2011
  • 16. <input type="button" onclick="doSomething();"> button.onclick = doSomething; button.addEventListener(click, doSomething, false); if (button.addEventListener) { /* madness */ } addEvent(button, click, doSomething); YUICONF 2009Monday, January 17, 2011
  • 17. <input type="button" onclick="doSomething();"> button.onclick = doSomething; button.addEventListener(click, doSomething, false); if (button.addEventListener) { /* madness */ } addEvent(button, click, doSomething); YUICONF 2009Monday, January 17, 2011
  • 18. YUI 2 YAHOO.util.Event.on(button,click,doSomething); YUICONF 2009Monday, January 17, 2011
  • 19. YUI 2 YAHOO.util.Event.on(button,click,doSomething); YAHOO.util.Event.preventDefault(e); YUICONF 2009Monday, January 17, 2011
  • 20. YUI 2 YAHOO.util.Event.on(button,click,doSomething); YAHOO.util.Event.preventDefault(e); ✓ Normalized subscription YUICONF 2009Monday, January 17, 2011
  • 21. YUI 2 YAHOO.util.Event.on(button,click,doSomething); YAHOO.util.Event.preventDefault(e); ✓ Normalized subscription ✓ Normalized event handling YUICONF 2009Monday, January 17, 2011
  • 22. YUI 2 YAHOO.util.Event.on(button,click,doSomething); YAHOO.util.Event.preventDefault(e); ✓ Normalized subscription ✓ Normalized event handling ✓ DOM-like method names YUICONF 2009Monday, January 17, 2011
  • 23. YUI 3 button.on(click, doSomething); e.preventDefault(); YUICONF 2009Monday, January 17, 2011
  • 24. YUI 3 button.on(click, doSomething); e.preventDefault(); ✓ Normalized subscription YUICONF 2009Monday, January 17, 2011
  • 25. YUI 3 button.on(click, doSomething); e.preventDefault(); ✓ Normalized subscription ✓ Normalized event handling YUICONF 2009Monday, January 17, 2011
  • 26. YUI 3 button.on(click, doSomething); e.preventDefault(); ✓ Normalized subscription ✓ Normalized event handling ✓ DOM-like method names YUICONF 2009Monday, January 17, 2011
  • 27. YUI 3 button.on(click, doSomething); e.preventDefault(); ✓ Normalized subscription ✓ Normalized event handling ✓ DOM-like method names ✓ DOM-like context YUICONF 2009Monday, January 17, 2011
  • 28. YUI 3 button.on(click, doSomething); e.preventDefault(); ✓ Normalized subscription ✓ Normalized event handling ✓ DOM-like method names ✓ DOM-like context ✓ Terse YUICONF 2009Monday, January 17, 2011
  • 29. We give you the DOM YUICONF 2009Monday, January 17, 2011
  • 30. We give you the DOM ... but it works YUICONF 2009Monday, January 17, 2011
  • 31. You are here YUICONF 2009Monday, January 17, 2011
  • 32. Custom Events YUI 2 YUICONF 2009Monday, January 17, 2011
  • 33. Custom Events YUI 2 this.myEvent = new YAHOO.util.CustomEvent("myEvent"); instance.myEvent.subscribe(doSomething); this.myEvent.fire(); YUICONF 2009Monday, January 17, 2011
  • 34. Custom Events YUI 2 instance.subscribe("myEvent",doSomething); this.fireEvent("myEvent"); YUICONF 2009Monday, January 17, 2011
  • 35. Custom Events YUI 3 instance.on("myEvent", doSomething); this.fire("myEvent"); YUICONF 2009Monday, January 17, 2011
  • 36. Custom Events YUI 3 this.publish("myEvent", config); instance.on("myEvent", doSomething); this.fire("myEvent"); YUICONF 2009Monday, January 17, 2011
  • 37. Y.extend( MyClass, Y.EventTarget ); Y.EventTarget ✓ Event API YUICONF 2009Monday, January 17, 2011
  • 38. Y.extend( MyClass, Y.Base ); Y.EventTarget Y.Base ✓ Event API ✓ Event API ✓ Attributes ✓ Plugins YUICONF 2009Monday, January 17, 2011
  • 39. Y.extend( MyClass, Y.Widget ); Y.EventTarget Y.Base Y.Widget ✓ Event API ✓ Event API ✓ Event API ✓ Attributes ✓ Attributes ✓ Plugins ✓ Plugins ✓ UI Lifecycle YUICONF 2009Monday, January 17, 2011
  • 40. Y.extend( MyClass, Y.Widget ); Y.EventTarget Y.Base Y.Widget ✓ Event API ✓ Event API ✓ Event API ✓ Attributes ✓ Attributes ✓ Plugins ✓ Plugins ✓ UI Lifecycle YUICONF 2009Monday, January 17, 2011
  • 41. Y.extend( MyClass, Y.Base ); Y.EventTarget Y.Widget Y.Base ✓ Event API ✓ Event API ✓ ✓ Event API ✓ Attributes Plugins ✓ Attributes ✓ UI Lifecycle ✓ Plugins YUICONF 2009Monday, January 17, 2011
  • 42. Normalized subscription ✓ DOM events button.on("click", doSomething); ✓ Custom events instance.on("myEvent", doSomething); YUICONF 2009Monday, January 17, 2011
  • 43. Unified subscription ✓ DOM events button.on("click", doSomething); ✓ Custom events instance.on("myEvent", doSomething); YUICONF 2009Monday, January 17, 2011
  • 44. Your App Event API DOM Events Module/App Events YUICONF 2009Monday, January 17, 2011
  • 45. Custom DOM Events YUICONF 2009Monday, January 17, 2011
  • 46. Custom DOM Events YUICONF 2009Monday, January 17, 2011
  • 47. Custom Events more DOM like ✓ Unify Subscription API - Default behaviors - Bubbling YUICONF 2009Monday, January 17, 2011
  • 48. Custom Events more DOM like ✓ Unify Subscription API foo.on(event, fn) - Default behaviors - Bubbling YUICONF 2009Monday, January 17, 2011
  • 49. Custom Events more DOM like ✓ Unify Subscription API - Default behaviors this.publish(...) - Bubbling YUICONF 2009Monday, January 17, 2011
  • 50. Custom Events more DOM like Default behaviors YUICONF 2009Monday, January 17, 2011
  • 51. Custom Events YUI 3 this.publish("myEvent", config); instance.on("myEvent", doSomething); this.fire("myEvent"); YUICONF 2009Monday, January 17, 2011
  • 52. Custom Events YUI 3 this.publish("myEvent", config); YUICONF 2009Monday, January 17, 2011
  • 53. Default behaviors this.publish( name, config ); initializer: function () { this.publish("start", { defaultFn: this._defStartFn }); } YUICONF 2009Monday, January 17, 2011
  • 54. Default behaviors this.publish( name, config ); initializer: function () { this.publish("start", { defaultFn: this._defStartFn }); } YUICONF 2009Monday, January 17, 2011
  • 55. Default behaviors initializer: function () { ... }, _defStartFn: function (e) { Y.log("started " + e.time); this._disableControls(); this._getGoing(e.urgency); } YUICONF 2009Monday, January 17, 2011
  • 56. Event payload e.time e.urgency this.fire("start", payload); YUICONF 2009Monday, January 17, 2011
  • 57. Event payload e.time e.urgency this.fire("start", { time: new Date(), urgency: ASAP }); YUICONF 2009Monday, January 17, 2011
  • 58. instance.on("start", doSomething); this.fire("start"); YUICONF 2009Monday, January 17, 2011
  • 59. instance.on("start", doSomething); this.fire("start"); execute subscribers end yes prevented? _defStartFn no YUICONF 2009Monday, January 17, 2011
  • 60. prevented? Behavior is preventable function doSomething(e) { if (e.urgency === ASAP) { e.preventDefault(); } } YUICONF 2009Monday, January 17, 2011
  • 61. ... but it doesnt have to be initializer: function () { this.publish("start", { defaultFn: this._defStartFn, preventable: false }); } YUICONF 2009Monday, January 17, 2011
  • 62. ... but it doesnt have to be initializer: function () { this.publish("start", { defaultFn: this._defStartFn, preventedFn: this._prvStartFn }); } YUICONF 2009Monday, January 17, 2011
  • 63. YUICONF 2009Monday, January 17, 2011
  • 64. Dogfood (nom) cache.js initializer: function () { this.publish("add", { defaultFn: this._defAddFn }); this.publish("flush", { defaultFn: this._defFlushFn }); } YUICONF 2009Monday, January 17, 2011
  • 65. Dogfood (nom) console.js initializer: function () { this.publish(ENTRY, { defaultFn: this._defEntryFn }); this.publish(RESET, { defaultFn: this._defResetFn }); } YUICONF 2009Monday, January 17, 2011
  • 66. Dogfood (nom) datasource.js initializer: function () { this.publish("request", { defaultFn: Y.bind("_defRequestFn", this), queuable:true }); ... } YUICONF 2009Monday, January 17, 2011
  • 67. Dogfood (nom) drag.js initializer: function () { this.publish(EV_MOUSE_DOWN, { defaultFn: this._defMouseDownFn, bubbles: true }); ... } YUICONF 2009Monday, January 17, 2011
  • 68. Dogfood (nom) slider.js initializer: function () { this.publish(SYNC, { defaultFn: this._defSyncFn }); this.publish(POSITION_THUMB, { defaultFn: this._defPositionThumbFn }); } YUICONF 2009Monday, January 17, 2011
  • 69. Dogfood (nom) async-queue.js this.publish({ execute: { defaultFn : this._defExecFn }, shift : { defaultFn : this._defShiftFn }, add : { defaultFn : this._defAddFn }, promote: { defaultFn : this._defPromoteFn }, remove : { defaultFn : this._defRemoveFn } }); YUICONF 2009Monday, January 17, 2011
  • 70. We love default behaviors You should, too YUICONF 2009Monday, January 17, 2011
  • 71. Custom Events more DOM like ✓ Unify Subscription API ✓ Default behaviors - Bubbling YUICONF 2009Monday, January 17, 2011
  • 72. Custom Events more DOM like Bubbling YUICONF 2009Monday, January 17, 2011
  • 73. Bubbling initializer: function () { this.publish("start", { bubbles: true }); this.addTarget(host); } YUICONF 2009Monday, January 17, 2011
  • 74. Bubbling initializer: function () { this.publish("start", { broadcast: 1 }); } YUICONF 2009Monday, January 17, 2011
  • 75. Bubbling initializer: function () { this.publish("start", { bubbles: true, stoppedFn: this._stopStartFn }); } YUICONF 2009Monday, January 17, 2011
  • 76. Event Delegation <UL> <li>one</li> <li>two</li> Y.all(li) <li>three</li> .on(click, sayHi); <li>four</li> <li>five</li> <li>six</li> YUICONF 2009Monday, January 17, 2011
  • 77. Event Delegation <UL> <li>one</li> <li>two</li> Y.all(li) <li>three</li> .on(click, sayHi); <li>four</li> <li>five</li> 6 subscriptions <li>six</li> YUICONF 2009Monday, January 17, 2011
  • 78. Event Delegation <UL> Y.one(ul) .on(click, sayHi); <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> <li>six</li> YUICONF 2009Monday, January 17, 2011
  • 79. Event Delegation <UL> Y.one(ul) .on(click, sayHi); <li>one</li> <li>two</li> 1 subscription <li>three</li> <li>four</li> <li>five</li> <li>six</li> YUICONF 2009Monday, January 17, 2011
  • 80. Event Delegation <UL> Y.one(ul).delegate( click,sayHi,li); <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> <li>six</li> YUICONF 2009Monday, January 17, 2011
  • 81. Event Delegation <UL> Y.one(ul).delegate( click,sayHi,li); <li>one</li> <li>two</li> 1 subscription <li>three</li> <li>four</li> <li>five</li> <li>six</li> YUICONF 2009Monday, January 17, 2011
  • 82. Event Delegation instance1 instance1.on(start, sayHi); instance2 instance2.on(start, sayHi); instance3 instance3.on(start, sayHi); instance4 instance4.on(start, sayHi); instance5 instance5.on(start, sayHi); instance6 instance6.on(start, sayHi); YUICONF 2009Monday, January 17, 2011
  • 83. Event Delegation 6 subscriptions instance1 instance1.on(start, sayHi); instance2 instance2.on(start, sayHi); instance3 instance3.on(start, sayHi); instance4 instance4.on(start, sayHi); instance5 instance5.on(start, sayHi); instance6 instance6.on(start, sayHi); YUICONF 2009Monday, January 17, 2011
  • 84. Event Delegation ManagerClass Mgr.on(foo:start, sayHi); instance1 instance2 instance3 instance4 instance5 instance6 YUICONF 2009Monday, January 17, 2011
  • 85. Event Delegation ManagerClass Mgr.on(foo:start, sayHi); instance1 instance2 1 subscription instance3 instance4 instance5 instance6 YUICONF 2009Monday, January 17, 2011
  • 86. Event Delegation ManagerClass Mgr.on(foo:start, sayHi); instance1 instance2 1 subscription instance3 instance4 initializer: function () { this.addTarget( instance5 this.get("host"); ); instance6 } YUICONF 2009Monday, January 17, 2011
  • 87. Dogfood Drag and Drop var draggable = new Y.DD.Drag({ node: #dragme }); draggable.on(start, doSomething); YUICONF 2009Monday, January 17, 2011
  • 88. Dogfood Drag and Drop var draggable = new Y.DD.Drag({ node: #dragme }); Y.DD.DDM.on(drag:start, doSomething); YUICONF 2009Monday, January 17, 2011
  • 89. Dogfood Y.Global Y.on(yui:log, doSomething); Y.Global.on(yui:log, doSomething); YUICONF 2009Monday, January 17, 2011
  • 90. Custom Events more DOM like ✓ Unify Subscription API ✓ Default behaviors ✓ Bubbling YUICONF 2009Monday, January 17, 2011
  • 91. Custom DOM Events YUICONF 2009Monday, January 17, 2011
  • 92. Above and beyond YUICONF 2009Monday, January 17, 2011
  • 93. Above and beyond - Subscription context override YUICONF 2009Monday, January 17, 2011
  • 94. Above and beyond - Subscription context override - Subscription payload YUICONF 2009Monday, January 17, 2011
  • 95. Above and beyond - Subscription context override - Subscription payload - Easy event detach YUICONF 2009Monday, January 17, 2011
  • 96. Above and beyond - Subscription context override - Subscription payload - Easy event detach - "After" subscriptions YUICONF 2009Monday, January 17, 2011
  • 97. Above and beyond - Subscription context override - Subscription payload - Easy event detach - "After" subscriptions - New DOM events YUICONF 2009Monday, January 17, 2011
  • 98. on()++ instance.on("start", myObj.startHandler); YUICONF 2009Monday, January 17, 2011
  • 99. on()++ instance.on("start", Y.bind(myObj.startHandler, myObj)); YUICONF 2009Monday, January 17, 2011
  • 100. on()++ instance.on("start", myObj.startHandler, myObj); instance.on(event, handler, context); YUICONF 2009Monday, January 17, 2011
  • 101. on()++ node.on("click", myObj.clickHandler, myObj); instance.on(event, handler, context); node.on(event, handler, context); YUICONF 2009Monday, January 17, 2011
  • 102. on()++ instance.on("start", myObj.startHandler); YUICONF 2009Monday, January 17, 2011
  • 103. on()++ instance.on("start", Y.rbind(myObj.startHandler, myObj, 1, new Date(), { foo: "bar" })); YUICONF 2009Monday, January 17, 2011
  • 104. on()++ instance.on("start", myObj.startHandler, myObj, 1, new Date(), { foo: "bar" }); instance.on(evt, fn, ctx, arg1, ...argN); node.on(evt, fn, ctx, arg1, ...argN); YUICONF 2009Monday, January 17, 2011
  • 105. on()++ instance.on("start", myObj.startHandler, myObj, 1, new Date(), { foo: "bar" }); instance.on(evt, fn, ctx, arg1, ...argN); node.on(evt, fn, ctx, arg1, ...argN); node.on(evt, fn, null, arg1, ...argN); YUICONF 2009Monday, January 17, 2011
  • 106. Above and beyond ✓ Subscription context override ✓ Subscription payload - Easy event detach - "After" subscriptions - New DOM events YUICONF 2009Monday, January 17, 2011
  • 107. Above and beyond ✓ Subscription context override ✓ Subscription payload - Easy event detach - "After" subscriptions - New DOM events YUICONF 2009Monday, January 17, 2011
  • 108. Handles and categories button.detach("click", doSomething); YUICONF 2009Monday, January 17, 2011
  • 109. Handles and categories button.detach("click", doSomething); var sub = button.on("click", doSomething); sub.detach(); YUICONF 2009Monday, January 17, 2011
  • 110. Handles and categories button.detach("click", doSomething); var sub = button.on("click", doSomething); sub.detach(); button.on("my-cat|click", doSomething); button.detach("my-cat|click"); YUICONF 2009Monday, January 17, 2011
  • 111. Handles and categories button.detach("click", doSomething); var sub = button.on("click", doSomething); sub.detach(); widget.on("guid|xChange", handleXChange); widget.on("guid|yChange", handleYChange); widget.detach("guid|*"); YUICONF 2009Monday, January 17, 2011
  • 112. Above and beyond ✓ Subscription context override ✓ Subscription payload ✓ Easy event detach - "After" subscriptions - New DOM events YUICONF 2009Monday, January 17, 2011
  • 113. Above and beyond ✓ Subscription context override ✓ Subscription payload ✓ Easy event detach - "After" subscriptions - New DOM events YUICONF 2009Monday, January 17, 2011
  • 114. event instance.on(event,handler) _defEventFn instance YUICONF 2009Monday, January 17, 2011
  • 115. event instance.on(event,handler) _defEventFn instance.after(event,handler) instance YUICONF 2009Monday, January 17, 2011
  • 116. Y.Base ✓ Event API ✓ Attributes After moments ✓ Plugins this.after("attrChange", this._updateUI); YUICONF 2009Monday, January 17, 2011
  • 117. Y.Base ✓ Event API ✓ Attributes After moments ✓ Plugins this.after("attrChange", this._updateUI); Side effects of a state change YUICONF 2009Monday, January 17, 2011
  • 118. event instance.on(event,handler) _defEventFn instance.after(event,handler) instance YUICONF 2009Monday, January 17, 2011
  • 119. State UNCHANGED event instance.on(event,handler) _defEventFn instance.after(event,handler) instance YUICONF 2009Monday, January 17, 2011
  • 120. State UNCHANGED event instance.on(event,handler) Change state _defEventFn instance.after(event,handler) instance YUICONF 2009Monday, January 17, 2011
  • 121. State UNCHANGED event instance.on(event,handler) Change state _defEventFn instance.after(event,handler) State CHANGED instance YUICONF 2009Monday, January 17, 2011
  • 122. YUICONF 2009Monday, January 17, 2011
  • 123. Above and beyond ✓ Subscription context override ✓ Subscription payload ✓ Easy event detach ✓ "After" subscriptions - New DOM events YUICONF 2009Monday, January 17, 2011
  • 124. Above and beyond ✓ Subscription context override ✓ Subscription payload ✓ Easy event detach ✓ "After" subscriptions - New DOM events YUICONF 2009Monday, January 17, 2011
  • 125. DOM++ Y.Env.evt.plugins.YOUR_EVENT = Y.Node.DOM_EVENTS.YOUR_EVENT = { on: function (type, handler, ctx) { } } YUICONF 2009Monday, January 17, 2011
  • 126. DOM++ Y.Env.evt.plugins.YOUR_EVENT = Y.Node.DOM_EVENTS.YOUR_EVENT = { on: function (type, handler, ctx) { } } YUICONF 2009Monday, January 17, 2011
  • 127. Konami Y.Env.evt.plugins.konami = Y.Node.DOM_EVENTS.konami = { } YUICONF 2009Monday, January 17, 2011
  • 128. Konami Y.Env.evt.plugins.konami = Y.Node.DOM_EVENTS.konami = { on: function (type, fn, ctx) { var progress = {}, handlers = {}, keys = [38,38,40,40,37,39,37,39,66,65], ... node.on("keydown", _checkProgress); return detachHandle; } YUICONF 2009Monday, January 17, 2011
  • 129. Using your event node.on(konami, addUnicorns); YUICONF 2009Monday, January 17, 2011
  • 130. Above and beyond ✓ Subscription context override ✓ Subscription payload ✓ Easy event detach ✓ "After" subscriptions ✓ New DOM events YUICONF 2009Monday, January 17, 2011
  • 131. Summary ✓ Unified subscription ✓ Default behaviors ✓ Bubbling Custom ✓ Context override DOM Events ✓ Subscription payload ✓ Easy event detach ✓ "After" subscriptions ✓ New DOM events YUICONF 2009Monday, January 17, 2011
  • 132. Rethink how you use events YUICONF 2009Monday, January 17, 2011
  • 133. Rethink how you build your apps YUICONF 2009Monday, January 17, 2011
  • 134. Image credit http://www.redandgreen.org/R2Kphotos2.htm (revolution) http://www.vinylrecords.ch/B/BE/Beatles/ http://www.flickr.com/photos/farewell_goodnight/214712018/ http://www.flickr.com/photos/docman/2948845217/ http://www.flickr.com/photos/yabanji/3175297773/ http://www.flickr.com/photos/hueyatl/233553293/ http://www.flickr.com/photos/dark_hylian/56050955/ http://www.flickr.com/photos/techthis/3528776386/ YUICONF 2009Monday, January 17, 2011