Successfully reported this slideshow.

Mobx Internals

0

Share

Loading in …3
×
1 of 35
1 of 35

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

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

×