MVVM mode of mobile development architecture

The proposal and origin of the MVVM concept

MVVM is the abbreviation of Model-View-ViewModel. It was first proposed and used by Microsoft. It is a new architecture that evolved from the application method of combining MVP (Model-View-Presenter) mode with WPF.

MVVM concept explanation and key points

1. Basic Concepts

mvvm1.png

• Model: Mainly provides data for the application.
• View: It is the presentation layer in MVC and MVP, and implements the binding of UI elements and ViewModel properties.
• ViewModel: provides data support for View.

  From the perspective of fat and thin, the Model in MVVM is usually a fat Model, which has the definition of data attributes and the behavior of data access and processing. The ViewModel is usually a thin Model with only data attributes and generally contains a small amount of logic.

2. Basic points

1. View holds ViewModel: In View, UI elements and ViewModel properties are associated through binding, and the property changes of UI elements and the data properties of ViewModel have a two-way impact.
2. ViewModel holds Model: Model provides data support for ViewModel. At the same time, changes in ViewModel's data attributes will also affect Model, which is used for data submission, etc.
   The functional difference between Model and ViewModel is that ViewModel provides data support for View, and its structure is consistent with View. Model is derived from business processing and maintains the basic association and integrity of business data.
3. When the Model layer completes the query or calculation, the result is updated to the ViewModel layer. Because the ViewModel layer is bound to the View, the UI layer is notified of the update, which embodies the idea of ​​a data-driven interface.

3. Advantages

The MVVM pattern is the same as the MVC pattern. Its main purpose is to separate the view and the model. It has several advantages:

1. Low coupling. ViewMode isolates View and Model, making them independent of each other, and changes and modifications to one will not affect the other.
2. Reusability: One Model and ViewModel can serve many Views.
3. Independent development. Separate UI development work from business processing work, suitable for team work.
4. Testable. Interfaces have always been difficult to test, but now tests can be written for ViewModels.

Classic example of MVVM WPF

MVVM is not a new concept, and it is currently widely discussed due to its application in mobile development. To explain MVVM, whether from its origin, definition of the concept or its best application, it is impossible to leave WPF.

When MVVM and WPF are combined, in addition to meeting the basic MVVM architecture model, multi-mode data and event binding is supported during UI editing (Xaml) to achieve the connection between View and ViewModel, while the use of converters and triggers ensures its flexibility. Therefore, whether you want to have a deep understanding of MVVM or seek to build products in MVVM mode, it is recommended that you carefully study WPF-related development knowledge, which is a good reference.

Application of MVVM in mobile development

When using MVVM in mobile development, the view and viewcontroller (Android: file and activity) are officially linked together, and we regard them as a component. The view still cannot directly reference the model, and of course the controller cannot. Instead, they reference the view model.

MVVM.png

User input validation logic and view display logic processing are usually still placed in the ViewController, but the control of the view should be affected by the data attributes of the ViewModel as much as possible rather than directly operated. Processing such as initiating network requests and data storage can be placed in the Model, but there should not be any reference to the view itself. (Use #import UIKit.h in the model)

Presentation logic can be placed in the view model (e.g., mapping the model value to a formatted string), and the view controller itself will no longer be bloated. Apps using MVVM are highly testable; because the view model contains all presentation logic and does not reference the view, it can be fully tested programmatically.

In Android development, there are already frameworks like RoboBinding, which can complete the binding work with ViewModel in the layout file. In iOS, it is usually recommended to use MVVM in conjunction with ReactiveCocoa.

Goo framework: implementation of MVVM pattern for IOS

ReactiveCocoa is indeed very popular and highly praised as a responsive concept. From the perspective of learning architectural design ideas, I also like it. However, I am still reluctant to use it in product development. As the saying goes, there are many reasons to like something, but only one reason to dislike it. Reactive is different from traditional thinking and basic IOS development thinking, and the learning cost is something that every team is unwilling to accept.

What is Goo?

To sum it up in one sentence: Goo is the specific implementation of the MVVM pattern in iOS development. Using Goo for development will not change the existing development habits. In a development, you can consider whether to use Goo based on the convenience of the specific scenario. In short, Goo is small, flexible and easy to use.

For example

Goo.gif

As shown in the figure, Goo is displayed by implementing the following small functions.

1: Enter data in the TextField and the Label below will be displayed synchronously

2: Click the button on the left to change the data content, which will affect the displayed content of TextField and Label at the same time

3: Click the button on the right to change the data attribute, which will affect the different attributes of TextField and Label at the same time.

Next, let's look at the specific code implemented using Goo

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
_vm = [TrialDataVM using];
_vm.text = @"123";

[self.inputText bindingWithProperty:@"backgroundColor" withObject:_vm withDataSource:@"backgroundColor" withBindingMode:TwoWay];
[self.inputText bindingWithProperty:@"text" withObject:_vm withDataSource:@"text" withBindingMode:TwoWay];
[self.hineLbl bindingWithProperty:@"text" withObject:_vm withDataSource:@"text" withBindingMode:OneWay];
[self.hineLbl bindingWithProperty:@"textColor" withObject:_vm withDataSource:@"backgroundColor" withBindingMode:OneWay]; }


- (IBAction)clickAction:(id)sender {
    _vm.text = @"456";}
- (IBAction)otherAction:(id)sender {
    _vm.backgroundColor =[UIColor redColor];}

Don't be surprised! It's just a few lines of code.

The bindingWithProperty method is used to bind the control to the ViewModel. If you only change the ViewModel later, it will automatically affect the properties of the UI elements.

Goo is an open source framework for iOS developed by me based on the MVVM model. I will write a special article to introduce it later, and the code will also be shared on Github. I hope that friends who are interested will join in to continue to improve and promote it.