Event Driven Architecture

2a622fe29c34d10f5edbcf3ea15e1bf1?s=47 Fabien Doiron
December 12, 2013

Event Driven Architecture

Talk given at the OttawaJS meetup on December 11, 2013

Links:
- CanvasPop: http://www.canvaspop.com
- DNA11: http://www.dna11.com
- Crated: http://www.crated.com
- CanvasPop Photo Print API: http://developers.canvaspop.com

- DOM Events: http://en.wikipedia.org/wiki/DOM_Events
- Custom Events: https://developer.mozilla.org/en/docs/Web/API/CustomEvent
- Scalable JS Design Patterns: http://addyosmani.com/scalablejs/
- Introduction to DOM Events: http://coding.smashingmagazine.com/2013/11/12/an-introduction-to-dom-events/

2a622fe29c34d10f5edbcf3ea15e1bf1?s=128

Fabien Doiron

December 12, 2013
Tweet

Transcript

  1. EVENT DRIVEN ARCHITECTURE / Fabien Doiron @fabien_doiron

  2. WHAT'S INSIDE? DOM Events Custom Events Pub/Sub Design Pattern (AKA

    Observer)
  3. FABIEN DOIRON Software Developer - Front End

  4. DOM EVENTS

  5. MOUSE EVENTS click, dblclick, mousedown, mouseup, mouseover… KEYBOARD EVENTS keydown,

    keypress, keyup
  6. FORM EVENTS select, change, submit, reset, focus, blur… OTHER EVENTS

    load, unload, error, resize, scroll…
  7. USAGE T A R G E T . a d

    d E v e n t L i s t e n e r ( ' c l i c k ' , f n , f a l s e ) ; T A R G E T . r e m o v e E v e n t L i s t e n e r ( ' c l i c k ' , f n , f a l s e ) ; Third parameter ' u s e C a p t u r e ' is now optional including it is safer
  8. CAPTURE, TARGET & BUBBLING 3 phases of event propagation

  9. from W3C

  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. WHY IS THIS EVENT BUBBLING USEFUL? 'click' event on children

    + new Clicked: 1 2 3 'click' event on parent + event bubbling Clicked: 1 2 3
  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. D I V . a d d E v e

    n t L i s t e n e r ( ' c l i c k ' , f u n c t i o n ( e v t ) { / / l o g : e v t . t a r g e t . n o d e N a m e ; } , f a l s e ) ; Target: 1 2 3
  14. SO… $ ( P A R E N T )

    . o n ( ' c l i c k ' , C H I L D , f n ) ;
  15. NOTE: NOT ALL EVENTS BUBBLE load, unload, focus, blur…

  16. CUSTOM EVENTS

  17. WHAT? Events initialized by the application Can be anything you

    want
  18. WHY? Loosely coupled architecture Smaller units of code Easy to

    extend functionality
  19. SET A LISTENER T A R G E T .

    a d d E v e n t L i s t e n e r ( ' h e y O t t a w a J S ' , f u n c t i o n ( e v e n t ) { c o n s o l e . l o g ( e v e n t . d e t a i l . m e s s a g e ) ; } ) ;
  20. CREATE A CUSTOM EVENT v a r c E v

    t = n e w C u s t o m E v e n t ( ' h e y O t t a w a J S ' , { d e t a i l : { m e s s a g e : ' b a d a s s ! ' } , b u b b l e s : f a l s e , c a n c e l a b l e : f a l s e } ) ;
  21. TRIGGER A CUSTOM EVENT T A R G E T

    . d i s p a t c h E v e n t ( c E v t ) ;
  22. IN ACTION Adding user: Fred Flintstone Pebbles Flintstone Barney Rubble

    Bamm-Bamm Rubble
  23. PUB/SUB PATTERN AKA Observer

  24. INTENT Define one-to-many dependency between objects One object changes, notify

    and update all dependencies
  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. AIR TRAFFIC CONTROL Metaphor from Addy Osmani: Scalable JS Design

    Patterns
  27. MODULE NOTIFIES MEDIATOR

  28. MEDIATOR NOTIFIES MODULES

  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. BASIC EXAMPLE m e d i a t o r

    . s u b s c r i b e ( ' h e y O t t a w a J S ' , f u n c t i o n ( d a t a ) { c o n s o l e . l o g ( d a t a ) ; } ) ; m e d i a t o r . p u b l i s h ( ' h e y O t t a w a J S ' , { k : ' v ' } ) ;
  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. The feeling you'll get using an EVENT DRIVEN ARCHITECTURE

  33. RESOURCES DOM Events Custom Event MDN Scalable JS Design Patterns

    Introduction to DOM Events
  34. QUESTIONS? / Fabien Doiron @fabien_doiron