mobx performance and sanity

MobX - Performance and Sanity

Adam Klein CTO @ 500Tech

Filters

Todos Count

Todo List

Actions Filter ItemTodo Item

AppComponents

StoresFiltered Todos

Current Filter

Todo Store

Add Todo

Performant

Cached Calculations

React to Changes

Trackable, Debuggable

MobX

Performant

Cached Calculations

React to Changes

Trackable, Debuggable

Redux

SubscribeAction

Redux

Reducer

Component

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 }; }) }),

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

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

Async Operations

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

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

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

Redux

Selectors using reselect Explicit dependencies

Redux

SubscribeAction Reducer

Middleware Selector

Component

Distributed Flow

Angular

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

export class AppComponent { constructor(private todos: Todos) {}}

Inject Store

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>

*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>

<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

SO NO REDUX?

Central State Performance

Reactive

Undo / Redo (De)serialization

Collaborative State

Complex Library Simple Codebase

Simple Library Complex Codebase

EXAMPLES

https://github.com/mobxjs/

slidehare.net/500tech

@adamklein500

Thank You