Talk given at the OttawaJS meetup on December 11, 2013

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
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. 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
'click' event on parent
+ event bubbling
Clicked:
Clicked:
1
2
3
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. DVadvnLsee('lc' fnto (et){
I.dEetitnr cik, ucin
v
/ lg ettre.oeae
/ o: v.agtndNm;
} fle)
, as ;
Target:
1
2
3

14. SO…
$ PRN )o('lc' CID f )
( AET .n cik, HL, 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
TRE.dEetitnr
AGTadvnLsee(
'eOtwJ'
hytaaS,
fnto (eet){
ucin
vn
cnoelg eetdti.esg )
osl.o( vn.ealmsae ;
}
)
;

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. TRIGGER A CUSTOM EVENT
TRE.ipthvn(cv )
AGTdsacEet Et ;

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
mdao.usrb(
eitrsbcie
'eOtwJ'
hytaaS,
fnto (dt ){
ucin
aa
cnoelg dt )
osl.o( aa ;
}
)
;
mdao.uls('eOtwJ' {k ''})
eitrpbih hytaaS,
: 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