MobX: State Management made easy

45
STATE MANAGEMENT EASY Made

Transcript of MobX: State Management made easy

Page 1: MobX: State Management made easy

STATE MANAGEMENT

EASYMade

Page 2: MobX: State Management made easy

Paulo PiresSoftware Engineer

Page 3: MobX: State Management made easy

Belo Horizonte - Brazil

Page 4: MobX: State Management made easy

DOM era

DIFICIL

Page 5: MobX: State Management made easy

State

É DIFICIL

Page 6: MobX: State Management made easy

🗄

💻 💾

state

UI

cloud servicedatabase

Por que state management é dificil? 🤔

Page 7: MobX: State Management made easy

ReduxSimple and Elegant Concept

Page 8: MobX: State Management made easy
Page 9: MobX: State Management made easy

NOVAS coisas para APRENDER

Reducers

Page 10: MobX: State Management made easy

Reducers

ImmutableNOVAS coisas para APRENDER

Page 11: MobX: State Management made easy

Reducers

Immutable

ConnectNOVAS coisas para APRENDER

Page 12: MobX: State Management made easy

Reducers

Immutable

Connect

Smart and Dumb Components

NOVAS coisas para APRENDER

Page 13: MobX: State Management made easy

Reducers

Immutable

Connect

Smart and Dumb Components

Thunks and Sagas

NOVAS coisas para APRENDER

Page 14: MobX: State Management made easy
Page 15: MobX: State Management made easy

Redux Nos EnsinaCoisas Novas

Page 16: MobX: State Management made easy

MobX

Page 17: MobX: State Management made easy

MobX

💡A Ideia 📜Conceitos

💻Simplicidade ⚡Velocidade 🗻Escalonável

Page 18: MobX: State Management made easy

State deve ser minimamente definido

💡

Page 19: MobX: State Management made easy

State deve ser minimamente definido

Sem Cache

💡

Page 20: MobX: State Management made easy

State deve ser minimamente definido

Sem Cache

💡

Sem Duplicação de Dados

Page 21: MobX: State Management made easy

State deve ser minimamente definido

Sem Cache

💡

Sem Duplicação de Dados Sem Mudanças em Cascata

Page 22: MobX: State Management made easy

TUDO DEVE SER derivado

💡

Page 23: MobX: State Management made easy

MobX: State

📜

Page 24: MobX: State Management made easy

📜MobX: State

Page 25: MobX: State Management made easy

📜MobX: State

Page 26: MobX: State Management made easy

MobX: Derivations

📜

Page 27: MobX: State Management made easy

MobX: DerivationsCOMPUTED

📜

Page 28: MobX: State Management made easy

📜MobX: Derivations

Page 29: MobX: State Management made easy

📜MobX: Derivations

Page 30: MobX: State Management made easy

MobX: DerivationsREACTIONS

📜

Page 31: MobX: State Management made easy

📜MobX: DerivationsREACTIONS

Page 32: MobX: State Management made easy

MobX: Actions

📜

Page 33: MobX: State Management made easy

📜MobX: Actions

Page 34: MobX: State Management made easy

📜MobX: Actions

Page 35: MobX: State Management made easy
Page 36: MobX: State Management made easy

Simplicidade💻

Page 37: MobX: State Management made easy

@observableenables MobX to observe your data

💻

Page 38: MobX: State Management made easy

@observerMobX check if this component is

consistent with state

💻

Page 39: MobX: State Management made easy

@computedMobX ensures that this value is

consistent with state

💻

Page 40: MobX: State Management made easy

Velocidade⚡

Page 41: MobX: State Management made easy

Page 42: MobX: State Management made easy

Escalabilidade🗻

Page 43: MobX: State Management made easy

Estado MinimoCódigo Simples

Third Party Friendly

🗻

Page 44: MobX: State Management made easy
Page 45: MobX: State Management made easy