MobX: the way to simplicity
0 likes510 views
The document discusses the use of MobX for state management in single-page applications, highlighting its advantages over Redux such as simplicity, automatic change detection, and ease of use with React. It outlines MobX features including observables, actions, transactions, and how these can optimize performance in complex forms. The document concludes that MobX is suitable for developing applications with strong performance requirements and extensive forms, with support for server-side rendering.
MobX: the way to simplicity
- 1. MobX: path to simplicity 6/28/18 Staff UI Developer Dmitrii Turlychkin
- 2. St. Petersburg (Russia) Saratov (Russia) Kharkiv (Ukraine) Krakow (Poland) Lviv (Ukraine) San Ramon (CA) Dallas (TX) Milwaukee (WI) New York (NY) Wayne (NJ) Atlanta (GA) St. Petersburg (FL) Corporate office Site office Belgrade (Serbia) About Software Engineer in Grid Dynamics UI developer Lecturer in Yuri Gagarin SSTU Public speaker Try to make world better
- 3. Agenda • Why did we desire to select MobX? • MobX features overview • Using for real-world tasks • Asyncrony • Side effects • Our solution based on MobX 3/2/18
- 4. 4 • SPA (single page application) • Server side rendering • Reactions beside forms • A lot of forms on the same page • Charts • Grids • Support mobile devices from iPhone 5S • Good performance (Lighthouse for testing) Business requirements
- 6. Redux • Simple • Small size(6 кб) • Functional programming paradigm • Immutability • Hard understating curve
- 7. Redux highlights • One store – one source of truth • A lot of boilerplate • Need manipulations for better performance out of the box • Time traveling out of the box • Dan Abramov J
- 9. MobX • Simple for start • OOP programming paradigm • Mutability • Magic inside • Observable & Observer • Friendly for nested structures
- 11. MobX highlights • Automatic change detection • Implicit realization • Global and local usage • ”Reactivity” • Simple for start • State available for read and write • state === state (always is actual) • State can be normalized and renormalized
- 13. Components out of the box • @observable • @computed • @action • autorun • reaction • transaction • untracked
- 14. @observable
- 15. Structures out of the box • Arrays • Objects • Maps • Boxed values
- 17. MobX with React • @observer • @inject
- 18. @observer
- 20. Components out of the box • @observable • @computed • @action • autorun • reaction • transaction • untracked
- 22. Strict mode
- 23. Components out of the box • @observable • @computed • @action • autorun • reaction • transaction • untracked
- 24. Transaction • Transaction can be used to batch a bunch of updates without notifying any observers until the end of the transaction. • Takes a function as argument and runs it. • No observers are notified until this function has completed.
- 25. Transaction • Transaction returns any value that was returned by the worker function. • Note that transaction runs completely synchronously. • Transactions can be nested. • Only after completing the outermost transaction pending reactions will be run.
- 27. 27 • Set fields with value based on select value from the drop-down • Reset errors • ………… Business story
- 30. Components out of the box • @observable • @computed • @action • autorun • reaction • transaction • untracked
- 32. 32 Business story • Calculate the percentage of required valid filled fields and display on the "progress bar" for forms on the tab • …………
- 34. 34 • Calculate the percentage of required valid filled fields and display on the "progress bar" for forms on the tab • Calculate overall the percentage for all forms on all tabs on the page and display it on another "progress bar" • ………… Business story
- 39. Components out of the box • @observable • @computed • @action • autorun • reaction • transaction • untracked
- 43. 43 • Setting values from the form on the first tab should be changed count and types of fields on the last tab • ………… Business story
- 46. Components out of the box • @observable • @computed • @action • autorun • reaction • transaction • untracked
- 49. Reaction • computed(expression).observe(action(sideEffect)) • autorun(() => action(sideEffect)(expression)) Equivalent of reaction
- 50. 50 • Optimization of network resources • ………… Business story
- 53. Asynchrony • The action wrapper / decorator only affects the currently running function, not functions that are scheduled (but not invoked) by the current function! • This means that if you have a setTimeout, promise.then or async construction, and in that callback some more state is changed, those callbacks should be wrapped in action as well!
- 55. 1. Add action to a promise “then” function 2. The runInAction utility 3. async / await 4. flows Writing asynchronous actions
- 60. Own Solution FormBuilder Configuration File Components for integration with markup External onChanged Callbacks
- 61. Configuration File Described initial information for initialization each of controls • Name • Transformers (onChange onBlur, onFocus) • Validators (sync, async) • Control • isDisabled • isHidden • isTouched • Error state
- 62. FormBuilder Map (MobX) Flow (MobX) @computed for validation status @autorun
- 63. MobX State Tree
- 64. • Models • Views • Actions MobX State Tree Features • Asynchrony • Snapshots • Patches • Composing trees
- 65. Pros and cons • Writing the flexible solution for the project needs • Experience with MobX • MobX gives a good performance out of the box • MobX work fine with SSR • Computed value from computed values can be organized simply • A lot of useful features for developing • Happy customer J • Time for creation “framework” for out forms (creation of a bicycle) • “Magic” inside • Need to investigation how works some features
- 66. Conclusion • MobX can be successfully used for developing SPA applications with strong requirements for performance and huge forms. • Interaction beside forms and controls can be simply organized • Documentation, community and support are great • Simple start
- 67. Q&A
- 68. • Mobx — управление состоянием вашего приложения • Как работает MobX изнутри и сравнение его с redux • https://github.com/mobxjs/mobx • https://github.com/mobxjs/mobx-react • https://github.com/mobxjs/mobx-state-tree • https://github.com/mobxjs/mobx-utils • https://github.com/mobxjs/mobx-react-devtools Useful links
- 69. www.griddynamics.com Thank you for your time! 69