MobX is a very popular and trending library for state management in frontend applications. It connects to both React & Angular, and allows you to manage your application's state decoupled from your components, and automagically react to changes in plain objects, auto compute derived values, and more.

1. MobX -
Performance and Sanity

2. RECORD SCREEN

3. Adam Klein
CTO @ 500Tech

4. https://www.meetup.com/Angular-IL

6. Taking the state out of
components

7. Items Filter
Checkbox
List
Filter
Add New
Selected
Items
Remove
Item
Input
Selected
Item
App
State
Components
State

8. Easy as pie
import service from ‘myService’;
// call service.action()
// use service.state
Problem Solved!

9. toggle item
Selected Items Master Checkbox
toggle master
Filtered Items
add item change filter
Imperative

10. Declarative

11. Declarative
<div *ngFor="let item of state.filteredItems”>
{{ item.title }}
</div>

12. Declarative
<div *ngFor="let item of 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
Memoizes derived values
Selectively Update UI
React to changes

17. The ideal state
Memoizes derived values
Selectively Update UI
React to changes

18. The ideal state
Memoizes derived values
Selectively Update UI
React to changes

19. MobX

20. MobX
Michel Weststrate from Mendix

21. Michel Weststrate from Mendix
React + Angular connectors
MobX

22. Michel Weststrate from Mendix
React + Angular connectors
Automagically react to changes
MobX

23. Michel Weststrate from Mendix
React + Angular connectors
Automagically react to changes
Works with plain objects
MobX

24. Michel Weststrate from Mendix
React + Angular connectors
Automagically react to changes
Works with plain objects
MobX

25. List of
Frameworks
Selected
Items
Filter
Master
Checkbox
Filtered
Items
Selected Items Filter ComponentUI Components
Store
Observables Computed Values
Reactions

26. FriendsMessages
News FeedTopbar
UI Components
Stores
Sidebar
Feed
Posts Comments

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);
}
…
Works with array methods

37. 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);
}
}

39. autorun(() => {
const items = store.filteredItems;
renderItemsOnDOM(items);
});
Automatic Reaction

40. Update UI automatically
autorun(() => {
const items = store.filteredItems;
renderItemsOnDOM(items);
});

41. Connectors
mobx-react, mobx-angular
Automatically re-renders on changes

42. class TodoView extends React.Component {
render() {
return <div>{ store.filteredItems }</div>
}
}
mobx-react
https://github.com/mobxjs/mobx-react

43. @observer class TodoView extends React.Component {
render() {
return <div>{ store.filteredItems }</div>
}
}
mobx-react
https://github.com/mobxjs/mobx-react

44. <div>
{{ store.filteredItems }}
</div>
mobx-angular
https://github.com/mobxjs/mobx-angular

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
Immutable data
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
Compare function
And more…
There’s more to it…

49. slidehare.net/500tech
@adamklein500
Thank You
mobxjs.github.io/mobx/