Download to read offline
![class Store {
filter = '';
items = [];
}
Store - it’s just a class!](https://image.slidesharecdn.com/mobx-performance-and-sanity-170604102056/85/Mobx-performance-and-sanity-27-320.jpg)
![class Store {
filter = '';
items = [];
}
ES6 + Class properties](https://image.slidesharecdn.com/mobx-performance-and-sanity-170604102056/85/Mobx-performance-and-sanity-28-320.jpg)
![import { observable } from 'mobx';
class Store {
@observable filter = '';
@observable items = [];
}
Observable](https://image.slidesharecdn.com/mobx-performance-and-sanity-170604102056/85/Mobx-performance-and-sanity-29-320.jpg)
![class Store {
@observable filter = '';
@observable items = [];
@computed get filteredItems() {
const regexp = new RegExp(this.filter, 'i');
return this.items.filter((item) => regexp.test(item.name));
}
@action setFilter(value) {
this.filter = value;
}
@action addItem(item) {
this.items.push(item);
}
}](https://image.slidesharecdn.com/mobx-performance-and-sanity-170604102056/85/Mobx-performance-and-sanity-37-320.jpg)
![class Store {
filter = '';
items = [];
}
Store - it’s just a class!](https://image.slidesharecdn.com/mobx-performance-and-sanity-170604102056/75/Mobx-performance-and-sanity-27-2048.jpg)
![class Store {
filter = '';
items = [];
}
ES6 + Class properties](https://image.slidesharecdn.com/mobx-performance-and-sanity-170604102056/75/Mobx-performance-and-sanity-28-2048.jpg)
![import { observable } from 'mobx';
class Store {
@observable filter = '';
@observable items = [];
}
Observable](https://image.slidesharecdn.com/mobx-performance-and-sanity-170604102056/75/Mobx-performance-and-sanity-29-2048.jpg)
![class Store {
@observable filter = '';
@observable items = [];
@computed get filteredItems() {
const regexp = new RegExp(this.filter, 'i');
return this.items.filter((item) => regexp.test(item.name));
}
@action setFilter(value) {
this.filter = value;
}
@action addItem(item) {
this.items.push(item);
}
}](https://image.slidesharecdn.com/mobx-performance-and-sanity-170604102056/75/Mobx-performance-and-sanity-37-2048.jpg)
Uploaded by500Tech
Mobx - performance and sanity
The document discusses the architecture and features of MobX for managing state in applications, highlighting its capabilities such as automatically reacting to changes and memoizing derived values. It describes the implementation of filters, actions, and UI updates using declarative programming with MobX's observable and computed properties. Examples include managing item selections and rendering lists based on state changes, demonstrating the integration with frameworks like React and Angular.
More Related Content
Similar to Mobx - performance and sanity
Mobx - performance and sanity
- 1. MobX - Performance andSanity
- 2.
- 3. Adam Klein CTO @500Tech
- 4.
- 6. Taking the stateout of components
- 7.
- 8. Easy as pie importservice from ‘myService’; // call service.action() // use service.state Problem Solved!
- 9. toggle item Selected ItemsMaster Checkbox toggle master Filtered Items add item change filter Imperative
- 10.
- 11. Declarative <div *ngFor="let itemof state.filteredItems”> {{ item.title }} </div>
- 12. Declarative <div *ngFor="let itemof state.getFilteredItems()"> {{ item.title }} </div>
- 13. getFilteredItems() { const regexp= new RegExp(this.filter, 'i'); return this.items .filter((item) => regexp.test(item.name)); } Declarative
- 14. getFilteredItems() { const regexp= new RegExp(this.filter, 'i'); return this.items .filter((item) => regexp.test(item.name)); } Declarative
- 16. The ideal state Memoizesderived values Selectively Update UI React to changes
- 17. The ideal state Memoizesderived values Selectively Update UI React to changes
- 18. The ideal state Memoizesderived values Selectively Update UI React to changes
- 19.
- 20.
- 21. Michel Weststrate fromMendix React + Angular connectors MobX
- 22. Michel Weststrate fromMendix React + Angular connectors Automagically react to changes MobX
- 23. Michel Weststrate fromMendix React + Angular connectors Automagically react to changes Works with plain objects MobX
- 24. Michel Weststrate fromMendix React + Angular connectors Automagically react to changes Works with plain objects MobX
- 25. List of Frameworks Selected Items Filter Master Checkbox Filtered Items Selected ItemsFilter ComponentUI Components Store Observables Computed Values Reactions
- 26.
- 27. class Store { filter= ''; items = []; } Store - it’s just a class!
- 28. class Store { filter= ''; items = []; } ES6 + Class properties
- 29. import { observable} from 'mobx'; class Store { @observable filter = ''; @observable items = []; } Observable
- 30. … getFilteredItems() { const regexp= new RegExp(this.filter, 'i'); return this.items .filter((item) => regexp.test(item.name)); } … Derived State
- 31. import { computed} from 'mobx'; @computed get filteredItems() { const regexp = new RegExp(this.filter, 'i'); return this.items .filter((item) => regexp.test(item.name)); } … Computed
- 32. … @computed get filteredItems(){ const regexp = new RegExp(this.filter, 'i'); return this.items .filter((item) => regexp.test(item.name)); } … Figures dependencies automatically
- 33. … setFilter(value) { this.filter =value; } … Action - it’s just setting a property
- 34. … setFilter(value) { this.filter =value; } … Action
- 35. … @action setFilter(value) { this.filter= value; } … Action
- 36. … @action addItem(item) { this.items.push(item); } … Workswith array methods
- 37. class Store { @observablefilter = ''; @observable items = []; @computed get filteredItems() { const regexp = new RegExp(this.filter, 'i'); return this.items.filter((item) => regexp.test(item.name)); } @action setFilter(value) { this.filter = value; } @action addItem(item) { this.items.push(item); } }
- 39. autorun(() => { constitems = store.filteredItems; renderItemsOnDOM(items); }); Automatic Reaction
- 40. Update UI automatically autorun(()=> { const items = store.filteredItems; renderItemsOnDOM(items); });
- 41.
- 42. class TodoView extendsReact.Component { render() { return <div>{ store.filteredItems }</div> } } mobx-react https://github.com/mobxjs/mobx-react
- 43. @observer class TodoViewextends React.Component { render() { return <div>{ store.filteredItems }</div> } } mobx-react https://github.com/mobxjs/mobx-react
- 44.
- 45. <div *mobxAutorun> {{ store.filteredItems}} </div> mobx-angular https://github.com/mobxjs/mobx-angular
- 46. <div mobx-autorun> {{ store.filteredItems}} </div> ng-mobx for Angular1 https://github.com/NgMobx/ng1-mobx
- 47. MobX Redux Plain objects OOD Immutabledata FP Automatic Explicit Computed values Using reselect Multiple Stores Single Store Use Async regularly Async is trouble Complex library, Simple code Simple library, Complex code
- 48. Debugging methods Spy Explicit reactions Comparefunction And more… There’s more to it…
- 49.