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

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

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 = ‘[email protected]’; setEmail(email) { this.email =
email; } } Plain Object

<input type="email"/> input.value = model.email; model.setEmail(‘[email protected]’) input.value = model.email; model.setEmail(‘[email protected]’)
input.value = model.email; ... Reaction

<input type="email"/> import { autorun } from 'mobx'; autorun(() =>
{ input.value = model.email; }); model.setEmail(‘[email protected]’) model.setEmail(‘[email protected]’) MobX API

class Model { email = ‘[email protected]’; setEmail(email) { this.email =
email; } } Plain Object

import { observable } from 'mobx'; class Model { @observable
email = ‘[email protected]’; setEmail(email) { this.email = email; } } Reactive Object

@observable prop => getter and setter Under the hood

autorun(() => { input.value = model.email; }); model.setEmail(‘[email protected]’) model.setEmail(‘[email protected]’) ...
Our Code MobX

Our Code MobX // create reaction { name: ‘Autorun1’ }

Our Code MobX // access getter { name: ‘Autorun1’ }

Our Code MobX // add dependency { name: ‘Autorun1’, dependencies: [ { name: ‘model.email’ } ] }

Our Code MobX // invoke setter

Our Code MobX // look for reactions

Our Code MobX // invoke reaction (sync) autorun1();

Duplicate State

email = ‘[email protected]’; @observable isValid = true; setEmail(email) { this.email = email; this.isValid = this.email.match(regexp); } } Duplicate State

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

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

SHAMELESS PROMOTION

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

MobX - Performance and Sanity

adam klein

More Decks by adam klein

Other Decks in Programming

Featured

Transcript