Mobx Performance and Sanity

25
MobX - Performance and Sanity Adam Klein CTO @ 500Tech

Transcript of Mobx Performance and Sanity

Page 1: Mobx Performance and Sanity

MobX - Performance and Sanity

Adam Klein CTO @ 500Tech

Page 2: Mobx Performance and Sanity

Filters

Todos Count

Todo List

Actions Filter ItemTodo Item

AppComponents

StoresFiltered Todos

Current Filter

Todo Store

Add Todo

Page 3: Mobx Performance and Sanity

Performant

Cached Calculations

React to Changes

Trackable, Debuggable

MobX

Page 4: Mobx Performance and Sanity

Performant

Cached Calculations

React to Changes

Trackable, Debuggable

Redux

Page 5: Mobx Performance and Sanity

SubscribeAction

Redux

Reducer

Component

Page 6: Mobx Performance and Sanity

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

Page 7: Mobx Performance and Sanity

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

Page 8: Mobx Performance and Sanity

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

Page 9: Mobx Performance and Sanity

Async Operations

Page 10: Mobx Performance and Sanity

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

Page 11: Mobx Performance and Sanity

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

Page 12: Mobx Performance and Sanity

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

Page 13: Mobx Performance and Sanity

Redux

Selectors using reselect Explicit dependencies

Page 14: Mobx Performance and Sanity

Redux

SubscribeAction Reducer

Middleware Selector

Component

Page 15: Mobx Performance and Sanity

Distributed Flow

Page 16: Mobx Performance and Sanity

Angular

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

Page 17: Mobx Performance and Sanity

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

Inject Store

Page 18: Mobx Performance and Sanity

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>

Page 19: Mobx Performance and Sanity

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

Page 20: Mobx Performance and Sanity

<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

Page 21: Mobx Performance and Sanity

SO NO REDUX?

Page 22: Mobx Performance and Sanity

Central State Performance

Reactive

Undo / Redo (De)serialization

Collaborative State

Page 23: Mobx Performance and Sanity

Complex Library Simple Codebase

Simple Library Complex Codebase

Page 24: Mobx Performance and Sanity

EXAMPLES

https://github.com/mobxjs/

Page 25: Mobx Performance and Sanity

slidehare.net/500tech

@adamklein500

Thank You