Steady State With Ember Octane

Ever wondered where your component state went or where it came from? In this talk you will learn how arguments, decorators and tracked properties make state management of your component built in Ember Octane easier than ever before. In comparison with patterns known from traditional Ember apps, you will learn how to transform your modern components to predictable and future-proof building blocks of your application.

Transcript

1. STEADY STATE WITH EMBER OCTANE @jjordan_dev
2. 2 JESSICA JORDAN simplabs Ember Learning Core Team Editor at Weekly Newsletter The Ember Times EmberJS Berlin Organizer Senior Frontend Engineer at @jjordan_dev
3. 3 @jjordan_dev
4. 4 @jjordan_dev https://the-emberjs-times.ongoodbits.com
5. WHAT IS STATE? @jjordan_dev
6. A program is described as stateful if it is designed to remember preceding events or user interactions; […] the remembered information is called the state of the system. What is state? A Definition @jjordan_dev
7. 1 @jjordan_dev
8. 0 @jjordan_dev
9. 1 @jjordan_dev
10. 1 @jjordan_dev
11. 1 @jjordan_dev
12. 0 1 0 1 1 0 @jjordan_dev
13. 0 1 0 1 1 0 Stateful systems remember preceding events @jjordan_dev
14. 0 1 0 1 1 0 Stateful systems remember preceding events @jjordan_dev
15. 0 1 0 0 1 0 Stateful systems remember preceding events @jjordan_dev
16. 0 1 0 0 1 0 Stateful systems remember preceding events @jjordan_dev
17. 0 1 0 0 1 0 Stateful systems remember preceding events @jjordan_dev
18. 1 1 0 0 1 1 Stateful systems remember preceding events @jjordan_dev
19. 1 1 0 0 1 1 Stateful systems remember preceding events @jjordan_dev
20. 0 1 State in JavaScript apps is constantly changing USER INTERACTIONS EVENTS INCOMING NETWORK REQUESTS @jjordan_dev
21. 1 Types of State in JavaScript apps LOCAL STATE CLOSURE STATE OBJECT STATE GLOBAL STATE @jjordan_dev
22. 1 Types of State in JavaScript apps LOCAL STATE CLOSURE STATE OBJECT STATE GLOBAL STATE @jjordan_dev
23. State Management in Ember apps is about Object State SERVICE STATE CONTROLLER STATE COMPONENT STATE
24. Managing Ember Component State PROPERTIES ARGUMENTS LIFECYCLE HOOKS EVENT HANDLING DEPENDENCY INJECTIONS DATA LOADING COMPONENTS OWN STATE AND METHODS TO MANIPULATE LOCAL AND EXTERNAL STATE
25. But State Management Can Be Hard
26. But State Management Can Be Hard
27. 27 Symptoms of Component State That Is Hard to Manage Cyclical data flows Race conditions Overall unpredictable behaviour Low performance @jjordan_dev
28. Predictability for Initial State in Components @jjordan_dev
29. 1 When it’s not always clear where a property was set 1 {{#if hasPacked}} 2 <h2>Inventory</h2> 3 <ul> 4 {{#each inventory as |item|}} 5 <li>{{item}}</li> 6 {{/each}} 7 </ul> 8 {{else}} 9 No one packed anything... 10 {{/if}} @jjordan_dev
30. When it’s not always clear where a property was set 1 import Route from '@ember/routing/route'; 2 3 export default Route.extend({ 4 model() { 5 return ['Tent', 'Water Bottle','Frisbee', ‘Cookies']; 6 } 7 }); @jjordan_dev
31. When it’s not always clear where a property was set 1 {{ember-fest inventory=model}} @jjordan_dev 1 import Route from '@ember/routing/route'; 2 3 export default Route.extend({ 4 model() { 5 return ['Tent', 'Water Bottle','Frisbee', ‘Cookies']; 6 } 7 });
32. 1 When it’s not always clear where a property was set 1 {{ember-fest inventory=model}} Inventory Tent Water Bottle Frisbee Cookies @jjordan_dev
33. When it’s not always clear where a property was set 1 {{ember-fest inventory=model}} @jjordan_dev 1 import Route from '@ember/routing/route'; 2 3 export default Route.extend({ 4 model() { 5 return ['Tent', 'Water Bottle','Frisbee', ‘Cookies']; 6 } 7 });
34. ? When it’s not always clear where a property was set 1 {{ember-fest}} @jjordan_dev
35. ? When it’s not always clear where a property was set 1 {{#if hasPacked}} 2 <h2>Inventory</h2> 3 <ul> 4 {{#each inventory as |item|}} 5 <li>{{item}}</li> 6 {{/each}} 7 </ul> 8 {{else}} 9 No one packed anything... 10 {{/if}} @jjordan_dev
36. ? When it’s not always clear where a property was set 1 {{#if hasPacked}} 2 <h2>Inventory</h2> 3 <ul> 4 {{#each inventory as |item|}} 5 <li>{{item}}</li> 6 {{/each}} 7 </ul> 8 {{else}} 9 No one packed anything... 10 {{/if}} @jjordan_dev
37. 1 When it’s not always clear where a property was set 1 {{ember-fest}} Inventory keys wallet phone @jjordan_dev
38. 1 When it’s not always clear where a property was set 1 {{ember-fest}} Inventory keys wallet phone @jjordan_dev
39. When it’s not always clear where a property was set 1 import Component from '@ember/component'; 2 import computed from 'ember/object'; 3 4 export default Component.extend({ 5 hasPacked: computed.notEmpty('inventory'), 6 inventory: computed(function() { 7 return ['keys', 'wallet', 'phone']; 8 }, 9 }); @jjordan_dev
40. When it’s not always clear where a property was set 1 import Component from '@ember/component'; 2 import computed from 'ember/object'; 3 4 export default Component.extend({ 5 hasPacked: computed.notEmpty('inventory'), 6 inventory: computed(function() { 7 return ['keys', 'wallet', 'phone']; 8 }, 9 }); @jjordan_dev
41. 41 Named Arguments bring clarity to initial component state https://emberjs.github.io/rfcs/0276-named-args.html @jjordan_dev
42. Data Ownership: “Is it an argument or not?” 1 {{#if hasPacked}} 2 <h2>Inventory</h2> 3 <ul> 4 {{#each inventory as |item|}} 5 <li>{{item}}</li> 6 {{/each}} 7 </ul> 8 {{else}} 9 No one packed anything... 10 {{/if}} @jjordan_dev
43. Data Ownership: “Is it an argument or not?” 1 {{#if hasPacked}} 2 <h2>Inventory</h2> 3 <ul> 4 {{#each @inventory as |item|}} 5 <li>{{item}}</li> 6 {{/each}} 7 </ul> 8 {{else}} 9 No one packed anything... 10 {{/if}} @jjordan_dev
44. Data Ownership: “Is it an argument or not?” 1 {{#if this.hasPacked}} 2 <h2>Inventory</h2> 3 <ul> 4 {{#each @inventory as |item|}} 5 <li>{{item}}</li> 6 {{/each}} 7 </ul> 8 {{else}} 9 No one packed anything... 10 {{/if}} @jjordan_dev
45. Data Ownership: “Is it an argument or not?” 1 import Component from '@glimmer/component'; 2 3 export default class EmberFest extends Component { 4 get hasInventory() { 5 return this.args && this.args.inventory; 6 } 7 } @jjordan_dev
46. Data Ownership: “Is it an argument or not?” 1 import Component from '@glimmer/component'; 2 3 export default class EmberFest extends Component { 4 defaultInventory = ['Rain Coat', 'Blanket']; 5 6 get hasInventory() { 7 return Boolean(this.internalInventory); 8 } 9 10 get internalInventory() { 11 return this.args.inventory || 12 this.defaultInventory; 13 } 14 } @jjordan_dev
47. Predictability of Component State over Time @jjordan_dev @jjordan_dev
48. “The Future of Responsive Component Design” @chadian at EmberFest 2019
49. Application State Components as a Boundary for State Component State @jjordan_dev
50. Application State Components as a Boundary for State Component State @jjordan_dev
51. Application State Components as a Boundary for State Component State @jjordan_dev
52. Components as a Boundary for State Component State @jjordan_dev
53. @jjordan_dev Presentation of Data
54. @jjordan_dev Presentation of Data
55. @jjordan_dev Presentation of Data Holding & Loading of Data Methods for Modifying Owned Data Data Management vs. Data Presentation
56. 1 No Ambiguity About Property Updates 1 <EmberFest @inventory={{this.equipment}} /> @jjordan_dev
57. A Enforced DDAU with Argument Immutability “PARENT” = CONTROLLER, DATA OWNING COMPONENT @jjordan_dev
58. A B Enforced DDAU with Argument Immutability “PARENT” = CONTROLLER, DATA OWNING COMPONENT “CHILD” = PRESENTATIONAL OR INTERMEDIARY COMPONENT @jjordan_dev
59. A B Enforced DDAU with Argument Immutability PASS DOWN ARGUMENTS AND ACTIONS SEND UPDATED VALUES UP VIA ACTIONS @jjordan_dev
60. 1 import Component from '@glimmer/component'; 2 import { action } from '@ember/object'; 3 4 export default class EmberFest extends Component { 5 // ... 6 @action 7 changeItem(item) { 8 this.args.updateItem(item); 9 } 10 } B @jjordan_dev No Ambiguity About Property Updates
61. B 1 <h2>Inventory</h2> 2 <p>Choosing {{@chosenItem}}</p> 3 <ul> 4 {{#each @inventory as |item|}} 5 <li> 6 {{item}} 7 <button 8 {{on "click" (fn this.changeItem item)}}> 9 Choose {{item}} 10 </button> 11 </li> 12 {{/each}} 13 </ul> @jjordan_dev No Ambiguity About Property Updates
62. 1 <EmberFest @inventory={{this.equipment}} 2 @chosenItem={{this.chosenItem}} 3 @updateItem={{this.update}} /> A @jjordan_dev No Ambiguity About Property Updates
63. A Modifying Application Wide State with Components SERVICE: OWNER OF APPLICATION STATE @jjordan_dev
64. A C SERVICE INJECTION SERVICE: OWNER OF APPLICATION STATE B D TARGET INSTANCE, E.G. COMPONENT, CONTROLLER, SERVICE @jjordan_dev Modifying Application Wide State with Components
65. A C SERVICE INJECTION SERVICE: OWNER OF APPLICATION STATE B D TARGET INSTANCE, E.G. COMPONENT, CONTROLLER, SERVICE UPDATING VALUES DIRECTLY OR VIA HELPER METHODS @jjordan_dev Modifying Application Wide State with Components
66. 1 import Service from '@ember/service'; 2 import { tracked } from '@glimmer/tracking'; 3 import moment from 'moment'; 4 5 export default class TimeService extends Service { 6 @tracked currentTime = moment().format('MM/DD/YYYY HH:mm'); 7 8 resetTime() { 9 this.currentTime = moment('2019-09-16 09:00’) 10 .format(‘MM/DD/YYYY HH:mm'); 11 } 12 } @jjordan_dev Modifying Application Wide State with Components
67. 1 import Component from '@glimmer/component'; 2 import { action } from '@ember/object'; 3 import { inject as service } from '@ember/service'; 4 5 export default class EmberFest extends Component { 6 @service time; 7 // ... 8 @action 9 resetTime() { 10 this.time.resetTime(); 11 } 12 } @jjordan_dev Modifying Application Wide State with Components
68. A C B D @service time; @jjordan_dev Modifying Application Wide State with Components
69. A C B D this.time.resetTime(); @service time; @jjordan_dev Modifying Application Wide State with Components
70. A C B D this.time.resetTime(); @service time; @jjordan_dev Modifying Application Wide State with Components
71. A C B D this.time.resetTime(); @service time; @jjordan_dev Modifying Application Wide State with Components
72. Encouraged DDAU Facilitates State Management 72 ENCOURAGES DIRECTED ACYCLICAL GRAPHS (DAG) FOR DATA FLOW EASIER SEPARATION OF CONCERNS PREVENTS ACCIDENTAL OVERWRITES OF COMPUTED PROPERTIES @jjordan_dev
73. Predictability of Component State through a Clear API @jjordan_dev @jjordan_dev
74. - 11 LIFECYCLE HOOKS - 29 EVENT HANDLERS + 1 CONSTRUCTOR SINGLE LOCATION OF HOOKS A LEANER API WITH GLIMMER COMPONENTS @jjordan_dev
75. 75 RFC#416
 Glimmer Components @jjordan_dev https://emberjs.github.io/rfcs/0416-glimmer-components.html
76. Managing Component State For Optimal Performance @jjordan_dev
77. 77 Performance Wins for Your Components in Ember Octane Use Template Only Components Facilitate Garbage Collection with Local State Avoiding repeated rendering @jjordan_dev
78. 78 Template Only Components High-performing presentational UI units @jjordan_dev
79. 79 Performance Wins for Your Components in Ember Octane @jjordan_dev Use Template Only Components Facilitate Garbage Collection with Local State Avoiding repeated rendering
80. 80 Localise component State for Efficient Garbage Collection @jjordan_dev
81. 81 Performance Wins for Your Components in Ember Octane @jjordan_dev Use Template Only Components Facilitate Garbage Collection with Local State Avoiding repeated rendering
82. 82 Reducing re- renders to the bare minimum @jjordan_dev
83. Managing Component State with Ember Octane Clear Data Ownership with Named Arguments Encouragement of DDAU for Improved Separation of Concerns @jjordan_dev
84. Modify Application Wide State via Services Prevention against Accidental Computed Property Overwrites Intuitive Event Handling with Lean Component API 84 @jjordan_dev
85. Experience the Future of Steady State with Ember Octane Performance Boost with New Octane Features and Smart Local State Management 85 @jjordan_dev
86. Thank you! @jjordan_dev Jessica Jordan simplabs.com