Angular. MobX. Happiness
6 likes2,714 views
The document discusses the integration of MobX with Angular for managing state in applications. It highlights key concepts like observables, computed values, and actions, alongside coding examples that show how to filter and manage items within a component. Additionally, it references relevant projects and resources related to MobX and Angular development.
![PRESENTATION
TITLE
Presenter Name
Small Subtitle
[DELETE THIS]: Presentation caption should be ALL CAPS, small subtitle should be All Capitalized
MobX
yes we can](https://image.slidesharecdn.com/ng2-mobxwide-161119102042/85/Angular-MobX-Happiness-13-320.jpg)
![@Injectable()
class State {
filter = '';
items = [];
}
Observable](https://image.slidesharecdn.com/ng2-mobxwide-161119102042/85/Angular-MobX-Happiness-18-320.jpg)
![@Injectable()
class State {
filter = '';
items = [];
}
Observable](https://image.slidesharecdn.com/ng2-mobxwide-161119102042/85/Angular-MobX-Happiness-19-320.jpg)
![import { observable } from 'mobx';
@Injectable()
class State {
@observable filter = '';
@observable items = [];
}
Observable](https://image.slidesharecdn.com/ng2-mobxwide-161119102042/85/Angular-MobX-Happiness-20-320.jpg)
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