EmberConf 2016 – Idiomatic Ember: Finding the Sweet Spot of Performance & Productivity

EmberConf 2016 – Idiomatic Ember: Finding the Sweet Spot of Performance & Productivity

This talk was presented at EmberConf 2016. Watch it here! https://www.youtube.com/watch?v=lP9ap-AKBAM

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.

C8fccffc013096c4b465b50c284a5208?s=128

Lauren Tan

March 30, 2016
Tweet

Transcript

  1. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE &

    PRODUCTIVITY EMBERCONF 2016 IDIOMATIC EMBER Finding the Sweet Spot of Performance & Productivity h D O C K YA R D h
  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 Sight Camera Without occlusion culling
  128. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE &

    PRODUCTIVITY EMBERCONF 2016 Hidden blocks not rendered, CPU time saved Line of Sight Camera 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