Max Gallo - You don't know MobX State Tree - Codemotion Milan 2018
•
1 like•1,265 views
MobX State Tree is a simple and powerful solution to manage your application state in the Front End, based on MobX. You probably heard about it and maybe you tested it out with an “hello world” project, but... are you using it in production? Reactive Architecture, Model Composition, Mutability and Immutability are just a small subset of all the features that I’m going to walk you through. Join me to find out why MobX State Tree could be your next best friend!
Recommended
Recommended
More Related Content
Similar to Max Gallo - You don't know MobX State Tree - Codemotion Milan 2018
Similar to Max Gallo - You don't know MobX State Tree - Codemotion Milan 2018 (20)
More from Codemotion
More from Codemotion (20)
Recently uploaded
Recently uploaded (20)
Max Gallo - You don't know MobX State Tree - Codemotion Milan 2018
- 1. You Don't know MobX State TreeMilan | 29-30 November 2018 Max Gallo | @_maxgallo
- 2. Hi ! I'm Max Gallo About me: ! " # $ % & ✈ ✍ Principal Engineer @ DAZN twitter: @_maxgallo more: maxgallo.io
- 3. Agenda» Part One: MobX » Part Two: MobX State Tree » Part Three: Designing a Reactive Project
- 4. PartOne MobX
- 5. MobX» State Management Library » Helps decoupling View from Business Logic » Reactive Programming » Flexible / Unopinionated
- 6. MobX Observables&reactions import { observable, autorun} from 'mobx'; const album = observable({ title: 'Californication', playCount: 0, }); autorun(() => console.log(`New play count: ${album.playCount}`)) // New play count: 0 album.playCount = 1; // New play count: 1 album.playCount = 24; // New play count: 24
- 7. MobX ComputedValues import { observable, autorun, computed} from 'mobx'; const album = observable({ title: 'Californication', playCount: 0, }); const all = computed(() => album.title + album.playCount); autorun(() => console.log(all)) // Californication0 album.playCount = 1; // Californication1 album.title = 'OkComputer'; // OkComputer1 album.playCount = 24; // OkComputer24
- 8. MobX RecapObservable state Mutable Application State Computed Values Automatically derived values, lazily evaluated Reactions Side effects like autorun or updating a React component
- 9. MobX ❤ React const album = observable({ title: 'Californication', playCount: 0, }); @observable class PlayCount extends React.Component { render() { return album.playCount; } } album.playCount++ // ----> React Render album.playCount = 9 // ----> React Render
- 12. MobX State Tree » Powered by MobX » Runtime typed Application State » Opinionated & ready to use » Relies on the concept of Trees (Stores)
- 13. What'saTree/Store ? import { types } from 'mobx-state-tree'; const AlbumStore = types .model('Album', { // mobx observable title: types.string, rating: types.integer, }) .views(self => ({ get isGood() { // mobx computed return self.rating >= 7 } })); const okComputer = AlbumStore.create( { title: 'Ok Computer', rating: 8} ); console.log(okComputer.isGood); // true
- 14. MobX StateTree Stores Model » Mutable observable state » Runtime type information » Could contain other trees Views MobX computed values Actions The only way to update the model
- 15. MobX StateTree Stores DeepDive» Mutable and Immutable (Snapshots, Time Travelling) » Composition » Lifecycle Methods » Dependency Injection
- 16. MobX StateTree Stores Dependency Injection » Inject anything » Environment is shared per tree » Useful for testing
- 17. MobX StateTree Howto connect the Stores withtheView?
- 20. DesigningStores 1. Shape your Trees One Root Store vs Multiple Root Stores 2. Stores Communication How Stores communicate between each other
- 21. Root Store Navigation Store Library Store Language Store Album Store <Provider /> Shape your trees One Root Store Pros ! » Easier to perform actions on everything at once (snapshot, creation, destroy). » Unique environment for dependency injection. Cons ! Very easy to create tightly coupled stores
- 22. Navigation Store Library Store Language Store Album Store <Provider /> Shape your trees Multiple Root Stores Pros ! Easier to reason by Domain Cons ! » Less immediate to perform actions on everything » Not single environment for dependency injection
- 23. Real World Stores communication 1.Default Approach 2.Actions Wrapper 3.Dependency Injection
- 24. Root Store Library Store Language Store Album Store Stores Communication DefaultApproach » Easier when using a Single Root Store » Each Store could end up knowing the whole structure ⚠
- 25. Root Store Library Store Language Store Album Store Stores Communication DefaultApproach getParent().getParent().languageStore » Easier when using a Single Root Store » Each Store could end up knowing the whole structure ⚠
- 26. Login Auth Store Page Store Navig. Store Actions Store Stores Communication ActionsWrapper One Store, to rule them all » Calls directly other Stores » Friendly interface » Knows a lot about your App
- 27. Login Auth Store Page Store Navig. Store Actions Store Stores Communication ActionsWrapper One Store, to rule them all » Calls directly other Stores » Friendly interface » Knows a lot about your App
- 28. Login Auth Store Page Store Navig. Store Actions Store Home Stores Communication ActionsWrapper One Store, to rule them all » Calls directly other Stores » Friendly interface » Knows a lot about your App
- 29. Login Auth Store Page Store Navig. Store Actions Store HomeLogout Stores Communication ActionsWrapper One Store, to rule them all » Calls directly other Stores » Friendly interface » Knows a lot about your App
- 30. Stores Communication DependencyInjection Injecting one or multiple stores into another one. » You could use it for both Actions and Views » Circular dependencies while loading could be non- trivial
- 32. Rectangle Store Blue Store Text Blue Rectangle Store Store Composition const BlueRectangleStore = types.compose( BlueStore, RectangleStore );
- 37. Takeaways » Use MobX to learn Reactive Programming » MobX State Tree provides a structure » Shape your tree & setup the communication » Embrace Composition, embrace Reactivity!