Upgrade to Pro — share decks privately, control downloads, hide ads and more …

State management is easy - Introduction to MobX

State management is easy - Introduction to MobX

State is the heart of each application and there is no quicker way to create buggy, unmanageable applications then by producing inconsistent state. Hence many state management solutions try to restrict the ways in which you can modify state, for example by making state immutable. But this introduces new problems; data needs to be normalized, referential integrity can no longer be guaranteed and it becomes next to impossible to use powerful concepts like prototypes.

At Mendix these restrictions where unacceptable and so MobX was born. MobX makes state management simple again by addressing the root issue: it makes it impossible to produce an inconsistent state. This makes state management simple and scalable again.

Michel Weststrate

April 16, 2016
Tweet

More Decks by Michel Weststrate

Other Decks in Programming

Transcript

  1. State Management Is Easy
    Michel Weststrate
    @mweststrate
    Mendix
    React Amsterdam 2016
    1

    View Slide

  2. The DOM Was Hard...
    2

    View Slide

  3. State Management Is Hard
    3

    View Slide

  4. Redux: Simple & Elegant Concept
    4

    View Slide

  5. Pulls Amazing Tricks
    5

    View Slide

  6. New Things To Learn!
    Reducers
    Immutables
    Denormalization
    Connect
    Selectors
    Smart & Dumb
    components
    Thunks & Sagas
    6

    View Slide

  7. MobX - No Pedaling
    7

    View Slide

  8. 8

    View Slide

  9. 9

    View Slide

  10. MobX
    1. The Idea
    2. Simple
    3. Fast
    4. Scalable
    5. Questions
    10

    View Slide

  11. Why Is State Management Hard?
    Σ
    State
    Aggregates Lookup tables Server Storage UI
    11
    affects:

    View Slide

  12. 1. State Should Be Minimally Defined
    No Caching
    No Data Duplication
    No Cascading State Changes
    Don't worry about how the app should react to state!
    12

    View Slide

  13. 2. Everything Should Be Derived
    Automatically
    Define derivations & reactions
    MobX ensures efficiency & consistency
    13

    View Slide

  14. Actions State Views
    Modify Updates
    Σ
    14

    View Slide

  15. Simple
    jsbin.com/hukiso/edit?js,output
    github.com/mweststrate/mobx-contacts-list/
    15

    View Slide

  16. 16

    View Slide

  17. 17

    View Slide

  18. @observable / @computed
    class Contact {
    @observable title = "Mr"
    @observable firstName = "Michel"
    @observable lastName = "Moped"
    @observable picture = {
    thumbnail: null,
    medium: null,
    large: null
    }
    @observable tags = []
    @computed get displayName() {
    const cfl = capitalizeFirstLetter
    return `${cfl(this.title)}. ${cfl(this.firstName)} ${cfl(this.lastName)}`
    }
    }
    class Tag{
    id;
    @observable name = "Favorites"
    }
    18

    View Slide

  19. observer
    const ContactEntryView = observer(({contact, viewState}) =>
    className={viewState.selection === contact ? 'selected' : null}
    onClick={() => viewState.selectContact(contact) }
    >

    {contact.displayName}
    {contact.tags.map(tag => type="button"
    value={tag.name}
    key={tag.id}
    onClick={() => viewState.selectTag(tag)}
    />)}

    )
    19

    View Slide

  20. observer
    20

    View Slide

  21. @observer
    @observer
    export class ContactsOverview extends Component {
    render() {
    const {contactStore, viewState} = this.props;
    return
    label="Add Contact"
    onClick={() => contactStore.createRandomContact() }
    />
    { contactStore.pendingRequestCount > 0
    ?
    : null
    }
    { contactStore.contacts.map(contact =>
    contact={contact}
    key={contact.id}
    viewState={viewState}
    />
    ) }

    }
    }
    21

    View Slide

  22. Actions
    createRandomContact() {
    this.pendingRequestCount++
    superagent.get('https://randomuser.me/api/').end((error, data) => {
    const contact = new Contact(data)
    this.contacts.push(contact)
    this.pendingRequestCount--
    }
    }
    22

    View Slide

  23. @observable
    enables MobX to observe your data
    @observer
    MobX ensures that this component is consistent with the state
    @computed
    MobX ensures that this value is consistent with the state
    23

    View Slide

  24. Fast
    Numbers!
    24

    View Slide

  25. 25

    View Slide

  26. Such Fast
    Only track data which is accessed in last render
    Minimizes amount of computations
    PureRenderMixin
    26

    View Slide

  27. Scalable
    MobX @ Mendix
    27

    View Slide

  28. ~500 classes
    apidocs.mendix.com/modelsdk/
    28

    View Slide

  29. 29

    View Slide

  30. Demo
    link
    30

    View Slide

  31. 31

    View Slide

  32. Scalable
    32
    Minimal state
    Graphs: natural mental model
    Simple code
    Architectural freedom
    Third party friendly
    actions? State views?
    Modify Updates

    View Slide

  33. State Management Is Simple!
    Questions? #reactamsterdam @mweststrate
    "I am putting my eggs into React and MobX basket. So far building two huge React apps I haven't
    had any reason to regret it."
    "It's almost ridiculous how simple and powerful MobX + React is"
    "Working with #mobx is basically a continuous loop of me going “this is way too simple, it definitely
    won’t work” only to be proven wrong"
    "Try react-mobx with es6 and you will love it so much that you will hug someone."
    "MobX compared to Redux feels like gravity gun compared to a wheelbarrow"
    "I used to be Angular guy, but seeing how observables play well with React,
    I would never go back to it."
    "I have built big app with MobX already and comparing to the one before that which was using
    Redux, it is simpler to read and much easier to reason about."
    "Cuts out much boilerplate and complexity."
    "The #mobx is the way I always want things to be! It's really surprising simple and fast! Totally
    awesome! Don't miss it!" 33

    View Slide