Hack Frontend Community

MVC (Model-View-Controller) and MVP (Model-View-Presenter) Design Patterns

MVC (Model-View-Controller) and MVP (Model-View-Presenter) are architectural patterns that help organize code in large applications. They separate application logic into separate components, making it more understandable, maintainable and testable.

MVC (Model - View - Controller)

Model-View-Controller is one of most popular patterns. It divides application into three layers:

Model

  • Responsible for data and business logic.
  • Receives and processes data (e.g., from API or database).

View

  • Responsible for displaying data to user.
  • Contains no logic except UI.

Controller

  • Connects View and Model.
  • Handles user actions and updates model or view.

Data Flow Example: User ➜ ViewControllerModelControllerView

MVC Features:

  • View can request data directly from model.
  • Controller "reacts" to user actions.

MVP (Model - View - Presenter)

Model-View-Presenter is evolution of MVC that facilitates testing and stronger isolates View.

Model

  • Same as in MVC — manages data and business logic.

View

  • Responsible only for display and has minimal logic.
  • Knows nothing about model.

Presenter

  • Manages logic between View and Model.
  • Gets data from Model itself and passes it to View.
  • View and Presenter are connected via interfaces, simplifying testing Presenter without UI.

Data Flow Example: User ➜ ViewPresenterModelPresenterView


MVC vs MVP Comparison

CharacteristicMVCMVP
Who manages logic?ControllerPresenter
View knows about Model?May knowNo
Model knows about View?NoNo
TestabilityMediumHigh
Where usedWeb frameworks, backendAndroid, desktop, complex UI

When to Use

ScenarioApproach
Simple application with minimal logicMVC
Large application requiring modularity and testabilityMVP
Android development or limited UIMVP
React / Vue / AngularOften uses MVVM or FSD, but principles are similar

Useful to Know:

In modern frontend variations of these patterns are more often used: MVVM, Redux, Flux and Feature-Sliced Design (FSD) architecture.