{"id":15642513,"url":"https://github.com/gaplo917/mobx-react-mvvm-example","last_synced_at":"2025-10-05T02:22:33.816Z","repository":{"id":49748193,"uuid":"171398925","full_name":"gaplo917/mobx-react-mvvm-example","owner":"gaplo917","description":"Crypto-currency price feed application with React MVVM architecture powered by MobX.","archived":false,"fork":false,"pushed_at":"2019-04-08T12:08:18.000Z","size":629,"stargazers_count":63,"open_issues_count":1,"forks_count":8,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-13T09:07:14.707Z","etag":null,"topics":["example","mobx","mobx-react","mvvm","price-feed","react","websocket"],"latest_commit_sha":null,"homepage":"https://gaplo917.github.io/mobx-react-mvvm-example","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gaplo917.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-02-19T03:32:25.000Z","updated_at":"2024-12-30T00:34:09.000Z","dependencies_parsed_at":"2022-09-24T04:52:00.501Z","dependency_job_id":null,"html_url":"https://github.com/gaplo917/mobx-react-mvvm-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gaplo917/mobx-react-mvvm-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaplo917%2Fmobx-react-mvvm-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaplo917%2Fmobx-react-mvvm-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaplo917%2Fmobx-react-mvvm-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaplo917%2Fmobx-react-mvvm-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gaplo917","download_url":"https://codeload.github.com/gaplo917/mobx-react-mvvm-example/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaplo917%2Fmobx-react-mvvm-example/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264495783,"owners_count":23617627,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["example","mobx","mobx-react","mvvm","price-feed","react","websocket"],"created_at":"2024-10-03T11:56:35.043Z","updated_at":"2025-10-05T02:22:28.784Z","avatar_url":"https://github.com/gaplo917.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Introduction \nReact MVVM architecture powered by MobX. \n\nThis example is a simple crypto-currency price feed application. It uses websocket price data as a source (provided by binance publicly)\n\n### Objective:\n* MobX is powerful but too free to use. A team should have a standard \u0026 flexible architecture/patterns \nthat works/scales from small to large use cases and yet simple to learn.\n* Encourage others to learn **reactive data stream** concept. (Highly recommended ReactiveX, i.e. RxJs, RxJava, RxSwift) \n* Utilizing functional programming to **compose \u0026 transform reactive data stream** to desired output or behaviour.\n\n### The Heart of MVVM\n* A ViewModel(VM) should have **NO** dependency of React and should have no idea what the view looks like.\n* A correct implementation of MVVM architecture should achieve 100% decoupled business logic / data flow from views.\n* A pure VM is much easier to test than a \"React components with state logic\".\n* VMs should be light \u0026 cheap and be easily re-implemented with the same interface that consumed by the view.\n* If you are using typescript, you can **SAFELY** compose the VM with a lot of programming skills(Mixins/Traits/Inheritance) heavily used in \nother language to reduce boilerplate drastically. Typescript compiler can really protect your code base. *(Probably this will become the \nstrongest reason to choose typescript over plain javascript)*\n\n# Run/Edit in CodeSandbox\n\nLive On GitHub Page: https://gaplo917.github.io/mobx-react-mvvm-example\n\n| Language | CodeSandbox |\n| --- | --- |\n| 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/) |\n| 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) |\n| 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/) |\n| 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/) |\n\n\n\n# Run in local\n```\nyarn install\nyarn start\n\n// go to http://localhost:8080\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgaplo917%2Fmobx-react-mvvm-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgaplo917%2Fmobx-react-mvvm-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgaplo917%2Fmobx-react-mvvm-example/lists"}