Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobx Internals

Slides for Mobx - Performance and Sanity talk as given in ReactNYC meetup group

  • Login to see the comments

  • Be the first to like this

Mobx Internals

  1. 1. MobX Performance and Sanity Adam Klein
  2. 2. ADAM KLEIN C E O / C O - F O U N D E R
  3. 3. • 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
  4. 4. 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
  5. 5. MobX has no • Stores • Data Flow • Architecture Paradigm
  6. 6. • 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
  7. 7. • 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
  8. 8. 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
  9. 9. Battlefield 1 MS Outlook Datorama AWS Simplee Sap Coinbase Mendix And many more… Used By
  10. 10. Tool for Making Objects Reactive MobX
  11. 11. class Model { email = ‘adam@500tech.com’; setEmail(email) { this.email = email; } } Plain Object
  12. 12. <input type="email"/> input.value = model.email; model.setEmail(‘nir@500tech.com’) input.value = model.email; model.setEmail(‘ilya@500tech.com’) input.value = model.email; ... Reaction
  13. 13. <input type="email"/> import { autorun } from 'mobx'; autorun(() => { input.value = model.email; }); model.setEmail(‘nir@500tech.com’) model.setEmail(‘ilya@500tech.com’) MobX API
  14. 14. class Model { email = ‘adam@500tech.com’; setEmail(email) { this.email = email; } } Plain Object
  15. 15. import { observable } from 'mobx'; class Model { @observable email = ‘adam@500tech.com’; setEmail(email) { this.email = email; } } Reactive Object
  16. 16. @observable prop => getter and setter Under the hood
  17. 17. autorun(() => { input.value = model.email; }); model.setEmail(‘nir@500tech.com’) model.setEmail(‘ilya@500tech.com’) ... Our Code MobX
  18. 18. autorun(() => { input.value = model.email; }); model.setEmail(‘nir@500tech.com’) model.setEmail(‘ilya@500tech.com’) ... Our Code MobX // create reaction { name: ‘Autorun1’ }
  19. 19. autorun(() => { input.value = model.email; }); model.setEmail(‘nir@500tech.com’) model.setEmail(‘ilya@500tech.com’) ... Our Code MobX // access getter { name: ‘Autorun1’ }
  20. 20. autorun(() => { input.value = model.email; }); model.setEmail(‘nir@500tech.com’) model.setEmail(‘ilya@500tech.com’) ... Our Code MobX // add dependency { name: ‘Autorun1’, dependencies: [ { name: ‘model.email’ } ] }
  21. 21. autorun(() => { input.value = model.email; }); model.setEmail(‘nir@500tech.com’) model.setEmail(‘ilya@500tech.com’) ... Our Code MobX // invoke setter
  22. 22. autorun(() => { input.value = model.email; }); model.setEmail(‘nir@500tech.com’) model.setEmail(‘ilya@500tech.com’) ... Our Code MobX // look for reactions
  23. 23. autorun(() => { input.value = model.email; }); model.setEmail(‘nir@500tech.com’) model.setEmail(‘ilya@500tech.com’) ... Our Code MobX // invoke reaction (sync) autorun1();
  24. 24. Duplicate State
  25. 25. import { observable } from 'mobx'; class Model { @observable email = ‘adam@500tech.com’; @observable isValid = true; setEmail(email) { this.email = email; this.isValid = this.email.match(regexp); } } Duplicate State
  26. 26. import { observable, computed } from 'mobx'; class Model { @observable email = ‘adam@500tech.com’; @computed get isValid() { return this.email.match(regexp); } setEmail(email) { this.email = email; } } Computed Value
  27. 27. import { observable } from 'mobx'; class Model { @observable data; fetchData() { serverApi.getData().then((data) => { this.data = data; }); } } Async Operations
  28. 28. class Input extends React.Component { render() { return ( <form> <input value={ model.email }/> <button disabled={ model.isValid }>Go</button> </form> ); } } React
  29. 29. 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
  30. 30. 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
  31. 31. SHAMELESS PROMOTION
  32. 32. 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

×