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/

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