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.

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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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.”
    
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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}`;
    }
    

    View Slide

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

    View Slide

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
    

    View Slide

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*
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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")}}
    

    View Slide

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 ☹
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

61. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
    EMBERCONF 2016
    Alpaca Route Template
    
    {{#each alpacas as |alpaca|}}
    
    I'm a cute little {{alpaca}}!
    
    {{/each}}
    
    {{foo-alpaca alpacas=alpacas}}
    move to
    

    View Slide

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|}}
    {{product.title}}
    {{product.description}}
    Remove
    {{/each}}
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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) {
    // ...
    }
    });
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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);
    

    View Slide

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

    View Slide

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();
    })
    });
    

    View Slide

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

    View Slide

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);
    });
    }
    }
    });
    

    View Slide

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);
    }
    }
    });
    

    View Slide

90. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
    EMBERCONF 2016
    
    Save and Close
    
    

    View Slide

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

    View Slide

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/
    

    View Slide

93. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
    EMBERCONF 2016
    
    1-Click Buy
    
    

    View Slide

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

    View Slide

95. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
    EMBERCONF 2016
    Save and Close
    Save and Quit
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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;
     }
     });
     

     View Slide

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
     }
     });
     }
     

     View Slide

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')
     });
     

     View Slide

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

     View Slide

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
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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
     

     View Slide

112. IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE & PRODUCTIVITY
     EMBERCONF 2016
     
     {{if isExpanded "I am expanded" "I am not"}}
     
     

     View Slide

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
     

     View Slide

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

     View Slide

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
     }
     });
     

     View Slide

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
     

     View Slide

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);
     }
     });
     

     View Slide

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
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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
     

     View Slide

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
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide