Events & Actions in Ember.js

by Luke Melia

Slide 1

Slide 1 text

Ember.js: Understanding Events & Actions Luke Melia Boston Ember.js September 12th, 2013 Thursday, September 19, 13

Slide 2

Slide 2 text

About this Embereño 2 Thursday, September 19, 13

Slide 3

Slide 3 text

Relevant Experience 3 2 Years of Ember under my belt Thursday, September 19, 13

Slide 4

Slide 4 text

Relevant Experience 4 6 Consumer-grade Ember.js apps Thursday, September 19, 13

Slide 5

Slide 5 text

Relevant Experience 5 40+ Commits to Ember.js Thursday, September 19, 13

Slide 6

Slide 6 text

Ember.js NYC Meetup http://www.meetup.com/EmberJS-NYC/ 6 Thursday, September 19, 13

Slide 7

Slide 7 text

Understanding events and actions in Ember will help your build maintainable apps. 7 Thursday, September 19, 13

Slide 8

Slide 8 text

Understanding events and actions in Ember will help your build maintainable apps. 7 Let’s dig in. Thursday, September 19, 13

Slide 9

Slide 9 text

What’s an event? What’s an action? 8 Thursday, September 19, 13

Slide 10

Slide 10 text

9 Events Example: DOM events become events on a view... Thursday, September 19, 13

Slide 11

Slide 11 text

10 ...and Ember’s lifecycle events work similarly Thursday, September 19, 13

Slide 12

Slide 12 text

11 Actions Example: Initiated on click of a person in a list... Thursday, September 19, 13

Slide 13

Slide 13 text

12 ...and handled in a Route... Thursday, September 19, 13

Slide 14

Slide 14 text

13 ...or perhaps a Controller Thursday, September 19, 13

Slide 15

Slide 15 text

General beneﬁts of both actions & events ★ Uni-directional ★ No need to be aware of collaborators ★ Easy refactoring ★ “Loose coupling” 14 Thursday, September 19, 13

Slide 16

Slide 16 text

Events are like a Town Crier. “Hear ye, hear ye, the new mayor of Provincetown is Brian Cardarella!” 15 Thursday, September 19, 13

Slide 17

Slide 17 text

Actions are like Captain Picard. “Make it so, Number One.” 16 Thursday, September 19, 13

Slide 18

Slide 18 text

Events may be handled. Actions must be handled. 17 Thursday, September 19, 13

Slide 19

Slide 19 text

Actions are in the high-level language of the application. 18 Thursday, September 19, 13

Slide 20

Slide 20 text

Events are in the low-level language of a local component. 19 Thursday, September 19, 13

Slide 21

Slide 21 text

Events in Depth 20 ★Ember’s event primitives ★Ember.Evented ★.on(eventName) ★.on(‘init’) ★events in Ember Views Thursday, September 19, 13

Slide 22

Slide 22 text

Ember’s Event Primitives addListener, sendEvent 21 Thursday, September 19, 13

Slide 23

Slide 23 text

Ember’s Event Primitives addListener, sendEvent 21 Thursday, September 19, 13

Slide 24

Slide 24 text

Ember’s Event Primitives removeListener 22 Thursday, September 19, 13

Slide 25

Slide 25 text

Ember’s Event Primitives removeListener 22 removes all listeners if no function is speciﬁed Thursday, September 19, 13

Slide 26

Slide 26 text

Ember’s Event Primitives addListener for one-time only 23 Thursday, September 19, 13

Slide 27

Slide 27 text

Ember.Evented This mixin lets Ember objects emit and/or subscribe to events. 24 Thursday, September 19, 13

Slide 28

Slide 28 text

Ember.Evented This mixin lets Ember objects emit and/or subscribe to events. 24 Thursday, September 19, 13

Slide 29

Slide 29 text

Ember.Evented 25 Thursday, September 19, 13

Slide 30

Slide 30 text

.on(eventName) for function properties 26 Thursday, September 19, 13

Slide 31

Slide 31 text

.on(‘init’) is built-in 27 Thursday, September 19, 13

Slide 32

Slide 32 text

Ember.View: lifecycle events 28 Thursday, September 19, 13

Slide 33

Slide 33 text

Ember.View: event handlers as simple methods 29 Thursday, September 19, 13

Slide 34

Slide 34 text

Ember.View has a custom `trigger` 30 Thursday, September 19, 13

Slide 35

Slide 35 text

DOM Events in Ember 31 ■EventDispatcher sets up event delegation for many common DOM events and triggers events on the appropriate Ember View. ■Event names roughly match DOM event names. ■Views can optionally have an `eventManager` Thursday, September 19, 13

Slide 36

Slide 36 text

The More You Know™ 32 ■Events can be triggered with optional arguments, and listeners will receive them ■Ember.Evented#has lets you check to see if there are any listeners for an event name. Thursday, September 19, 13

Slide 37

Slide 37 text

Actions in Depth 33 ★Actions helper ★General ﬂow ★Actions helper options & limitations ★Actions hash semantics ★The Router and events Thursday, September 19, 13

Slide 38

Slide 38 text

34 Back to our Actions example Thursday, September 19, 13

Slide 39

Slide 39 text

35 At a high level... Template/ View Controller Router action action Thursday, September 19, 13

Slide 40

Slide 40 text

35 At a high level... Template/ View Controller Router action action Template/ View Target action Thursday, September 19, 13

Slide 41

Slide 41 text

35 At a high level... Template/ View Controller Router action action Template/ View Target action Controller Target action Thursday, September 19, 13

Slide 42

Slide 42 text

Action handlers are deﬁned in an `actions` hash 36 Thursday, September 19, 13

Slide 43

Slide 43 text

Actions helper options 37 Thursday, September 19, 13

Slide 44

Slide 44 text

Limitation: multiple action helpers 38 Not Supported Note: This should become possible in a future version of Ember via HTMLBars Thursday, September 19, 13

Slide 45

Slide 45 text

Controller targets ■ By default, the router is injected as `target` ■ Sometimes, Ember sets a controller’s `target` is set to another controller ■ {{render}} sets rendered controller to the template’s `controller` ■ {{each}} with an itemController, itemController instances `targets` are set to the parent 39 Thursday, September 19, 13

Slide 46

Slide 46 text

Actions hash semantics: this 40 Thursday, September 19, 13

Slide 47

Slide 47 text

Actions hash semantics: _super 41 Thursday, September 19, 13

Slide 48

Slide 48 text

42 The Ember Router is a state machine ■ State machines are a proven way to reduce complexity in apps ■ External components send actions to a state machine without knowing what state it is in – the current state will handle it ■ Similar win as polymorphism – very decoupled Thursday, September 19, 13

Slide 49

Slide 49 text

43 The Ember Router is a state machine Template Thursday, September 19, 13

Slide 50

Slide 50 text

43 The Ember Router is a state machine Template Router action Thursday, September 19, 13

Slide 51

Slide 51 text

43 The Ember Router is a state machine Template Router Current Route action action Thursday, September 19, 13

Slide 52

Slide 52 text

43 The Ember Router is a state machine Template Router Current Route action action Template Router Product Route logout logout OrderConﬁrmation Route vs. Thursday, September 19, 13

Slide 53

Slide 53 text

44 The Ember Router is a hierarchical state machine ■ Hierarchical state machines allow better modeling of common event handling ■ Actions start at the current route and ﬂow up to parent routes until a route handles it ■ The router provides a natural hierarchy Thursday, September 19, 13

Slide 54

Slide 54 text

45 The Ember Router is a hierarchical state machine Thursday, September 19, 13

Slide 55

Slide 55 text

46 The Ember Router is a hierarchical state machine ApplicationRoute ProductRoute OrderRoute ShippingRoute BillingRoute ConﬁrmationRoute Thursday, September 19, 13

Slide 56

Slide 56 text

47 The Ember Router is a hierarchical state machine ApplicationRoute ProductRoute OrderRoute ShippingRoute BillingRoute ConﬁrmationRoute ApplicationRoute OrderRoute BillingRoute Thursday, September 19, 13

Slide 57

Slide 57 text

47 The Ember Router is a hierarchical state machine ApplicationRoute ProductRoute OrderRoute ShippingRoute BillingRoute ConﬁrmationRoute Thursday, September 19, 13

Slide 58

Slide 58 text

The More You Know 48 ■ Return true from an action handler to keep the action bubbling ■ Power move: use a stateManager for an action target Thursday, September 19, 13

Slide 59

Slide 59 text

The More You Know 49 ■ Mixin Ember.TargetActionSupport to give an object the ability to trigger an action. (Use ViewTargetActionSupport for views.) ■ Mixin Ember.ActionHandler to give an object the ability to be a target. Thursday, September 19, 13

Slide 60

Slide 60 text

Actions and components: local actions 50 Thursday, September 19, 13

Slide 61

Slide 61 text

Actions and components: emitting actions 51 Thursday, September 19, 13

Slide 62

Slide 62 text

Actions and components: emitting actions 51 Thursday, September 19, 13

Slide 63

Slide 63 text

52 Thanks to awesome Flickr people http://www.flickr.com/photos/69294818@N07/8665563301 http://www.flickr.com/photos/69294818@N07/8567914425 http://www.flickr.com/photos/louish/5365383945 http://www.flickr.com/photos/69294818@N07/8613982513 http://www.flickr.com/photos/boston_public_library/2381603470 http://www.flickr.com/photos/universalpops/5818737203 http://www.flickr.com/photos/zerega/1366292835 http://www.flickr.com/photos/zerega/1366292835 http://www.flickr.com/photos/69294818@N07/8567623655 http://www.flickr.com/photos/atwestern/9198331693 http://www.flickr.com/photos/alanrmiles/3405474639 http://www.flickr.com/photos/onesevenone/4051045279 http://www.flickr.com/photos/digiart2001/3611238793 http://www.flickr.com/photos/posterboynyc/8737852416 http://www.flickr.com/photos/dcreeves2000/114712202 http://www.flickr.com/photos/23912576@N05/2883743786 Thursday, September 19, 13

Slide 64

Slide 64 text

53 Follow me @lukemelia Luke and Yapp Labs are available for Ember.js-related consulting and training. Contact [email protected]. Q & A Thursday, September 19, 13