Introduction to the

MVVM consists of three layers:

  • Model

A model object that holds data, usually defined as a Struct with only data and no methods

  • View

Events used to render the UI (user interface) and respond to the user, typically ViewControllers and Views

  • ViewModel

Used to bridge Model and View layers. Prepare the Model to provide to the View to render the UI, and update the View layer’s user input data to the Model.

The MVVM architecture

The ViewModel,

The ViewModel is the core of the MVVM pattern. Its main task is to connect the View and Model layers, prepare data for the View layer, and respond to user events provided by the View layer. It also handles routing and sends user behavior data.

The ViewModel layer still has a lot of responsibility, so we further subdivide it into modules, including ViewModel, Routing, Tracking, Repository, Networking, and DataStore.

ViewModel

Act as a facilitator. The ViewModel notifies the View through responsive programming, and the View, through data binding, listens for changes in the ViewModel’s data and updates the UI.

Routing

Is the module responsible for routing and navigation. The ViewModel calls the Routing module in response to requests from the View to jump to a page. The Routing module will complete the specific Routing work.

Tracking

Module responsible for statistical analysis of data. Tracking module is called by the ViewModel in response to a View request (such as a button click event) to send data about the user’s actions (such as a click).

Repository

Is the unique data source layer that maintains the Model data used by the App. You can use Networking to access background data on the network or invoke DataStore to obtain locally cached data.

The ViewModel calls the Repository module to access (retrieve) the data. This is also reactive programming: a ViewModel makes a request to Repository, and then listens to Repository to get changes to the data.

Networking

The network layer is responsible for accessing the BFF and Decode the JSON data returned by the BFF into Model data.

The Repository and Networking interfaces are also responsive programming. Repository makes Networking requests and listens for Networking’s return.

DataStore

Is the data storage layer, used to cache data into the App. Allows users to quickly see the UI without having to wait for network requests. The Repository/DataStore interface is also reactive programming. Repository listens for data changes in the DataStore.