Events & Actions in Ember.js

Understanding events & actions (and the differences between them) will help you build cleaner, more maintainable Ember.js apps.

Transcript

1. Ember.js: Understanding Events & Actions Luke Melia Boston Ember.js September 12th, 2013 Thursday, September 19, 13
2. About this Embereño 2 Thursday, September 19, 13
3. Relevant Experience 3 2 Years of Ember under my belt Thursday, September 19, 13
4. Relevant Experience 4 6 Consumer-grade Ember.js apps Thursday, September 19, 13
5. Relevant Experience 5 40+ Commits to Ember.js Thursday, September 19, 13
6. Ember.js NYC Meetup http://www.meetup.com/EmberJS-NYC/ 6 Thursday, September 19, 13
7. Understanding events and actions in Ember will help your build maintainable apps. 7 Thursday, September 19, 13
8. Understanding events and actions in Ember will help your build maintainable apps. 7 Let’s dig in. Thursday, September 19, 13
9. What’s an event? What’s an action? 8 Thursday, September 19, 13
10. 9 Events Example: DOM events become events on a view... Thursday, September 19, 13
11. 10 ...and Ember’s lifecycle events work similarly Thursday, September 19, 13
12. 11 Actions Example: Initiated on click of a person in a list... Thursday, September 19, 13
13. 12 ...and handled in a Route... Thursday, September 19, 13
14. 13 ...or perhaps a Controller Thursday, September 19, 13
15. General benefits of both actions & events ★ Uni-directional ★ No need to be aware of collaborators ★ Easy refactoring ★ “Loose coupling” 14 Thursday, September 19, 13
16. Events are like a Town Crier. “Hear ye, hear ye, the new mayor of Provincetown is Brian Cardarella!” 15 Thursday, September 19, 13
17. Actions are like Captain Picard. “Make it so, Number One.” 16 Thursday, September 19, 13
18. Events may be handled. Actions must be handled. 17 Thursday, September 19, 13
19. Actions are in the high-level language of the application. 18 Thursday, September 19, 13
20. Events are in the low-level language of a local component. 19 Thursday, September 19, 13
21. Events in Depth 20 ★Ember’s event primitives ★Ember.Evented ★.on(eventName) ★.on(‘init’) ★events in Ember Views Thursday, September 19, 13
22. Ember’s Event Primitives addListener, sendEvent 21 Thursday, September 19, 13
23. Ember’s Event Primitives addListener, sendEvent 21 Thursday, September 19, 13
24. Ember’s Event Primitives removeListener 22 Thursday, September 19, 13
25. Ember’s Event Primitives removeListener 22 removes all listeners if no function is specified Thursday, September 19, 13
26. Ember’s Event Primitives addListener for one-time only 23 Thursday, September 19, 13
27. Ember.Evented This mixin lets Ember objects emit and/or subscribe to events. 24 Thursday, September 19, 13
28. Ember.Evented This mixin lets Ember objects emit and/or subscribe to events. 24 Thursday, September 19, 13
29. Ember.Evented 25 Thursday, September 19, 13
30. .on(eventName) for function properties 26 Thursday, September 19, 13
31. .on(‘init’) is built-in 27 Thursday, September 19, 13
32. Ember.View: lifecycle events 28 Thursday, September 19, 13
33. Ember.View: event handlers as simple methods 29 Thursday, September 19, 13
34. Ember.View has a custom `trigger` 30 Thursday, September 19, 13
35. 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
36. 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
37. Actions in Depth 33 ★Actions helper ★General flow ★Actions helper options & limitations ★Actions hash semantics ★The Router and events Thursday, September 19, 13
38. 34 Back to our Actions example Thursday, September 19, 13
39. 35 At a high level... Template/ View Controller Router action action Thursday, September 19, 13
40. 35 At a high level... Template/ View Controller Router action action Template/ View Target action Thursday, September 19, 13
41. 35 At a high level... Template/ View Controller Router action action Template/ View Target action Controller Target action Thursday, September 19, 13
42. Action handlers are defined in an `actions` hash 36 Thursday, September 19, 13
43. Actions helper options 37 Thursday, September 19, 13
44. Limitation: multiple action helpers 38 Not Supported Note: This should become possible in a future version of Ember via HTMLBars Thursday, September 19, 13
45. 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
46. Actions hash semantics: this 40 Thursday, September 19, 13
47. Actions hash semantics: _super 41 Thursday, September 19, 13
48. 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
49. 43 The Ember Router is a state machine Template Thursday, September 19, 13
50. 43 The Ember Router is a state machine Template Router action Thursday, September 19, 13
51. 43 The Ember Router is a state machine Template Router Current Route action action Thursday, September 19, 13
52. 43 The Ember Router is a state machine Template Router Current Route action action Template Router Product Route logout logout OrderConfirmation Route vs. Thursday, September 19, 13
53. 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 flow up to parent routes until a route handles it ▪ The router provides a natural hierarchy Thursday, September 19, 13
54. 45 The Ember Router is a hierarchical state machine Thursday, September 19, 13
55. 46 The Ember Router is a hierarchical state machine ApplicationRoute ProductRoute OrderRoute ShippingRoute BillingRoute ConfirmationRoute Thursday, September 19, 13
56. 47 The Ember Router is a hierarchical state machine ApplicationRoute ProductRoute OrderRoute ShippingRoute BillingRoute ConfirmationRoute ApplicationRoute OrderRoute BillingRoute Thursday, September 19, 13
57. 47 The Ember Router is a hierarchical state machine ApplicationRoute ProductRoute OrderRoute ShippingRoute BillingRoute ConfirmationRoute Thursday, September 19, 13
58. 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
59. 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
60. Actions and components: local actions 50 Thursday, September 19, 13
61. Actions and components: emitting actions 51 Thursday, September 19, 13
62. Actions and components: emitting actions 51 Thursday, September 19, 13
63. 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
64. 53 Follow me @lukemelia Luke and Yapp Labs are available for Ember.js-related consulting and training. Contact luke@yapp.us. Q & A Thursday, September 19, 13