MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming (TFRP). React and MobX together are a powerful combination. React renders the application state by providing mechanisms to translate it into a tree of renderable components. MobX provides the mechanism to store and update the application state that React then uses.
Michel, the author of MobX, is hosting this AMA to answer any questions you may have.
Hosted by:
How much time do you spend working on MobX everyday? Is there a team (inside Mendix) working on this?
Nice work Michel! If someone wants to contribute to MobX project, how should they go about it?
You mentioned MobX 2.2 action decorator. Do you plan to have any method that will enable to "implement" actions outside of obervable as well?
I created an experimental model/wrapper around mobx and I am curious if I could use that feature as well (https://github.com/pvasek/mobx-app-model).
I struggle with React-Router and its nested routes concept. That's why I put visibility logic of dump components into smart components. URLs can contain some app state too. To me, it's difficult to maintain state in Routes and Stores.
On MobX docu router is only mentioned but never shown.
What do you think about UI Routing? Is it time to move on and keep all the state where it belongs to, in a state machine/state manager like MobX/Redux?
I have the following questions :
Thanks for this AMA. :)
What is your preferred editor for writing React based apps?
How do you feel about ES6 proxies? Currently MobX uses getters/setters, but proxies could provide cleaner way of intercepting changes. Do you think in distant future MobX could in some major version start using proxies instead of getters/setters?
Are there any companies/projects apart from Mendix that are using MobX in production?
What tech stack do you work with? Isomorphic apps or Universal apps - which term do you prefer and why?
Is there any way to hookup to property which is not on the observable yet?
Something like this:
const store = observable({test1: null});
autorun(() => {
console.log(store.test2);
});
extendObservable(store, { test2: "aaa" });
How does MobX compare to Redux? What real world problems does MobX try to solve (that couldn't be solved by other solutions)?
MobX's perf and simplicity are very appealing. But - Views mutating state are a concern. Is there any way to prevent it? Either runtime or static analysis (eslint)
In apps with immutable state it's easy to implement undo by just switching to previous states. Would making state snapshots work at all in MobX somehow? Otherwise what would be a good way to implement undo functionality? Just preserve command list and apply/unapply them?
Are there any particular types of applications you would avoid writing using MobX?
Just curious about potential weak points as no solution is perfect. :)
What are MobX performance characteristics ? How bad does it degrade (if ever) as the number of observers increases, say, to a few hundreds ?
If you get hit by a bus, or lose interest in the project, will there be anyone who's active enough to keep the project going?
One of the core principles of Redux is that the state is read-only so that any updates to the state must occur in a simple function (reducer) that replaces the state rather than mutating it. This gives the organizational benefit of keeping all state management code in a concentrated place. Has this caused any drawbacks for understanding where and when the state might be updated since MobX allows for scattered mutations throughout an app? Is testing more difficult especially in complex applications that might be drawing data from multiple sources asynchronously? Also, would this account for extra ramp-up time for new members to the team? Thanks!
The Object.Observe spec was pulled from ECMAScript. Many people praised React/Redux as an escape from the Observable model. So generally, when people see "Observables", they tend to stray away, if not simply for the appearance of them falling out of popularity. How are MobX's Observables different? Why bring the observable model into the React ecosystem?
What sparked the initial revelation that "hey, if I could simply OBSERVE changes of this object..."?
Why is MobX called MobX, how did you come up with that name?
Michel Weststrate
JS / TS fanatic. Creator of MobX
Michel Weststrate
JS / TS fanatic. Creator of MobX
Michel Weststrate
JS / TS fanatic. Creator of MobX
Michel Weststrate
JS / TS fanatic. Creator of MobX
Michel Weststrate
JS / TS fanatic. Creator of MobX
Ha, every sentence a question :)
I think the freedom in organizing and managing state is both the strongest and weakest point of MobX.
Strongest because you can think about the structure and logic of your domain state completely independent of the rest of your app, and I believe you can achieve better decoupling of your state from the UI then with for example Redux.
It's also a weak point because MobX doesn't do anything to prevent your state structure to become a mess or scattering logic all over the place. I do believe domain logic should not be in components but MobX doesn't enforce it. Personally I work a lot with controller classes or model classes with instance methods.
MobX 2.2 partially addresses the mutations-from-anywhere issue by introducing actions: functions need to be decorated as actions before they are allowed to modify the state, so that you can clearly recognize them, and not modify state anywhere else.
Funny enough, I didn't hear anybody complain about not being able to trace where mutations came from. The simple reason for that is that derivations in MobX are always run synchronously (unlike similar frameworks!). So even if a derivation is triggered unexpectedly, you simply can find the causing mutation back in your stack.
Most people coming from Redux find working with asynchronous data is ridiculous easy in MobX. Testing asynchronous stuff is not significantly harder or easier then it is without MobX. You can for example use when(observable expression, effect) which is quite similar to a promise.
I think MobX is a lot easier to learn for new members than most other state management solutions. For two reasons, it allows you to use concepts developers many are familiar with, like references and classes. And secondly with MobX you can focus on a the logic around a small piece of domain model, without needing to know how it ties to the rest of the application, as the app should largely react to state changes automatically.
Muhammad Usman
I am a React developer we use the Redux as a store and Redux saga from async API operations and use Redux persist for local storage.
Now I want to switch to Mobx does, anybody can suggest me What is the alternative of the redux saga when I will use the Mobx and what is the alternative of Redux persist when I will use the Mobx Because I am very confused