https://github.com/gaplo917/mobx-react-mvvm-example
Crypto-currency price feed application with React MVVM architecture powered by MobX.
https://github.com/gaplo917/mobx-react-mvvm-example
example mobx mobx-react mvvm price-feed react websocket
Last synced: 2 days ago
JSON representation
Crypto-currency price feed application with React MVVM architecture powered by MobX.
- Host: GitHub
- URL: https://github.com/gaplo917/mobx-react-mvvm-example
- Owner: gaplo917
- Created: 2019-02-19T03:32:25.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-04-08T12:08:18.000Z (about 6 years ago)
- Last Synced: 2025-02-25T06:42:59.510Z (4 months ago)
- Topics: example, mobx, mobx-react, mvvm, price-feed, react, websocket
- Language: JavaScript
- Homepage: https://gaplo917.github.io/mobx-react-mvvm-example
- Size: 614 KB
- Stars: 63
- Watchers: 3
- Forks: 8
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Introduction
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)
### Objective:
* 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.
* If you are using typescript, you can **SAFELY** compose the VM with a lot of programming skills(Mixins/Traits/Inheritance) heavily used in
other language to reduce boilerplate drastically. Typescript compiler can really protect your code base. *(Probably this will become the
strongest reason to choose typescript over plain javascript)*
# Run/Edit in CodeSandbox
Live On GitHub Page: https://gaplo917.github.io/mobx-react-mvvm-example
| Language | CodeSandbox |
| --- | --- |
| Javascript + React Hooks | [](https://codesandbox.io/s/github/gaplo917/mobx-react-mvvm-example/tree/master/) |
| Javascript + Standard Class Component | [](https://codesandbox.io/s/github/gaplo917/mobx-react-mvvm-example/tree/javascript/mobx-react) |
| Javascript + Standard Class Component + [Optional Chaining](https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining) | [](https://codesandbox.io/s/github/gaplo917/mobx-react-mvvm-example/tree/javascript/optional-chaining/) |
| Typescript + Standard Class Component | [](https://codesandbox.io/s/github/gaplo917/mobx-react-mvvm-example/tree/typescript/) |
# Run in local
```
yarn install
yarn start
// go to http://localhost:8080
```