Event Driven Architecture

2,320 views

Published on

Talk given at the OttawaJS meetup on December 11, 2013

Published in: Technology, News & Politics
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,320
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
16
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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…
  16. 16. CUSTOM EVENTS
  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
  27. 27. MODULE NOTIFIES MEDIATOR
  28. 28. MEDIATOR NOTIFIES MODULES
  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

×