MobX Performance and Sanity

MobX
Performance and Sanity
Adam Klein

ADAM KLEIN
C E O / C O - F O U N D E R

• Persist state to a local storage and then boot up from it, out of
the box.
• Pre-fill state on the server, send it to the client in HTML, and boot
up from it, out of the box.
• Serialize user actions and attach them, together with a state
snapshot, to automated bug reports, so that the product
developers can replay them to reproduce the errors.
• Pass action objects over the network to implement collaborative
environments without dramatic changes to how the code is
written.
• Maintain an undo history or implement optimistic mutations
without dramatic changes to how the code is written.
• Travel between the state history in development, and re-evaluate
the current state from the action history when the code changes,
a la TDD.
• Provide full inspection and control capabilities to the development
tooling so that product developers can build custom tools for their
apps.
• Provide alternative UIs while reusing most of the business logic.
Why Redux

People often use MobX as alternative for Redux.
Please note that MobX is just a library to solve a
technical problem and not an architecture
MICHEL WESTRATE
M O B X C R E A T O R

MobX has no
• Stores
• Data Flow
• Architecture Paradigm

• Persist state to a local storage and then boot up from it, out of
the box.
• Pre-fill state on the server, send it to the client in HTML, and boot
up from it, out of the box.
• Serialize user actions and attach them, together with a state
snapshot, to automated bug reports, so that the product
developers can replay them to reproduce the errors.
• Pass action objects over the network to implement collaborative
environments without dramatic changes to how the code is
written.
• Maintain an undo history or implement optimistic mutations
without dramatic changes to how the code is written.
• Travel between the state history in development, and re-evaluate
the current state from the action history when the code changes,
a la TDD.
• Provide full inspection and control capabilities to the development
tooling so that product developers can build custom tools for their
apps.
• Provide alternative UIs while reusing most of the business logic.
MobX State Tree

Some Facts
15K
stars
G I T H U B
3
latest commit
D AYS A G O
5.0.3
version on npm
L AT E S T
28
on egghead.io
F R E E V I D E O S

Battlefield 1
MS Outlook
Datorama
AWS
Simplee
Sap
Coinbase
Mendix
And many more…
Used
By

Tool for Making Objects Reactive
MobX

class Model {
email = ‘adam@500tech.com’;
setEmail(email) {
this.email = email;
}
}
Plain Object

<input type="email"/>
input.value = model.email;
model.setEmail(‘nir@500tech.com’)
model.setEmail(‘ilya@500tech.com’)
...
Reaction

<input type="email"/>
import { autorun } from 'mobx';
autorun(() => {
});
MobX API

import { observable } from 'mobx';
class Model {
@observable email = ‘adam@500tech.com’;
setEmail(email) {
this.email = email;
}
}
Reactive Object

@observable prop => getter and setter
Under the hood

autorun(() => {
});
...
Our Code MobX

autorun(() => {
});
...
Our Code MobX
// create reaction
{
name: ‘Autorun1’
}

autorun(() => {
});
...
Our Code MobX
// access getter
{
name: ‘Autorun1’
}

autorun(() => {
});
...
Our Code MobX
// add dependency
{
name: ‘Autorun1’,
dependencies: [
{ name: ‘model.email’ }
]
}

autorun(() => {
});
...
Our Code MobX
// invoke setter

autorun(() => {
});
...
Our Code MobX
// look for reactions

autorun(() => {
});
...
Our Code MobX
// invoke reaction (sync)
autorun1();

class Model {
@observable isValid = true;
setEmail(email) {
this.email = email;
this.isValid = this.email.match(regexp);
}
}
Duplicate State

import { observable, computed } from 'mobx';
class Model {
@computed get isValid() {
return this.email.match(regexp);
}
setEmail(email) {
this.email = email;
}
}
Computed Value

class Model {
@observable data;
fetchData() {
serverApi.getData().then((data) => {
this.data = data;
});
}
}
Async Operations

class Input extends React.Component {
render() {
return (
<form>
<input value={ model.email }/>
<button disabled={ model.isValid }>Go</button>
</form>
);
}
}
React

import { observer } from 'mobx-react';
@observer
class Input extends React.Component {
render() {
return (
<form>
<input value={ model.email }/>
<button disabled={ model.isValid }>Go</button>
</form>
);
}
}
React

Shopping Cart Demo
g i t H u b . c o m / 5 0 0 t e c h / m o b x - s h o p p i n g - c a r t
Dynamic Observable
Properties
Provider <=> inject
Normalized State
Store Hierarchy
Auto persist to
localStorage

P O W E R
35
Thank You
@ _ 5 0 0 T e c h
s l i d e s h a r e . n e t / 5 0 0 T e c h

MobX Performance and Sanity

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to MobX Performance and Sanity

Similar to MobX Performance and Sanity (20)

More from 500Tech

More from 500Tech (20)

Recently uploaded

Recently uploaded (20)

MobX Performance and Sanity