Angular. MobX. Happiness
•
6 likes•2,710 views
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
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Angular. MobX. Happiness
Similar to Angular. MobX. Happiness (20)
More from 500Tech
More from 500Tech (20)
Recently uploaded
Recently uploaded (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