Mattia Manzati - Real-World MobX Project Architecture - Codemotion Rome 2019

ReduxRedux
Raise your hand if you used in production...Raise your hand if you used in production...
2

MobXMobX
Raise your hand if you used in production...Raise your hand if you used in production...
3

React.createContextReact.createContext
Do you want to experiment with justDo you want to experiment with just
I hope I'll change your idea!
I hope I'll change your idea!
4

Ego SlideEgo Slide
@mattiamanzati
5

What does anWhat does an
application needs?application needs?
6

STORE ITS STATE
6

STORE ITS STATEMODIFY ITS STATE
6

VIEW ITS STATE
AGGREGATED
6

VIEW ITS STATE
AGGREGATED
PERFORM
SIDE EFFECTS
6

...JavaScript?...JavaScript?
7

{
name: "work",
done: false
}
7

{
name: "work",
done: false
}
onClick = () =>{
todo.done = true
}
7

{
name: "work",
done: false
}
onClick = () =>{
todo.done = true
}
get totalCount(){
return this.todos.length
}
7

{
name: "work",
done: false
}
onClick = () =>{
todo.done = true
}
get totalCount(){
return this.todos.length
}
???
7

MobXMobX
Reactive library
No concept of stream
8

MobXMobX
Reactive library
No concept of stream
Uses Proxies (ES6+) or Atoms (ES5-)
8

ObservablesObservables
ActionsActions
9

Store your application state
ActionsActions
9

State may change over time
ActionsActions
9

Observable instance may be the same
ActionsActions
9

ActionsActions
Change observables state value
9

ActionsActions
Change observables state value
Can be triggered from UI or side eﬀects
9

ComputedsComputeds
ReactionsReactions
10

ComputedsComputeds
Derived state data
ReactionsReactions
10

ComputedsComputeds
Derived state data
Automatically updated synchronusly
ReactionsReactions
10

ComputedsComputeds
Derived state data
Always up to date with current
observable state
ReactionsReactions
10

ComputedsComputeds
Derived state data
observable state
ReactionsReactions
Trigger functions when a condition changes
10

ComputedsComputeds
Derived state data
observable state
ReactionsReactions
Trigger functions when a condition changes
UI is a reaction of the store state
10

A successful pattern inA successful pattern in
history!history!
11

Excel is Reactive!Excel is Reactive!
13

CELLS
13

CELLSUSER INTERACTION
13

FORMULAS
13

FORMULAS
SCREEN UPDATES
13

Let's start!Let's start!
A classic example: TODO ListsA classic example: TODO Lists
14

class App extends React.Component {
// observable values
currentText = "";
todos = [];
// actions
addTodo = () => {
this.todos.push({ name: this.currentText, done: false });
this.currentText = "";
};
toggleTodo = todo => {
todo.done = !todo.done;
};
setCurrentText = text => {
this.currentText = text;
};
// computed
get pendingCount() {
return this.todos.filter(todo => !todo.done).length;
}
// ...
} 15

// ...
// render observer
render() {
return (
<div className="App">
<h1>TODOs</h1>
<input
type="text"
value={this.currentText}
onChange={e => this.setCurrentText(e.target.value)}
/>
<button onClick={this.addTodo}>Add</button>
<ul>
{this.todos.map(item => (
<li onClick={() => this.toggleTodo(item)}>
{item.name} {item.done ? <i>DONE!</i> : null}
</li>
))}
</ul>
<p>There are {this.pendingCount} pending todos.</p>
</div>
);
16

// ...
}
const MyApp = observer(App);
decorate(App, {
currentText: observable,
todos: observable,
addTodo: action,
toggleTodo: action,
setCurrentText: action,
pendingCount: computed
});
const rootElement = document.getElementById("root");
ReactDOM.render(<MyApp />, rootElement);
17

Few notes:Few notes:
Component state managed byComponent state managed by
MobX or not?MobX or not?
@observable
currentText = ""
// ...
}
export default observer(App)
state = {
currentText: ""
}
// ...
} 18

@observable
currentText = ""
// ...
}
19

Better optimized than setState
@observable
currentText = ""
// ...
}
19

Simpler API than setState
@observable
currentText = ""
// ...
}
19

Simpler API than setState
Easier to refactor to a separate store
@observable
currentText = ""
// ...
}
19

Decorators are optionalDecorators are optional
class Store {
@observable
todos = []
}
class Store {
todos = []
}
decorate(Store, {
todos: observable
});
20

Classes are optionalClasses are optional
class Store {
@observable
todos = []
}
const store = new Store()
const store = observable({
todos: []
})
21

MobX is unopinionatedMobX is unopinionated
22

How do I X?
22

How do I X?
Should I MVC?
22

How do I X?
Should I MVC?
Should I MVVM?
22

How do I X?
Should I MVC?
Should I MVVM?
Should I MVP?
22

How do I X?
Should I MVC?
Should I MVVM?
Should I MVP?
Should I Flux?
22

MobX is aMobX is a
reactive data libraryreactive data library
23

It works!It works!
Does it scales?
Does it scales?
24

It works!It works!
Is it testable?
Is it testable?
Does it scales?
Does it scales?
24

It works!It works!
Is it testable?
Is it testable?
Mix BL and UI?
Mix BL and UI?
Does it scales?
Does it scales?
24

Don't mix Business Logic & UIDon't mix Business Logic & UI
25

What if we want a React Native app later?
25

What if UI framework changes?
25

What if UI framework changes?
What if we need SSR?
25

class Store {
// observable values
currentText = "";
todos = [];
// actions
addTodo = () => {
this.todos.push({ name: this.currentText, done: false });
};
toggleTodo = todo => { todo.done = !todo.done; };
setCurrentText = text => { this.currentText = text; };
// computed
get pendingCount() {
return this.todos.filter(todo => !todo.done).length;
}
}
Extracting the StoreExtracting the Store
26

class Store {
// ...
}
// ...
}
const MyApp = observer(Store);
const store = new Store();
ReactDOM.render(<MyApp store={store} />, rootElement);
Wiring the Store as propWiring the Store as prop
27

import { observer, Provider, inject }
from "mobx-react";
// ...
const MyApp = inject("store")(observer(App));
ReactDOM.render(
<Provider store={store}>
<MyApp />
</Provider>, rootElement);
Use Provider & InjectUse Provider & Inject
28

from "mobx-react";
// ...
ReactDOM.render(
<MyApp />
No need to pass down manually your stores
28

from "mobx-react";
// ...
ReactDOM.render(
<MyApp />
Allows to change store implementation in your tests
28

from "mobx-react";
// ...
ReactDOM.render(
<MyApp />
Allows to change store implementation in your tests
Only one point of store injections into the views
28

Real-World ArchitectureReal-World Architecture
Current State RecapCurrent State Recap
VIEW
STORE
Renders the view and
calls actions on the store
Holds and modify domain state
Holds and modify application state
Implements business logic
Fetch from API
Implements view actions
Aggregates data for the view
29

VIEW
STORE
Holds and modify domain state
Fetch from API
Implements view actions
W
ay too m
uch
W
ay too m
uch
things!
things!
29

Domain StateDomain State
WTF is dat?WTF is dat?
30

Is the domain of your app
in our example, of Todo
30

Describes the application entities and relations
30

Usually it is persistent and stored somewhere
30

Not tight with the UI
30

Not tight with the UI
Highly reusable
30

first implementationfirst implementation
class Todo {
name = "";
done = false;
}
decorate(Todo, {
name: observable,
done: observable
});
class Store {
// ...
addTodo = () => {
const todo = new Todo();
todo.name = this.currentText;
this.todos.push(todo);
};
}
31

domain actionsdomain actions
// domain todo model
class Todo {
name = "";
done = false;
toggle(){
this.done = !this.done
}
}
decorate(Todo, {
// ...
toggle: action
});
Observables should be changed trough actions! So it's a
good idea to deﬁne dumb actions on our domain model!
32

let's be more real!let's be more real!
class Todo {
name = "";
done = false;
user_id = 0; // UHM... is this ok?
// ...
}
// domain user model
class User {
id = 0
name = ""
}
33

tree or graph?tree or graph?
class Todo {
name = "";
done = false;
user_id = 0;
// ...
}
class User {
id = 0
name = ""
}
class Todo {
name = "";
done = false;
user = new User(0, "");
// ...
}
class User {
id = 0
name = ""
}
34

class Todo {
name = "";
done = false;
user_id = 0;
// ...
}
class User {
id = 0
name = ""
}
class Todo {
name = "";
done = false;
// ...
}
class User {
id = 0
name = ""
}
Normalized
34

class Todo {
name = "";
done = false;
user_id = 0;
// ...
}
class User {
id = 0
name = ""
}
class Todo {
name = "";
done = false;
// ...
}
class User {
id = 0
name = ""
}
Normalized
Object tree
34

class Todo {
name = "";
done = false;
user_id = 0;
// ...
}
class User {
id = 0
name = ""
}
class Todo {
name = "";
done = false;
// ...
}
class User {
id = 0
name = ""
}
Normalized
Object tree
Easily serialize
34

class Todo {
name = "";
done = false;
user_id = 0;
// ...
}
class User {
id = 0
name = ""
}
class Todo {
name = "";
done = false;
// ...
}
class User {
id = 0
name = ""
}
Normalized
Object tree
Easily serialize
Diﬀicult access 34

class Todo {
name = "";
done = false;
user_id = 0;
// ...
}
class User {
id = 0
name = ""
}
class Todo {
name = "";
done = false;
// ...
}
class User {
id = 0
name = ""
}
Normalized
Object tree
Easily serialize
Diﬀicult access
Denormalized
34

class Todo {
name = "";
done = false;
user_id = 0;
// ...
}
class User {
id = 0
name = ""
}
class Todo {
name = "";
done = false;
// ...
}
class User {
id = 0
name = ""
}
Normalized
Object tree
Easily serialize
Diﬀicult access
Denormalized
Object graph
34

class Todo {
name = "";
done = false;
user_id = 0;
// ...
}
class User {
id = 0
name = ""
}
class Todo {
name = "";
done = false;
// ...
}
class User {
id = 0
name = ""
}
Normalized
Object tree
Easily serialize
Diﬀicult access
Denormalized
Object graph
Harder serialization
34

class Todo {
name = "";
done = false;
user_id = 0;
// ...
}
class User {
id = 0
name = ""
}
class Todo {
name = "";
done = false;
// ...
}
class User {
id = 0
name = ""
}
Normalized
Object tree
Easily serialize
Diﬀicult access
Denormalized
Object graph
Harder serialization
Easy access 34

good news everyone!good news everyone!
35

lets do both!lets do both!
class Todo {
name = ""
done = false
user_id = 0
get user(){
return store.getUserById(this.user_id) // <- WTF
}
set user(value){
this.user_id = value.id
}
}
decorate(Todo, {
//...
user_id: observable,
user: computed
}) 36

Multiple Store CommunicationMultiple Store Communication
available pattersavailable patters
37

Singleton instance & require/import
37

Dependency injection framework
37

Dependency injection framework
Root store pattern
37

root store patternroot store pattern
class RootStore {
todoStore = null;
fetch = null;
apiKey = "";
constructor(fetch, apiKey){
this.fetch = fetch
this.apiKey = apiKey
this.todoStore = new Store(this)
}
}
class Todo {
store = null;
constructor(store){ this.store = store }
}
class Store {
rootStore = null;
constructor(rootStore){ this.rootStore = rootStore }
} 38

39

Central point for each store to
communicate
39

communicate
Strongly typed
39

communicate
Strongly typed
Works as dependency root
Can host environment speciﬁc variables
39

communicate
Strongly typed
Works as dependency root
Can host environment speciﬁc variables
Very easily testable
39

back to our problemback to our problem
class Todo {
name = ""
done = false
user_id = 0
store = null;
constructor(store){ this.store = store; }
get user(){
return this.store.rootStore
.userStore.getUserById(this.user_id)
}
set user(value){
this.user_id = value.id
}
}
40

import { observer, Provider,
inject } from "mobx-react";
// ...
const store = new RootStore(window.fetch);
ReactDOM.render(
<MyApp />
41

test("it should restore data from API", async t => {
const fakeFetch = () => Promise.resolve({
data: [{id: 1, name: "Mattia"}]
})
const store = new RootStore(fakeFetch)
await store.userStore.fetchAll()
t.equal(store.userStore.users[0].name, "Mattia")
})
42

VIEW
STORE
Holds domain state
Create and modify domain state
Fetch from API
DOMAIN MODEL
43

Domain Model SerializationDomain Model Serialization
turning JSON into observablesturning JSON into observables
44

Our state is an object tree
44

Unfortunately it's not a plain JS object
44

Most APIs provide JSON as intermediate language
44

Most APIs provide JSON as intermediate language
We need to provide conversions to serialize or
deserialize our state
44

deserializationdeserialization
class Todo {
// ...
constructor(store, data){
this.store = store
if(data) Object.assign(this, data)
}
}
45

serializationserialization
class Todo {
// ...
get toJSON(){
return {
name: this.name,
done: this.done
}
}
}
// ...
decorate(Todo, {
toJSON: computed
})
JSON is just another view of the domain model,
so we can just derive itderive
46

packagespackages
class User {
@serializable(identifier()) id = 0;
@serializable name = '';
}
class Todo {
@serializable name = '';
@serializable done = false;
@serializable(object(User)) user = null;
}
// You can now deserialize and serialize!
const todo = deserialize(Todo, {
name: 'Hello world',
done: true,
user: { id: 1, name: 'Mattia' }
});
const todoJSON = serialize(todo)
with serializr you get that with tagging your domain models
47

the deserialization problemthe deserialization problem
class TodoStore {
todos = []
fromCache(){
const cachedData = localStorage.getItem("todos")
|| "[]"
this.todos = JSON.parse(cachedData)
.map(data => new Todo(this, data)
}
getById = id => this.todos
.find(item => item.id === id)
}
decorate(TodoStore, {
fromCache: action
})
deserializing is memory intensive!
48

MobX hidden featureMobX hidden feature
_interceptReads_interceptReads
import {_interceptReads} from "mobx"
const todos = observable.map()
_interceptReads(todos, value => value + "! LOL")
todos.set(1, "Mattia")
console.log(todos.get("1")) // => Mattia! LOL
undocumented (yet there since 2017) mobx feature
allows to transform mobx values while reading
available for objects, arrays, maps and boxed values
49

MobX hidden featureMobX hidden feature
_interceptReads to the rescue!_interceptReads to the rescue!
class TodoStore {
todos = []
_cache = {}
constructor(rootStore){
this.rootStore = rootStore
// ...
_interceptReads(this.todos, this.unboxTodo)
}
unboxTodo = data => {
if(this._cache[data.id]){
return this._cache[data.id]
}
this._cache[data.id] = new Todo(this, data)
return this._cache[data.id]
}
}
50

MobX PerformanceMobX Performance
better performant domain storesbetter performant domain stores
51

Use ES6 Maps and lookup by ID when possible
51

Store JSON in an observable map
51

Use _interceptReads to perform lazy deserialization
51

Use _interceptReads to perform lazy deserialization
Implement ID -> name without deserialization
51

VIEW
REPOSITORY
Holds domain state
Fetch from API
STORE
DOMAIN MODEL
52

class Overview {
rootStore = null
currentText = ""
constructor(rootStore){ this.rootStore = rootStore }
get todos(){
// perform sorting and pagining here
return this.rootStore.todoStore.todos
}
handleAddClicked(){
this.rootStore.todoStore.addTodo(this.currentText)
this.currentText = ""
}
}
decorate(Router, {
todos: computed,
currentText: observable,
handleAddClicked: action
})
53

Services & PresentersServices & Presenters
routingrouting
class Router {
uri = "/"
page = null
// ...
reaction(() => this.uri, uri => this.parseUri(uri))
}
openOverview(){
this.page = { name: "overview", data: { project_id: 1 }}
}
}
decorate(Router, {
uri: observable,
page: observable
})
54

routingrouting
class Router {
uri = "/"
page = null
// ...
}
openOverview(){
this.page = { name: "overview", data: { project_id: 1 }}
}
}
decorate(Router, {
uri: observable,
page: observable
}) Where load that data?
Where load that data?
54

view presenterview presenter
class Router {
uri = "/"
page = null
this.page = this.loadHome()
}
openOverview(){
this.page = fromPromise(
this.overviewStore.fetchData()
.then(data =>
Promise.resolve({ name: "overview", data })
)
)
}
}
55

fromPromisefromPromise
class Router {
uri = "/"
page = null
this.page = this.loadHome()
}
openOverview(){
this.page = fromPromise(
this.overviewStore.fetchData()
.then(data =>
Promise.resolve({ name: "overview", data })
)
)
}
}
56

MobX Async TipsMobX Async Tips
reactive finite state machinesreactive finite state machines
<div>
{ this.page.case({
pending: () => "loading",
rejected: (e) => "error: " + e,
fulfilled: ({name, data}) => {
switch(name){
case "home": return <HomePage data={data} />;
case "overview": return <Overview data={data} />;
}
}
})}
</div>
57

VIEW
REPOSITORY
Holds domain state
Fetch from API
SERVICE
DOMAIN MODEL
PRESENTER
Call actions on the services
58

Today's RecapToday's Recap
1. Use Redux if you're paid by the hour
59

2. Find your minimal state
59

3. Derive whatever is possible
59

4. Think as you're building for any UI environment
59

4. Think as you're building for any UI environment
5. Always experiment and have fun!
59

Want something opinionated?Want something opinionated?
1. Deﬁne store shape
2. Automatic serialization/deserialization
3. Implements both a immutable & mutable store
4. Deﬁnes a stricter architecture
5. Time travelling
discover mobx-state-treediscover mobx-state-tree
60

Not into mutable things?Not into mutable things?
stay here for the next talk!stay here for the next talk!
61

Thanks for your time!Thanks for your time!
Questions?Questions?

@MattiaManzati - slides.com/mattiamanzati
62

ReferencesReferences

https://slides.com/mattiamanzati/real-world-
mobx
http://mobx-patterns.surge.sh/
https://medium.com/@mweststrate/ui-as-an-
afterthought-26e5d2bb24d6
https://github.com/mobxjs/mobx
https://github.com/mobxjs/mobx-react
https://github.com/mobxjs/mobx-state-tree
63

Mattia Manzati - Real-World MobX Project Architecture - Codemotion Rome 2019

More Related Content

Similar to Mattia Manzati - Real-World MobX Project Architecture - Codemotion Rome 2019 (20)

More from Codemotion (20)

Recently uploaded (20)

Mattia Manzati - Real-World MobX Project Architecture - Codemotion Rome 2019