somepatterns

264 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
264
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

somepatterns

  1. 1. observer: a pattern ben shine wells fargo 1.29.2009
  2. 2. The problem <ul><ul><li>One nugget of data needs to be visually represented several places on the page </li></ul></ul><ul><ul><ul><li>a radio button group that chooses a visual theme </li></ul></ul></ul><ul><ul><ul><li>show user's account name several places on the page </li></ul></ul></ul><ul><li>. </li></ul>
  3. 3. the danger <ul><li>spaghetti! </li></ul><ul><li>(a tangle of heterogenous dependency-propagation strategies) </li></ul>
  4. 4. Starts out clean... <ul><li>Maybe just a header: </li></ul><ul><li>Welcome, <user>! .... </li></ul><ul><li>then add &quot;Logout <user>&quot; </li></ul><ul><li>then add &quot;Change username&quot; </li></ul>
  5. 5. exponential ugliness <ul><li>...then add another dimension... </li></ul><ul><li>&quot;Select your language: English / Spanish / French&quot; </li></ul><ul><li>...then add another engineer ... </li></ul><ul><li>...then add a bug fix ... </li></ul><ul><li>...then change the requirements : </li></ul><ul><li>suddenly users can have a different username and display name, which can change independently... </li></ul>
  6. 6. pretty soon you've got spaghetti! <ul><li>(a tangle of heterogenous dependency-propagation strategies) </li></ul><ul><ul><li>hard to track </li></ul></ul><ul><ul><li>hard to debug </li></ul></ul><ul><ul><li>hard to extend </li></ul></ul>
  7. 7. a possible solution <ul><ul><li>Unify the dependency propagation pattern </li></ul></ul><ul><ul><li>a behavioral pattern </li></ul></ul>
  8. 8. Observer <ul><ul><li>One-to-many relationship between a set of objects </li></ul></ul><ul><ul><li>When the state of The One Object changes, all observers are notified. </li></ul></ul>
  9. 9. participants <ul><li>Subject </li></ul><ul><li>Observer </li></ul><ul><li>ConcreteSubject </li></ul><ul><li>ConcreteObserver </li></ul>
  10. 10. apliccability <ul><ul><li>When a change to one object requires changing others, and it's not known in advance how many objects need to be changed. </li></ul></ul><ul><ul><li>When an object should be able to notify other objects without making assumptions about who these objects are. </li></ul></ul><ul><ul><li>loose coupling between model and view </li></ul></ul>
  11. 11. in YUI <ul><li>var oElement = document.getElementById </li></ul><ul><li>( &quot;elementid&quot; ); </li></ul><ul><li>function fnCallback(e) { alert(&quot;click&quot;); } </li></ul><ul><li>YAHOO.util.Event.addListener( </li></ul><ul><li>oElement, </li></ul><ul><li>&quot;click&quot;, </li></ul><ul><li>fnCallback ); </li></ul><ul><li>except that's a *function* listener, and the Observer pattern is kind of more about an object listener... </li></ul>
  12. 12. In Prototype... <ul><li>var el = $('thatThing'); </li></ul><ul><li>var SpecialObserver = Class.create( {... </li></ul><ul><li>handleClick : function (event) { ... } </li></ul><ul><li>}); </li></ul><ul><li>var specialThing = new SpecialObserver()... </li></ul><ul><li>el.observe('click', SpecialObserver.handleClick.bindAsEventListener( specialThing ); </li></ul>
  13. 13. walks like a duck <ul><li>in java/c++/c# you have to declare your interfaces at compile time </li></ul><ul><li>(mostly)... </li></ul><ul><li>less of a hassle in javascript </li></ul>
  14. 14. alternatives <ul><ul><li>explicit lists of dependencies (makefiles) </li></ul></ul><ul><ul><li>variable expansion (ant) </li></ul></ul><ul><ul><li>explicitly-coded wiring </li></ul></ul>
  15. 15. sort of aka &quot;listeners&quot; <ul><ul><li>Pure DOM: addEventListener </li></ul></ul><ul><ul><li>Prototype: element.observe </li></ul></ul><ul><ul><li>The difference: </li></ul></ul><ul><ul><ul><li>are you listening for an event to happen, or monitoring a value that might change? </li></ul></ul></ul>

×