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: 4 months 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 (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-04-08T12:08:18.000Z (almost 6 years ago)
• Last Synced: 2024-10-04T11:56:31.122Z (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: 64
• 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 | [![Edit mobx-react-price-feed-mvvm-example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/gaplo917/mobx-react-mvvm-example/tree/master/) |

| Javascript + Standard Class Component | [![Edit mobx-react-price-feed-mvvm-example](https://codesandbox.io/static/img/play-codesandbox.svg)](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) | [![Edit mobx-react-price-feed-mvvm-example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/gaplo917/mobx-react-mvvm-example/tree/javascript/optional-chaining/) |

| Typescript + Standard Class Component | [![Edit mobx-react-price-feed-mvvm-example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/gaplo917/mobx-react-mvvm-example/tree/typescript/) |

# Run in local

```

yarn install

yarn start

// go to http://localhost:8080

```