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


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

    2016 1
  2. The DOM Was Hard... 2

  3. State Management Is Hard 3

  4. Redux: Simple & Elegant Concept 4

  5. Pulls Amazing Tricks 5

  6. New Things To Learn! Reducers Immutables Denormalization Connect Selectors Smart

    & Dumb components Thunks & Sagas 6
  7. MobX - No Pedaling 7

  8. 8

  9. 9

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

    5. Questions 10
  11. Why Is State Management Hard? Σ State Aggregates Lookup tables

    Server Storage UI 11 affects:
  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
  13. 2. Everything Should Be Derived Automatically Define derivations & reactions

    MobX ensures efficiency & consistency 13
  14. Actions State Views Modify Updates Σ 14

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

  16. 16

  17. 17

  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
  19. observer const ContactEntryView = observer(({contact, viewState}) => <ListItem className={viewState.selection ===

    contact ? 'selected' : null} onClick={() => viewState.selectContact(contact) } > <Avatar src={contact.picture.thumbnail} /> {contact.displayName} {contact.tags.map(tag => <input type="button" value={tag.name} key={tag.id} onClick={() => viewState.selectTag(tag)} />)} </ListItem> ) 19
  20. observer 20

  21. @observer @observer export class ContactsOverview extends Component { render() {

    const {contactStore, viewState} = this.props; return <List> <RaisedButton label="Add Contact" onClick={() => contactStore.createRandomContact() } /> { contactStore.pendingRequestCount > 0 ? <RefreshIndicator /> : null } { contactStore.contacts.map(contact => <ContactEntryView contact={contact} key={contact.id} viewState={viewState} /> ) } </List> } } 21
  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
  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
  24. Fast Numbers! 24

  25. 25

  26. Such Fast Only track data which is accessed in last

    render Minimizes amount of computations PureRenderMixin 26
  27. Scalable MobX @ Mendix 27

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

  29. 29

  30. Demo link 30

  31. 31

  32. Scalable 32 Minimal state Graphs: natural mental model Simple code

    Architectural freedom Third party friendly actions? State views? Modify Updates
  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