When we started a green field project at Mendix, almost a year ago, i started with the question: how should the code look that we want to write. Because we knew our problem domain particularly well; hundreds of different domain object to be edited by hundreds of different editors. Knowing that we would have a lot of back and forth on the components. So we wrote pseudo code like:
class ProfileView {
render() {
return <span>{this.user.displayName} ({this.user.organization.name})</span>
}
}
We didn't want to be bothered how things like displayName or even deep references like organization.name and would be kept in sync with the state. So from there on I started thinking how we could achieve the above. We figured that components need to detect themselves what data they use to be able to subscribe to it. That leaded to the whole observe and MobX thing. I think in the end we came pretty close to the above pseudo code :)