laptop

MV*-patterns in web application development

Complex application code written without MV* patterns is hard to test, reuse, and maintain. Patterns eliminate or weaken the connection between View, Model and Controller, separate code and simplify development. We will cover the types of MV*-patterns and their use in SimpleOne.

When developing a SimpleOne application, we carefully design the user interface (UI) and design the user experience (UX) to make it easy and convenient for our customers to use the platform. But the UI is only the tip of the iceberg as seen by the user (User). Behind the buttons and fields lies code that must be scalable, maintainable, and reliable. To solve these problems, developers use MV* patterns to separate UI code, logic and data processing.

UI without patterns

Let’s imagine an application that has a form with various elements and widgets. The code of this form contains both the description of logic and the code of UI elements, and it may also contain fragments for data processing. For a simple application, supporting this programming principle is not a problem. At any moment you can find interrelationships and make changes without breaking the integrity. When the application becomes more complex, supporting an interface written without patterns becomes a problem.

The problem arises due to violation of the single responsibility principle – “A class should have only one reason to change”. We have UI code (View), logic (Controller), and data processing (Model) in our interface, so there are several reasons for change. When we change the code of one component, we have to change other components as well. Thus, application support becomes more complicated, it is almost impossible to perform automated testing, and code reuse is very limited.

That’s why it’s convenient and correct to use patterns – they separate UI code (View), logic code (Presenter, Controller, ViewModel and others) and data processing code (Model). We can easily change the logic without changing the UI, or make changes only to the data processing routines. Each pattern can be tested independently of the others and further used in other applications.

The most commonly used patterns are Model-View-Controller, Model-View-Presenter, and Model-View-ViewModel.

Patterns are not rigid paradigms that must be followed to create a perfect code organization. They solve very important problems – weakening (eliminating) the links between View, Model and Controller and reducing the complexity of user interface development. Realization of such approach is possible if you understand the essence of interconnections and look for the possibility of their elimination in each specific project.