The Model-View-View-Model (MVVM) pattern helps to cleanly separate the business and presentation logic of an application from its user interface (UI). Maintaining a clean separation between application logic and the UI helps to address numerous development issues and can make an application easier to test, maintain, and evolve. It can also greatly improve code re-use opportunities and allows developers and UI designers to more easily collaborate when developing their respective parts of an app.
We will organize our source code based on the following folders for easy management.
- Fonts – Customized fonts
- Model – Data structure classes. Mainly structure classes for holding JSON objects from APIs.
- Data – Data structure classes. Static singleton data objects. Such as user_data.
- Services – Interfaces and implementation for dependency injection of services functions to view models. Such as navigation services which allows view models to navigate to other pages. Static class tools such as random string generator can be in this folder.
- Views – Consist of all the UI Pages (View – XAML and CS) and its MVVM binding view model (CS).
Our web platforms were developed using ReactJS. ReactJS solved the issue of complex HTML coding and makes it easier. It provides less coding and gives more functionality. ReactJS supports multiple components, and each component has its own logic and controls. These components are responsible for outputting a small, reusable piece of HTML code which can be reused. The reusable code helps to make development and code maintenance easier.
We will organize the source code according to the following structure:
- Pages – Main component will be returned by the Route
- Components – independent and reusable UI components
- Styles – styling files by component in SCSS format
- Assets – Local media, e.g. images
- Utils – reusable custom functions, e.g. data formatter and validation