designing immutability data flows in ember
TRANSCRIPT
![Page 1: Designing Immutability Data Flows in Ember](https://reader031.vdocuments.site/reader031/viewer/2022021923/5a682c207f8b9a81378b6f71/html5/thumbnails/1.jpg)
J O R G E L A I N F I E S T A
@jorgelainfiesta
![Page 2: Designing Immutability Data Flows in Ember](https://reader031.vdocuments.site/reader031/viewer/2022021923/5a682c207f8b9a81378b6f71/html5/thumbnails/2.jpg)
Guatemala
India
Austria
![Page 3: Designing Immutability Data Flows in Ember](https://reader031.vdocuments.site/reader031/viewer/2022021923/5a682c207f8b9a81378b6f71/html5/thumbnails/3.jpg)
HERACLITUS
PARMENIDESvs
![Page 4: Designing Immutability Data Flows in Ember](https://reader031.vdocuments.site/reader031/viewer/2022021923/5a682c207f8b9a81378b6f71/html5/thumbnails/4.jpg)
• Original object remains.
• Handle properties through set and get.
• Encourages object mutation.
• Computed properties, observers.
T H E E M B E R O B J E C T ( PA RM EN I D E S )
![Page 5: Designing Immutability Data Flows in Ember](https://reader031.vdocuments.site/reader031/viewer/2022021923/5a682c207f8b9a81378b6f71/html5/thumbnails/5.jpg)
• Never modify an object.
• Create new objects all the time.
• Different solutions due constrains.
T H E H E R A C L I T U S W A Y ( I MMU TA B I L I T Y )
![Page 6: Designing Immutability Data Flows in Ember](https://reader031.vdocuments.site/reader031/viewer/2022021923/5a682c207f8b9a81378b6f71/html5/thumbnails/6.jpg)
• Tracking changes is easier.
• Simpler state management.
I M M U T A B L E D A T A F L O W S : W H Y ?
![Page 7: Designing Immutability Data Flows in Ember](https://reader031.vdocuments.site/reader031/viewer/2022021923/5a682c207f8b9a81378b6f71/html5/thumbnails/7.jpg)
D E S I G N I N G
I M M U T A B L E D A T A F L O W S
I N E M B E R
J O R G E L A I N F I E S T A
![Page 8: Designing Immutability Data Flows in Ember](https://reader031.vdocuments.site/reader031/viewer/2022021923/5a682c207f8b9a81378b6f71/html5/thumbnails/8.jpg)
• Simple form with text fields of
personal information.
• DDAU
B A S I C E X A M P L E
![Page 9: Designing Immutability Data Flows in Ember](https://reader031.vdocuments.site/reader031/viewer/2022021923/5a682c207f8b9a81378b6f71/html5/thumbnails/9.jpg)
<label>Name:</label> {{one-way-input (get person 'name') update=(action 'update' 'name')}}
<br>
<label>Surname:</label> {{one-way-input (get person 'surname') update=(action 'update' 'surname')}}
<br>
<label>Email:</label> {{one-way-input (get person 'email') update=(action 'update' 'email')}}
t e m p l a t e s / c o m p o n e n t s / u s e r - f o r m . h b s
![Page 10: Designing Immutability Data Flows in Ember](https://reader031.vdocuments.site/reader031/viewer/2022021923/5a682c207f8b9a81378b6f71/html5/thumbnails/10.jpg)
import Ember from 'ember';
export default Ember.Component.extend({ actions: { update(field, value) { this.get('onUpdate')(field, value); } } });
c o m p o n e n t s / u s e r - f o r m . j s
![Page 11: Designing Immutability Data Flows in Ember](https://reader031.vdocuments.site/reader031/viewer/2022021923/5a682c207f8b9a81378b6f71/html5/thumbnails/11.jpg)
updateUser(field, value) { let user = this.get('user'); set(user, field, value); }
r e s p o n s i b l e p a r e n t
mutating object
![Page 12: Designing Immutability Data Flows in Ember](https://reader031.vdocuments.site/reader031/viewer/2022021923/5a682c207f8b9a81378b6f71/html5/thumbnails/12.jpg)
updateUser(field, value) { let user = {...this.get('user')}; set(user, field, value); this.set('user', user); }
r e s p o n s i b l e p a r e n t
not mutating original object
![Page 13: Designing Immutability Data Flows in Ember](https://reader031.vdocuments.site/reader031/viewer/2022021923/5a682c207f8b9a81378b6f71/html5/thumbnails/13.jpg)
updateUser(field, newData) { let user = this.get('user'); this.set('user', { ...user, [field]: newData }); }
r e s p o n s i b l e p a r e n t
Immutability
![Page 14: Designing Immutability Data Flows in Ember](https://reader031.vdocuments.site/reader031/viewer/2022021923/5a682c207f8b9a81378b6f71/html5/thumbnails/14.jpg)
C O N T R A C T S F O R C O M P O S I T I O N
![Page 15: Designing Immutability Data Flows in Ember](https://reader031.vdocuments.site/reader031/viewer/2022021923/5a682c207f8b9a81378b6f71/html5/thumbnails/15.jpg)
Update the parent with the same
data type that they provided.
C O N T R A C T S F O R C O M P O S I T I O N
interface ImmutableComponentProps<E> { value: E; onUpdate: (updatedValue: E) => void }
![Page 16: Designing Immutability Data Flows in Ember](https://reader031.vdocuments.site/reader031/viewer/2022021923/5a682c207f8b9a81378b6f71/html5/thumbnails/16.jpg)
import Ember from 'ember';
export default Ember.Component.extend({ actions: { update(field, value) { this.get('onUpdate')({ [field]: value }); } } });
c o m p o n e n t s / u s e r - f o r m . j s
![Page 17: Designing Immutability Data Flows in Ember](https://reader031.vdocuments.site/reader031/viewer/2022021923/5a682c207f8b9a81378b6f71/html5/thumbnails/17.jpg)
updateUser(newData) { let user = this.get('user'); this.set('user', { ...user, ...newData }); }
r e s p o n s i b l e p a r e n t
Immutability
![Page 18: Designing Immutability Data Flows in Ember](https://reader031.vdocuments.site/reader031/viewer/2022021923/5a682c207f8b9a81378b6f71/html5/thumbnails/18.jpg)
{{user-form value=user onUpdate=(action 'updateUser')}}
r e s p o n s i b l e p a r e n t t e m p l a t e
![Page 19: Designing Immutability Data Flows in Ember](https://reader031.vdocuments.site/reader031/viewer/2022021923/5a682c207f8b9a81378b6f71/html5/thumbnails/19.jpg)
![Page 20: Designing Immutability Data Flows in Ember](https://reader031.vdocuments.site/reader031/viewer/2022021923/5a682c207f8b9a81378b6f71/html5/thumbnails/20.jpg)
![Page 21: Designing Immutability Data Flows in Ember](https://reader031.vdocuments.site/reader031/viewer/2022021923/5a682c207f8b9a81378b6f71/html5/thumbnails/21.jpg)
W O R K I N G W I T H A R R A Y S
![Page 22: Designing Immutability Data Flows in Ember](https://reader031.vdocuments.site/reader031/viewer/2022021923/5a682c207f8b9a81378b6f71/html5/thumbnails/22.jpg)
W O R K I N G W I T H A R R A Y S
★ map
★ reduce
★ filter
★ find
★ slice
• splice
• sort
• push
• Mutable array methods
in Ember
MutationsNo mutations
![Page 23: Designing Immutability Data Flows in Ember](https://reader031.vdocuments.site/reader031/viewer/2022021923/5a682c207f8b9a81378b6f71/html5/thumbnails/23.jpg)
actions: { addItem(newElement) { let value = this.get('value'); this.get('onUpdate')([ ...value, newElement ]); }, removeItem(index) { let value = this.get('value'); this.get('onUpdate')([ ...value.slice(0, index), ...value.slice(index + 1) ]); } }
c o m p o n e n t s / t o d o - l i s t . j s
![Page 24: Designing Immutability Data Flows in Ember](https://reader031.vdocuments.site/reader031/viewer/2022021923/5a682c207f8b9a81378b6f71/html5/thumbnails/24.jpg)
updateList(newList) { // Some treatment and processing? this.set('list', newList); }
r e s p o n s i b l e p a r e n t
![Page 25: Designing Immutability Data Flows in Ember](https://reader031.vdocuments.site/reader031/viewer/2022021923/5a682c207f8b9a81378b6f71/html5/thumbnails/25.jpg)
{{todo-list value=list onUpdate=(action 'updateList')}}
r e s p o n s i b l e p a r e n t t e m p l a t e
![Page 26: Designing Immutability Data Flows in Ember](https://reader031.vdocuments.site/reader031/viewer/2022021923/5a682c207f8b9a81378b6f71/html5/thumbnails/26.jpg)
C O M P U T E D P R O P E R T I E S
![Page 27: Designing Immutability Data Flows in Ember](https://reader031.vdocuments.site/reader031/viewer/2022021923/5a682c207f8b9a81378b6f71/html5/thumbnails/27.jpg)
fullName: computed('user.{name,surname}', function() { return `${this.get('user.name')} ${this.get('user.surname')}`; })
r e s p o n s i b l e p a r e n t
![Page 28: Designing Immutability Data Flows in Ember](https://reader031.vdocuments.site/reader031/viewer/2022021923/5a682c207f8b9a81378b6f71/html5/thumbnails/28.jpg)
fullName: computed('user', function() { return `${this.get('user.name')} ${this.get('user.surname')}`; })
r e s p o n s i b l e p a r e n t
![Page 29: Designing Immutability Data Flows in Ember](https://reader031.vdocuments.site/reader031/viewer/2022021923/5a682c207f8b9a81378b6f71/html5/thumbnails/29.jpg)
N I C E F O R G L I M M E R
![Page 30: Designing Immutability Data Flows in Ember](https://reader031.vdocuments.site/reader031/viewer/2022021923/5a682c207f8b9a81378b6f71/html5/thumbnails/30.jpg)
import Component, { tracked } from '@glimmer/component';
export default class ImmutabilityGlimmer extends Component { @tracked user = { name: 'Joe', surname: 'Schreier' };
@tracked('user') get fullName() { let { name, surname } = this.user; return `${name} ${surname}`; }
}
s o m e g l i m m e r c o m p o n e n t
![Page 31: Designing Immutability Data Flows in Ember](https://reader031.vdocuments.site/reader031/viewer/2022021923/5a682c207f8b9a81378b6f71/html5/thumbnails/31.jpg)
updatePerson(personUpdate) { let { user } = this; this.user = { ...user, ...personUpdate }; }
s o m e g l i m m e r c o m p o n e n t
![Page 32: Designing Immutability Data Flows in Ember](https://reader031.vdocuments.site/reader031/viewer/2022021923/5a682c207f8b9a81378b6f71/html5/thumbnails/32.jpg)
<simple-form @user={{user}} @onUpdate={{updatePerson}} />
s o m e g l i m m e r c o m p o n e n t
![Page 33: Designing Immutability Data Flows in Ember](https://reader031.vdocuments.site/reader031/viewer/2022021923/5a682c207f8b9a81378b6f71/html5/thumbnails/33.jpg)
T H E F U T U R E ?
![Page 34: Designing Immutability Data Flows in Ember](https://reader031.vdocuments.site/reader031/viewer/2022021923/5a682c207f8b9a81378b6f71/html5/thumbnails/34.jpg)
K E E P I N T O U C H !
J O R G E L A I N F I E S T A
@jorgelainfiesta
DMs are open :)