As an iOS developer reaches a certain stage of development, there will be a bottleneck. The solution is to familiarize yourself with design patterns and the App architecture. The App architecture is similar to the scaffolding or foundation of a modern building. Once decided, all that remains is to build on the existing App.

What makes a good architecture: High cohesion, low coupling. Code sharing, easy to test, easy to use.

MVC

MVC, model-View-controller. It is apple’s official recommended App development architecture, and it is also the most classic architecture that most developers encounter first. Below is a diagram of Apple’s MVC architecture.

1. Division of labor summary

It divides the entire APP into three parts:

Model: Data layer, responsible for storing data and processing business logic;

View: View layer, responsible for data display and interaction;

Controller: The Controller layer, the mediator, coordinates the Model and View Controller layers. It transfers data from the Model layer to the Vie layer and displays it, while transferring the View layer’s interactions to the Model layer to change the data.

Compared to traditional MVC, apple’s MVC is characterized by the fact that the Model layer and View layer are independent of each other.

2. Communication rules

As follows:

  1. Controller can access Model and View, Model and View can’t access each other

  2. When the view interacts with the user, events are handled in target-action mode

  3. When the View needs to handle some special UI logic or get a data source, it is handed over to the Controller as a delegate or data source, and the Controller changes the Model layer to change the data.

  4. The Model cannot communicate directly with the Controller. When the Model has data updates, it can notify the Controller to update its View via Notification or KVO

Because Controller is a relatively heavy task, in practice, many junior developers simply cram the View and Controller parts of the ViewController class, resulting in a high degree of coupling. Decoupling views and Controllers is a hot topic in iOS development.

3. The advantages

The MVC architecture has two advantages.

  1. Low code total. Basically, a lot of MVC logic and View code is concentrated in the ViewController, View and Model are strictly separated, code allocation follows certain rules.
  2. Easy to understand. For MVC, newcomers can get up to speed quickly, modify and add new features without obvious barriers, and even inexperienced developers can maintain them well.

Advantages of 4.

The disadvantages of MVC architecture are mainly caused by the high coupling between view layer and controller layer, and the negative impacts are mainly as follows:

  1. Code is too centralized.Because the two parts are highly coupled, the ViewController handles interaction, view update layout, Model data retrieval and modification, navigation, and almost everything else.
  2. Difficult to test.Due to high coupling, unit tests that focus on detection functions need to be carried out in conjunction with specific views, making testing difficult dramatically. So, in MVC, developers typically only test the Model.
  3. Difficult to scale.Adding new functionality to a ViewController requires extreme care. The highly coupled logic structure increases the risk of errors, and since the View and Controller are partially dependent on each other, adding new functionality may require significant changes to the existing code. It also makes the ViewController more cumbersome.
  4. The Model layer is too simple.In contrast to the ViewController’s huge code, the Model layer just defines a few properties and there’s very little code in the Objective-C.m implementation file.
  5. Network request logic cannot be placed.The network layer is placed in the Model, and its asynchronous call API requests complicate the whole Model layer. The coupling is further intensified when the network layer is placed in the ViewController, and the above disadvantages are magnified.

MVP

The schematic diagram is as follows

1. Division of labor summary

Summary of labor division:

  1. View: User interface
  2. Model: Data store
  3. Presenter: Data processing, business logic.

2. Communication rules

The communication rules are as follows:

  1. The view holds and sends the interaction to the Presenter.
  2. Presenter holds and updates Model, Presenter weakly holds view, updates view.

The Presenter holds and updates the Model as a bridge between the View and the Model. It modifies the Model based on the View’s interactions or changes to the Model.

View and Presenter are completely decoupled from each other. They interact with each other through their interfaces. A View and Presenter are one-to-one, meaning that each Presenter maps to only one View, and they can interact in both directions.

3. The advantages

MVP advantages

  1. Compared with MVC, coupling degree is greatly reduced, model and view are completely separated, code allocation is more reasonable, we can modify the view without affecting the model.
  2. If we put our logic in Presenter, we can test it out of the user interface (unit testing), making it easier to debug and less difficult to understand and learn the architecture as a whole.
  3. We can use a Presenter for multiple views without changing the Presenter’s logic, which is very useful because views change more often than models. Or split Presenter further.

4. The drawback

MVP shortcomings

All of the view’s interactions are passed to the Presenter, so once the functionality is added, both the view code and the Presenter code will be added, and the total amount of code for the MVP will probably double as much as if MVC were handled directly in a ViewController file. In this way, App maintenance costs and files will increase.

Essence: Target requirements drive code

  1. What kind of interface to write

  2. Who becomes the agent

  3. Who implements the proxy

MVVM

On the basis of MVC, separate the logic of business processing into the ViewModel layer, i.e

1. Division of labor summary

Summary of division of labor: Model: The Model layer, request the original data, data persistence

V: View layer, controlled by ViewController

VM: The ViewModel layer, responsible for network requests, business processing, and data transformation.

Viewmodels typically play two important roles:

  1. The real data provider for the view layer. The data presented in the general view layer is often a malleable combination of one or more models. For example, in microblog data flow interface, a microblog user model may have firstName, lastName, Status, post and other attributes, and the ViewModel will integrate these data together so that the view can directly call a single data to display the desired effect.Simply put, a ViewModel is a wrapper around model-layer data for view presentation.
  2. Interactive responder for the view layer. All user interactions are passed to the ViewModel. The ViewModel updates the properties required by the view layer in turn, and modifies the model-layer data accordingly. I’m relying onProperty observation or response architecture.

2. Communication rules

The communication rules are as follows:

  1. The View holds the ViewModel.
  2. ViewModel holds and updates the Model.

The ViewModel and View are bound in both directions, and when one changes, the other changes.

3. The advantages

Advantages:

Compared to MVP, which has double the code volume, MVVM relies on reactive code reduction.

4. The drawback

Disadvantages:

The need to introduce a third-party responsive framework is particularly painful to Debug because of the interlocking property observations and large call stacks.

1. MVVM View and ViewModel and model

The View holds the viewModel, which provides the view with data. The viewModel holds the mode, the Model stores the raw data, and the viewModel stores the data that the View can use directly, and the View and viewModel realize bidirectional binding.

In simple terms, the API requests the data, parses it into a Model, and then converts it into data that can be directly used by the view layer and delivered to the front end.

After the ViewModel transformation, the data is stored by the ViewModel, and all data-related processing is processed in the ViewModel, which is returned to the View layer.

View layer by the ViewController control, View layer only do display, do not do business, View layer data provided by the ViewModel.

In MVVM, we tend to treat the View and the ViewController as a whole, and the new ViewModel replaces the old ViewController to coordinate the interaction between the View and the Model.

This is handled using ReactiveCocoa, which monitors changes to the data model model and maps the changes to the properties of the viewModel, performing any necessary business logic.

2. How to implement MVVM without RAC
  • KVO is used to achieve bidirectional binding

VIPER

1. Division of labor summary

Summary of labor division: VIPER is composed of 5 parts:

  1. View, view layer, similar to MVP or MVVM view layer. It contains everything related to the UI. It receives the user’s interaction information but does not process it, but passes it on to the presentation layer.
  2. InteractorThe data management layer is responsible for processing data source information, including network requests, data transmission, caching, storage, instance generation and other operations. In fact, some of the logic of the previous middle tier and model tier has been further stripped away and the logic of the entire architecture has become clearer.
  3. PresenterThe presentation layer is similar to MVP’s Presenter or MVVM’s ViewModel. Whether Presenter, which is more mVVM-like, or VicwModel, depends on whether a responsive programming framework is introduced. Presenter only responds to and processes interaction requests from the view layer and does not directly modify the data source, which is a major difference from the MVX middle layer. / To modify data, the presentation layer sends a request to its own data layer (Interactor), which handles all operations related to the data source. In addition, it connects to the Router layer.
  4. EntityThe Model layer, which only has initialization methods and attribute dependent set/ GET methods, is much the same as the previous Model layer.
  5. Router, routing layer, which is responsible for interface jump and switch between components. If the App occupies a small space, the Router redirects the page. When the App occupies a large space, different functions and services will be divided into different modules or components. The Router is used to connect different components. This is what the MVX architecture ignores.

2. Communication rules

Communication rules:

  1. The view holds and sends the interaction to the Presenter.
  2. Prsenter holds and requires Interactor to update the model.
  3. Interactor knows about the Entity model.

3. The advantages

Advantages:

Due to the clear division of labor, VIPER layer ranks first among all architectures in terms of code allocation and test coverage.

4. The drawback

Disadvantages:

And the downside of VIPER is,

  1. It is still a view-driven architecture, like the MVX architecture.
  2. Due to the fine division of labor, VIPER has a large amount of code interacting with different levels, which is not suitable for small apps.