MVC, MVP, MVVM, MVVM-C, VIPER: one pattern wearing five outfits

Maneshwar, a developer working on LiveReview, a code review tool for critical systems, noticed that developers often debate the best architectural pattern for mobile apps. Some argue for MVC, others suggest MVVM, and some even propose VIPER. After exploring these options, Maneshwar realized that all five patterns are essentially the same, just dressed in different styles.

At their core, MVC, MVP, MVVM, MVVM-C, and VIPER all focus on three key components: the View, which is the user interface and renders pixels and captures user input; the Model, which holds the business logic and data; and a translator between the View and Model. This translator can take various forms, such as a Controller, Presenter, or View-Model, depending on the specific pattern being used.

MVC, one of the oldest patterns, separates the data and UI in a desktop app. The View communicates with the Model through a central Controller, which handles all the coordination. While this approach works for small apps, it can become unwieldy as the app grows.

MVP addresses the bloated-controller problem by separating UI logic into a dedicated Presenter. The View remains simple and focused on rendering, while the Presenter handles all interactions with the Model. This makes MVP easier to test, as the Presenter can be unit tested without a full UI.

MVVM takes this a step further by using two-way data binding between the View and a View-Model. The View simply binds to the View-Model's properties, and any changes to the Model are automatically reflected in the UI. This reduces boilerplate code, but can make debugging more challenging due to the complex chain of notifications.

MVVM-C, an extension of MVVM, introduces a Coordinator to manage navigation between screens. This helps keep the View-Model focused on its original purpose of data binding and business logic, while navigation responsibilities are handled separately.

Finally, VIPER takes the "one job, one file" philosophy to its extreme. Each component (View, Interactor, Presenter, Entity, and Router) has its own dedicated file, promoting separation of concerns. While this approach leads to a clean codebase, it can also result in more files and larger projects.

Ultimately, Maneshwar discovered that despite their differences in terminology and structure, these architectural patterns all boil down to the same fundamental principles. By understanding the core components of View, Model, and the translation layer, developers can choose the pattern that best fits their app's needs, rather than getting caught up in the debate over which specific pattern is "best."