Angular. MobX. Happiness
•
6 j'aime•2,710 vues
Imagine the magic of Angular 1 digest, but extremely performant and smart. MobX detects changes in plain objects, allowing you to react automatically to changes you make on observable attributes, and define computed values In this talk I will introduce MobX and its benefits, and the ng2-mobx library I wrote to connect it seamlessly to Angular
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Angular. MobX. Happiness
Similaire à Angular. MobX. Happiness (20)
Plus de 500Tech
Plus de 500Tech (20)
Dernier
Dernier (20)
Angular. MobX. Happiness
- 1. 1. Angular 2. MobX 3. Happiness Adam Klein
- 2. Adam Klein -Frontend developer & consultant -Open source (ng2-tree, ng2-mobx) -Co-organizer of AngularUP -Fun fact: I used to have a jewfro CTO @ 500Tech
- 5. Regular checkbox Selected Items Master Checkbox Master Checkbox Filtered Items add a framework change filter Imperative
- 6. Declarative
- 7. getFilteredItems() { const regexp = new RegExp(this.filter, 'i'); return this.items .filter((item) => regexp.test(item.name)); } Declarative
- 8. Declarative <div *ngFor="let item of getFilteredItems()"> {{ item.title }} </div>
- 9. Declarative <div *ngFor="let item of getFilteredItems()"> {{ item.title }} </div>
- 13. PRESENTATION TITLE Presenter Name Small Subtitle [DELETE THIS]: Presentation caption should be ALL CAPS, small subtitle should be All Capitalized MobX yes we can
- 14. Michel Weststrate from Mendix Was written for React Completely framework agnostic Automagically react to changes Works with plain objects MobX
- 15. Taking the state out of components
- 17. Minimal State (@observable) List of Frameworks Selected Items Filter Master Checkbox Filtered Items Derived State (@computed)
- 18. @Injectable() class State { filter = ''; items = []; } Observable
- 19. @Injectable() class State { filter = ''; items = []; } Observable
- 20. import { observable } from 'mobx'; @Injectable() class State { @observable filter = ''; @observable items = []; } Observable
- 21. … getFilteredItems() { const regexp = new RegExp(this.filter, 'i'); return this.items .filter((item) => regexp.test(item.name)); } … Computed
- 22. … @computed get filteredItems() { const regexp = new RegExp(this.filter, 'i'); return this.items .filter((item) => regexp.test(item.name)); } … Computed
- 23. … @computed get filteredItems() { const regexp = new RegExp(this.filter, 'i'); return this.items .filter((item) => regexp.test(item.name)); } … Computed
- 24. … setFilter(value) { this.filter = value; } … Action
- 25. … setFilter(value) { this.filter = value; } … Action
- 26. … @action setFilter(value) { this.filter = value; } … Action
- 28. List of Frameworks Selected Items Filter Master Checkbox Filtered Items Selected Frameworks Component Frameworks Filter Component UI Components Obesrve? State
- 30. ng2-mobxgithub.com/500tech/ • 64 lines of code • Automatically observes state from the components • Deregisters observers onDestroy
- 31. With MobX
- 32. With MobX
- 33. export class SelectedItemsComponent { constructor(private state:State) {} } <div> {{ state.filteredItems }} </div> ng2-mobx
- 34. export class SelectedItemsComponent { constructor(private state:State) {} } <div> {{ state.filteredItems }} </div> ng2-mobx
- 35. export class SelectedItemsComponent { constructor(private state:State) {} } <div> {{ state.filteredItems }} </div> ng2-mobx
- 36. export class SelectedItemsComponent { constructor(private state:State) {} } <div *mobxAutorun> {{ state.filteredItems }} </div> ng2-mobx
- 37. @observable List of Frameworks Selected Items Filter Master Checkbox Filtered Items @computed Selected Frameworks Component Frameworks Filter Component UI Componentsng2-mobx
- 47. MobX Redux Plain objects Immutable data actions, middleware, dispatcher, reducers, selectors Automatic Explicit Computed values Use reselect
- 48. What’s next? ng-mobx for Angular1