{"id":15672833,"url":"https://github.com/raresail/cra-template-typescript-mvvm","last_synced_at":"2025-05-06T22:22:31.051Z","repository":{"id":42045036,"uuid":"333083283","full_name":"RaresAil/cra-template-typescript-mvvm","owner":"RaresAil","description":"This is the MVVM TypeScript template for Create React App.","archived":false,"fork":false,"pushed_at":"2022-04-15T20:46:54.000Z","size":197,"stargazers_count":13,"open_issues_count":0,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-02T21:51:26.390Z","etag":null,"topics":["mobx","mobx-react","mvvm","mvvm-architecture","mvvm-pattern","react","react-template","reactjs","template","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/cra-template-typescript-mvvm","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RaresAil.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null}},"created_at":"2021-01-26T12:49:07.000Z","updated_at":"2024-12-10T15:06:02.000Z","dependencies_parsed_at":"2022-08-12T03:11:10.866Z","dependency_job_id":null,"html_url":"https://github.com/RaresAil/cra-template-typescript-mvvm","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaresAil%2Fcra-template-typescript-mvvm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaresAil%2Fcra-template-typescript-mvvm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaresAil%2Fcra-template-typescript-mvvm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaresAil%2Fcra-template-typescript-mvvm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RaresAil","download_url":"https://codeload.github.com/RaresAil/cra-template-typescript-mvvm/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252777366,"owners_count":21802590,"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":["mobx","mobx-react","mvvm","mvvm-architecture","mvvm-pattern","react","react-template","reactjs","template","typescript"],"created_at":"2024-10-03T15:32:32.907Z","updated_at":"2025-05-06T22:22:31.013Z","avatar_url":"https://github.com/RaresAil.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React TypeScript MVVM\n\n![Build \u0026 Testing](https://github.com/RaresAil/cra-template-typescript-mvvm/workflows/Build%20\u0026%20Testing/badge.svg)\n![OSSAR](https://github.com/RaresAil/cra-template-typescript-mvvm/workflows/OSSAR/badge.svg)\n![CodeQL](https://github.com/RaresAil/cra-template-typescript-mvvm/workflows/CodeQL/badge.svg)\n\nThis is the MVVM TypeScript template for [Create React App](https://github.com/facebook/create-react-app).\n\nTo use this template, add `--template typescript-mvvm` when creating a new app.\n\nFor example:\n\n```sh\nnpx create-react-app my-app --template typescript-mvvm\n\n# or\n\nyarn create react-app my-app --template typescript-mvvm\n```\n\nFor more information, please refer to:\n\n- [Getting Started](https://create-react-app.dev/docs/getting-started) – How to create a new app.\n- [User Guide](https://create-react-app.dev) – How to develop apps bootstrapped with Create React App.\n\n# MVVM Pattern\n\nMVVM has four main blocks:\n\n- The View — UI layer that users interact with,\n- The ViewController —has access to the ViewModel and handles user input,\n- The ViewModel — has access to the Model and handles business logic,\n- The Model — application data source\n\n![pattern](docs/pattern.png)\n\n## View\n\nWith React we’re building user interfaces and this is what most of us are already familiar with. The View is the only touching point for a user with your application. A user will interact with your View that will trigger ViewController methods depending on events such as mouse movements, key presses etc. The View is not only used for a user input but also for displaying output — results of some actions.\nThe View is a dumb, presentational React.Component which means that it should be used only for displaying data and triggering events passed from the ViewController. This way, we’re keeping our components reusable and easy to test. **With the help of MobX, we’ll turn React.Componentinto reactive component that will observe any changes and automatically update itself accordingly.**\n\n![view](docs/p-view.png)\n\n## ViewController\n\nThe ViewController is a brain for the View — it has all View related logic and owns a reference to the ViewModel. The View is not aware of the ViewModel and it is relying on the ViewController to pass all necessary data and events.\nRelation between the ViewController and the ViewModel is one-to-many — one ViewController can have references to different ViewModels.\nHandling user input shouldn’t be left to the ViewModel but rather handled in the ViewController that will pass clean and prepared data to the ViewModel.\n\n![view](docs/p-vc.png)\n\n## ViewModel\n\nThe ViewModel is a producer who doesn’t care who consumes data; it can be React component, Vue component, aeroplane or even a cow, it simply doesn’t care. Because the ViewModel is just a regular JavaScript class it can be easily reused anywhere with UI tailored differently. Every dependency needed by the ViewModel will be injected through the constructor, thus making it easy to test. The ViewModel is interacting directly with the Model and whenever the ViewModel updates it, all changes will be automatically reflected back to the View.\n\n![view](docs/p-vm.png)\n\n## Model\n\nThe Model is acting as a data source ie. global store for the application. It composes all data from the network layer, databases, services and serve them in a easy way. It shouldn’t have any other logic except one that actually updates a model and doesn’t have any side effects.\n\n![view](docs/p-m.png)\n\n## Provider\n\nOne component that is not part of the MVVM but we’ll use it to glue everything together is called Provider. This component will instantiate ViewModel and provide all needed dependency to it. Furthermore, instance of the ViewModel is passed through props to the ViewController component.\nProvider should be clean, without any logic as its purpose is just to wire up everything.\n\n## Source\n\n- [Medium, COBE, Danijel Vincijanovic](https://medium.cobeisfresh.com/level-up-your-react-architecture-with-mvvm-a471979e3f21)\n\nAnd updated with the last version of Mobx and project structure.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraresail%2Fcra-template-typescript-mvvm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraresail%2Fcra-template-typescript-mvvm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraresail%2Fcra-template-typescript-mvvm/lists"}