A lightning talk about MobX state management solution for Angular single page applications. The presentation gives a taste about MobX and when it's better than redux.

1. MobX -
Performance and Sanity
Adam Klein
CTO @ 500Tech

2. Filters
Todos Count
Todo List
Actions Filter ItemTodo Item
AppComponents
Stores
Filtered Todos
Current Filter
Todo
Store
Add Todo

3. Performant
Cached Calculations
React to Changes
Trackable, Debuggable
MobX

4. Performant
Cached Calculations
React to Changes
Trackable, Debuggable
Redux

5. SubscribeAction
Redux
Reducer
Component

6. Boilerplate
[TodoActions.SET_TODO_STATUS]: (state, action) =>
...state,
todos: state.todos.map(todo => {
return (todo.id !== action.payload.id)
? todo
: {
...todo,
completed: action.payload.completed
};
})
}),

7. Plain Objects
@observable completed = false;
@action setStatus(value) {
this.completed = value;
}

8. Plain Objects
@observable completed = false;
@action setStatus(value) {
this.completed = value;
}

9. Async Operations

10. Use Promises
@action submitForm(obj) {
this.setIsLoading(true);
this.api.sendObject(obj)
.then((res) => {
this.setIsLoading(false);
this.closeModal();
})
.catch((error) => {
this.setIsLoading(false);
this.notify(error);
});
}

11. Computed
@computed get filteredItems() {
return this.filter === 'All'
? this.todos
: this.todos.filter(
(todo) => this.filter === ‘Completed’
? todo.completed : !todo.completed
);
}

12. Computed
@computed get filteredItems() {
return this.filter === 'All'
? this.todos
: this.todos.filter(
(todo) => this.filter === ‘Completed’
? todo.completed : !todo.completed
);
}

13. Redux
Selectors using reselect
Explicit dependencies

14. Redux
SubscribeAction Reducer
Middleware Selector
Component

15. Distributed Flow

16. Angular
https://github.com/mobxjs/mobx-angular

17. export class AppComponent {
constructor(private todos: Todos) {}
}
Inject Store

18. Template
<section id="todoapp">
<form (submit)="todos.addTodo({ title: title })">
<input [(ngModel)]="title">
</form>
<ul>
<li *ngFor="let todo of todos.filteredItems"
[class.completed]="todo.completed">
<input type=“checkbox"
[checked]=“todo.completed”
(change)="todo.setCompleted(!todo.completed)">
<label>{{ todo.title }}</label>
</li>
</ul>
</section>

19. *mobxAutorun
<section id="todoapp" *mobxAutorun>
<form (submit)="todos.addTodo({ title: title })">
<input [(ngModel)]="title">
</form>
<ul>
<li *ngFor="let todo of todos.filteredItems"
[class.completed]="todo.completed">
<input type=“checkbox"
[checked]=“todo.completed”
(change)="todo.setCompleted(!todo.completed)">
<label>{{ todo.title }}</label>
</li>
</ul>
</section>

20. <section id="todoapp" *mobxAutorun>
<form (submit)="todos.addTodo({ title: title })">
<input [(ngModel)]="title">
</form>
<ul>
<li *ngFor="let todo of todos.filteredItems"
[class.completed]="todo.completed">
<input type=“checkbox"
[checked]=“todo.completed”
(change)="todo.setCompleted(!todo.completed)">
<label>{{ todo.title }}</label>
</li>
</ul>
</section>
With MobX

21. SO NO REDUX?

22. Central State
Performance
Reactive
Undo / Redo
(De)serialization
Collaborative State

23. Complex Library
Simple Codebase
Simple Library
Complex Codebase

24. EXAMPLES
https://github.com/mobxjs/

25. slidehare.net/500tech
@adamklein500
Thank You