This talk was presented at EmberConf 2016. With the release of Ember 2.0, many best practices established in the 1.x series are unfortunately no longer relevant. Lessons learnt from the React and Flux communities can help guide the path toward The Ember Way, with "Data Down, Actions Up" being one of the core philosophies. In this beginner-friendly talk, we'll discuss patterns and anti-patterns for bringing Ember applications into the 2.x paradigm, and discover how ideas from Functional Programming and game rendering engines can inform us. We will also look at the roads ahead to see what future versions of Ember will bring.

1. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
IDIOMATIC EMBER
Finding the Sweet Spot of Performance & Productivity
・ D O C K YA R D ・

2. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
bit.ly/idiomatic-ember

3. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016

4. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016

5. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
🐰 LAUREN TAN
SUGARPIRATE_
POTETO

6. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016

7. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
🐶 ZELDA

8. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
I WORK AT
DOCKYARD

9. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016

10. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016

11. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
THE STATE OF
JAVASCRIPT IN 2016

12. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016

13. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016

14. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016

15. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016

16. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016

17. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
leftpad

18. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
“I hand-rolled my own
front-end stack using the
most organic, gluten-free
and artisanal micro-
libraries.”
🤓

19. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016

20. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
Performance Productivity

21. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
❤❤

22. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
THE EMBER WAY?

23. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
Data
Component
Owner
Action

24. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016

25. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
this.attrs.fooAction(val);
this.get('fooAction')(val);
VS

26. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016

27. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016

28. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
MORE JAVASCRIPT

29. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
DECORATORS
Stage 1
https://github.com/wycats/javascript-decorators

30. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
https://github.com/rwjblue/ember-computed-decorators
@computed('first', 'last')
name(first, last) {
return `${first} ${last}`;
}

31. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
ASYNC/AWAIT
Stage 3
https://github.com/tc39/ecmascript-asyncawait

32. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
await fillIn('.display-title', 'Hello!');
await click('.update-display-title');
assert.equal(find('.display-title').text(), 'Hello!');
https://github.com/emberjs/rfcs/pull/119

33. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
GENERATORS
ES2015
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*

34. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
countingTask: task(function* () {
this.set('count', 0);
while (this.get('count') < 5) {
this.incrementProperty('count');
yield timeout(300);
}
this.set('count', 'DONE!');
}).restartable()
https://github.com/machty/ember-concurrency

35. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
❤

36. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
– Yehuda Katz
“All good ideas will eventually
end up in Ember.”

37. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
THE EMBER WAY 🙏

38. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
I. Data Down, Actions Up?
II. Controllers are Dead
III.Declarative & Composable Templates

39. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
I. Data Down, Actions Up?
II. Controllers are Dead
III.Declarative & Composable Templates

40. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016

41. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016

42. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
Is MVC Dead? ☠

43. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
Is MVC Dead? ☠NOPE

44. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
2 WAY BINDINGS 💣

45. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
💎

46. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016

47. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
Who owns the data?

48. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
Component A
Component A.1 Component A.2 Component A.3
Route
Owns the shared
state of A1 - A3

49. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
Component A
Component A.1 Component A.2 Component A.3
Route
Owns the shared
state of A1 - A3
{{component configComponent user=user changeStep=(action "changeStep")}}

50. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
{{component configComponent user=user currentStep=currentStep}}
// don't do this in the child component!
export default Component.extend({
actions: {
next() {
set(this, 'currentStep', 'configure-foo');
}
}
});
This is bad ☹

51. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
…or someone else's state!

52. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
<configure-username user={{user}} currentStep={{currentStep}}>
...
</configure-username>

53. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
export default Service.extend({
init() {
this._super(...arguments);
this.data = [];
}
});

54. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
I. Data Down, Actions Up?
II. Controllers are Dead
III.Declarative & Composable Templates

55. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016

56. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
ROUTABLE CONTROLLER

57. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
export default Controller.extend({
queryParams: ['category'],
category: null
});

58. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
ROUTABLE CONTROLLER

59. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
ROUTABLE COMPONENT

60. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
Component = Controller + View

61. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
<h1>Alpaca Route Template</h1>
<div class="my-amazing-template">
{{#each alpacas as |alpaca|}}
<span>
I'm a cute little {{alpaca}}!
</span>
{{/each}}
</div>
{{foo-alpaca alpacas=alpacas}}
move to

62. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
// shopping-cart top-level component
export default Component.extend({
shoppingCart: inject.service(),
actions: {
remove(product) {
// ...
}
}
});
{{#each shoppingCart.products as |product|}}
<h2>{{product.title}}</h2>
<p>{{product.description}}</p>
<button {{action "remove" product}}>Remove</button>
{{/each}}

63. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
Controller
Action
Action
Action
Route
Action
Action
Action
move to

64. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
ACTIONS 🎬

65. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
{{foo-bar submit="submit"}}
{{foo-bar click=(action "submit")}}

66. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
New-style Actions 👍
aka Closure Actions

67. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
{{foo-bar click=(action "submit")}}

68. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
Classic Actions 👎
aka String Actions

69. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
{{foo-bar submit="submit"}}

70. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
this.sendAction('someMysteriousAction', args);

71. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
Your classic action

72. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
get(this, 'submit')(...args);

73. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016

74. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
actions: {
saveAndDoStuff(item) {
get(this, 'save')(item)
.then((savedItem) => // do stuff);
}
}

75. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
ember install ember-route-action-helper
https://github.com/DockYard/ember-route-action-helper

76. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
{{foo-bar
value=value
updateFoo=(route-action "updateFoo")
}}

77. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
SERVICES

78. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016

79. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
export default Service.extend({
init() {
this._super(...arguments);
this.cart = [];
},
addToCart(item) {
// ...
},
removeFromCart(item) {
// ...
}
});

80. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016

81. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
I. Data Down, Actions Up?
II. Controllers are Dead
III.Declarative & Composable Templates

82. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
{{if (eq fullName "Jim Bob") "You're the chosen one"}}
https://github.com/jmurphyau/ember-truth-helpers

83. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
{{concat "configure-" configName}}
http://emberjs.com/api/classes/Ember.Templates.helpers.html

84. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
import Ember from 'ember';
export function add([a, b]) {
return a + b;
}
export default Ember.Helper.helper(add);

85. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
export default Helper.extend({
// ...
});

86. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
export default Helper.extend({
localesService: inject.service('locales'),
currentLocale: readOnly('localesService.currentLocale'),
compute([key]) {
let currentLocale = get(this, 'currentLocale');
return get(this, 'localesService').lookup(currentLocale, key);
},
localeDidChange: observer('currentLocale', function() {
this.recompute();
})
});

87. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016

88. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
export default Component.extend({
isDropdownDisplayed: false,
actions: {
saveUserAndHideDropdown(user) {
get(this, 'save')(user)
.then((user) => {
// do stuff
set(this, 'isDropdownDisplayed', false);
});
}
}
});

89. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
export default Component.extend({
isDropdownDisplayed: false,
actions: {
hideDropdown() {
set(this, 'isDropdownDisplayed', false);
},
saveUser(user) {
return get(this, 'save')(user);
}
}
});

90. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
<button {{action (pipe saveUser hideDropdown) user}}>
Save and Close
</button>

91. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
A(B(C(D('E'), 'F'), 'G'), 'H');

92. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
filing =
DB.find_customers
|> Orders.for_customers
|> sales_tax(2016)
|> prepare_filing
E
|> D
|> C("F")
|> B("G")
|> A("H")
http://elixir-lang.org/

93. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
<button {{action (pipe addToCart purchase redirectToThankYouPage) item}}>
1-Click Buy
</button>

94. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
ember install ember-composable-helpers
https://github.com/DockYard/ember-composable-helpers

95. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
<button {{action (pipe save closeDropdown) item}}>Save and Close</button>
<button {{action (pipe save quitApp) item}}>Save and Quit</button>

96. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
{{#if (eq (not (incr (count user))) (decr (count user))))}}
💩

97. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016

98. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016

99. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016

100. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
COMPUTED VS HELPER
VS COMPONENT HOOKS

101. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
COMPUTEDS

102. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016

103. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
export default Component.extend({
@computed('payment', 'rate', 'periods')
annuity(payment, rate, periods) {
let factor = ((1 - Math.pow(1 + rate, -periods)) / rate);
return payment * factor;
}
});

104. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
export function customMacro(dependentKey, ...keys) {
return computed(dependentKey, ...keys, {
get() {
// computed property logic
}
});
}

105. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
export default Component.extend({
myValue: customMacro('myKey', 'foo', 'bar'),
someValue: customMacro('someKey', 'baz', 'qux'),
otherValue: customMacro('otherKey', 'meow', 'woof')
});

106. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016

107. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
💪👔👍 Business logic
👍👍👍👍 Reusable
⚛⚛⚛⚛ React to changes
🤔 Changes can be implicit
Totally arbitrary emojis

108. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
HELPERS

109. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
{{#each (repeat 3) as |nil index|}}
<div data-thing={{concat "foo-" index}}>
{{!some HTML block}}
</div>
{{/each}}
https://github.com/DockYard/ember-composable-helpers#repeat

110. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
{{capitalize "hello"}} {{capitalize "hello"}}

111. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
export function toggle([obj, prop]) {
return function() {
set(obj, prop, !get(obj, prop));
};
}
https://github.com/DockYard/ember-composable-helpers#toggle

112. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
<button {{action (toggle this "isExpanded")}}>
{{if isExpanded "I am expanded" "I am not"}}
</button>

113. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
🎨🖌 Express UI logic
✍❤📖 Composable
😶💭 Simple mental model
🏃 🏃 Can be used as action
🕵🔬🔍 No hooks available (yet)
Totally arbitrary emojis

114. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
COMPONENT HOOKS

115. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
export default Component.extend({
didReceiveAttrs() {
this.updateChart(get(this, 'data'));
},
updateChart(data) {
// update the chart's data
}
});

116. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
Initial Render
init
didReceiveAttrs
willRender
didInsertElement
didRender
External attr changed
didUpdateAttrs
didReceiveAttrs
willUpdate
willRender
didUpdate
didRender
Internal value changed
willUpdate
willRender
didUpdate
didRender

117. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
export default Component.extend({
didRender() {
// this is an infinite loop that will crash your browser
let isFoo = get(this, 'isFoo');
set(this, 'isFoo', !isFoo);
}
});

118. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
🐘💨🙊 Dealing with side effects
😭➿😱 Can cause infinite loops
🔨🔨 "Just re-render it"
🚀🚀🚀 Not invoked in FastBoot environment
Totally arbitrary ratings

119. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
SHOULD I USE AN
OBSERVER?

120. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016

121. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
https://youtu.be/vvZEddrClAQ

122. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
THE FUTURE

123. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016

124. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
Game world
state
Front End IR Back End
DirectX / OpenGL
OS
Screen

125. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
Application
state
Front End HTMLBars Glimmer
DOM APIs
Browser
Screen

126. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016

127. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
Hidden blocks rendered,
CPU time wasted
Line of SightCamera
Without occlusion culling

128. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
Hidden blocks not rendered,
CPU time saved
Line of SightCamera
With occlusion culling

129. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016

130. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
https://air.mozilla.org/bay-area-rust-meetup-february-2016/#@1m53s

131. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
TL;DR

132. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016

133. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
I. Data Down, Actions Up?
II. Controllers are Dead
III.Declarative & Composable Templates

134. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
I. Data Down, Actions Up?
II. Controllers are Dead
III.Declarative & Composable Templates

135. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
I. Data Down, Actions Up?
II. Controllers are Dead
III.Declarative & Composable Templates

136. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016

137. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016

138. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
🐰 LAUREN TAN
SUGARPIRATE_
POTETO

139. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
EMBERCONF 2016
Thanks!
🐰 LAUREN TAN
SUGARPIRATE_
POTETO