React MVVM architecture powered by MobX.
This example is a simple crypto-currency price feed application. It uses websocket price data as a source (provided by binance publicly)
- MobX is powerful but too free to use. A team should have a standard & flexible architecture/patterns that works/scales from small to large use cases and yet simple to learn.
- Encourage others to learn reactive data stream concept. (Highly recommended ReactiveX, i.e. RxJs, RxJava, RxSwift)
- Utilizing functional programming to compose & transform reactive data stream to desired output or behaviour.
The Heart of MVVM
- A ViewModel(VM) should have NO dependency of React and should have no idea what the view looks like.
- A correct implementation of MVVM architecture should achieve 100% decoupled business logic / data flow from views.
- A pure VM is much easier to test than a "React components with state logic".
- VMs should be light & cheap and be easily re-implemented with the same interface that consumed by the view.
Run/Edit in CodeSandbox
Live On GitHub Page: https://gaplo917.github.io/mobx-react-mvvm-example
|Typescript + Standard Class Component|
Run in local
yarn install yarn start // go to http://localhost:8080