Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Event Driven Architecture


Published on

Talk given at the OttawaJS meetup on December 11, 2013

Published in: Technology, News & Politics
  • Be the first to comment

Event Driven Architecture

  1. 1. EVENT DRIVEN ARCHITECTURE Fabien Doiron / @fabien_doiron
  2. 2. WHAT'S INSIDE? DOM Events Custom Events Pub/Sub Design Pattern (AKA Observer)
  3. 3. FABIEN DOIRON Software Developer - Front End
  4. 4. DOM EVENTS
  5. 5. MOUSE EVENTS click, dblclick, mousedown, mouseup, mouseover… KEYBOARD EVENTS keydown, keypress, keyup
  6. 6. FORM EVENTS select, change, submit, reset, focus, blur… OTHER EVENTS load, unload, error, resize, scroll…
  7. 7. USAGE TRE.dEetitnr 'lc' f,fle) AGTadvnLsee( cik, n as ; TRE.eoevnLsee('lc' f,fle) AGTrmvEetitnr cik, n as ; Third parameter ' s C p u e is now optional ueatr' including it is safer
  8. 8. CAPTURE, TARGET & BUBBLING 3 phases of event propagation
  9. 9. from W3C
  10. 10. CAPTURE PHASE Starts at the outer most and ends at the inner most element Can generally be ignored TARGET PHASE Event is dispatched to the target element BUBBLING PHASE Starts at the inner most and ends at the outer most element Extremely useful
  11. 11. WHY IS THIS EVENT BUBBLING USEFUL? 'click' event on children + new 'click' event on parent + event bubbling Clicked: Clicked: 1 2 3 1 2 3
  12. 12. HOW EXACTLY DOES IT WORK? Events are fired from the inner most element E.g. Children of the element with the event listener
  13. 13. DVadvnLsee('lc' fnto (et){ I.dEetitnr cik, ucin v / lg ettre.oeae / o: v.agtndNm; } fle) , as ; Target: 1 2 3
  14. 14. SO… $ PRN )o('lc' CID f ) ( AET .n cik, HL, n ;
  15. 15. NOTE: NOT ALL EVENTS BUBBLE load, unload, focus, blur…
  17. 17. WHAT? Events initialized by the application Can be anything you want
  18. 18. WHY? Loosely coupled architecture Smaller units of code Easy to extend functionality
  19. 19. SET A LISTENER TRE.dEetitnr AGTadvnLsee( 'eOtwJ' hytaaS, fnto (eet){ ucin vn cnoelg eetdti.esg ) osl.o( vn.ealmsae ; } ) ;
  20. 20. CREATE A CUSTOM EVENT vrcv =nwCsoEet a Et e utmvn( 'eOtwJ' hytaaS, { dti:{ eal msae 'aas' esg: bds! } , bbls fle ube: as, cneal:fle aclbe as } ) ;
  21. 21. TRIGGER A CUSTOM EVENT TRE.ipthvn(cv ) AGTdsacEet Et ;
  22. 22. IN ACTION Adding user: Fred Flintstone Pebbles Flintstone Barney Rubble Bamm-Bamm Rubble
  23. 23. PUB/SUB PATTERN AKA Observer
  24. 24. INTENT Define one-to-many dependency between objects One object changes, notify and update all dependencies
  25. 25. ADDING A MEDIATOR TO YOUR APP Central location to handle communication Modules don't need to know anything about other modules Modules can focus on the single responsibility principle
  26. 26. AIR TRAFFIC CONTROL Metaphor from Addy Osmani: Scalable JS Design Patterns
  29. 29. TAKING IT FURTHER Tons of pub/sub libraries Yes, jQuery has an implementation, sort of using 'on' and 'trigger' Not too complex to write
  30. 30. BASIC EXAMPLE mdao.usrb( eitrsbcie 'eOtwJ' hytaaS, fnto (dt ){ ucin aa cnoelg dt ) osl.o( aa ; } ) ; mdao.uls('eOtwJ' {k ''}) eitrpbih hytaaS, : v ;
  31. 31. BENEFITS Loosely coupled architecture Smaller units of code Easy to extend functionality CONS assume that subscribers exist not easy to resolve a failed publisher increased number of messages can lead to instabilities
  32. 32. The feeling you'll get using an EVENT DRIVEN ARCHITECTURE
  33. 33. RESOURCES DOM Events Custom Event MDN Scalable JS Design Patterns Introduction to DOM Events
  34. 34. QUESTIONS? Fabien Doiron / @fabien_doiron