Model-View-Controller

About 2 min

Also known as

Intent

To separate an application into three interconnected components (Model, View, Controller), enabling modular development of each part independently, which enhances maintainability and scalability.

Explanation

Real-world example

Consider ICU room in hospital which displays the patients health information on device displays which are taking input from sensors connected to patient. Here, display's job is to display the data that it receives from the controller which in turn gets update from sensor model.

In plain words

MVC separates the business logic from user interface by mediating Controller between Model & View.

Wikipedia says

Model–view–controller (MVC) is commonly used for developing user interfaces that divide the related program logic into three interconnected elements. This is done to separate internal representations of information from the ways information is presented to and accepted from the user.

Programmatic Example

Consider following GiantModel model class that provides the health, fatigue & nourishment information.

@Getter
@Setter
@Builder
@AllArgsConstructor
@NoArgsConstructor
public class GiantModel {

  private Health health;
  private Fatigue fatigue;
  private Nourishment nourishment;


  @Override
  public String toString() {
    return String.format("The giant looks %s, %s and %s.", health, fatigue, nourishment);
  }
}

GiantView class to display received patient data.

public class GiantView {

  public void displayGiant(GiantModel giant) {
    LOGGER.info(giant.toString());
  }
}

And GiantController class that takes updates from GiantModel & sends to GiantView for display.

public class GiantController {

  private final GiantModel giant;
  private final GiantView view;

  public GiantController(GiantModel giant, GiantView view) {
    this.giant = giant;
    this.view = view;
  }

  @SuppressWarnings("UnusedReturnValue")
  public Health getHealth() {
    return giant.getHealth();
  }

  public void setHealth(Health health) {
    this.giant.setHealth(health);
  }

  @SuppressWarnings("UnusedReturnValue")
  public Fatigue getFatigue() {
    return giant.getFatigue();
  }

  public void setFatigue(Fatigue fatigue) {
    this.giant.setFatigue(fatigue);
  }

  @SuppressWarnings("UnusedReturnValue")
  public Nourishment getNourishment() {
    return giant.getNourishment();
  }

  public void setNourishment(Nourishment nourishment) {
    this.giant.setNourishment(nourishment);
  }

  public void updateView() {
    this.view.displayGiant(giant);
  }
}

Class diagram

Applicability

Used in web applications to separate data model, user interface, and user input processing.
Suitable for applications where a clear separation of concerns is required, ensuring that the business logic, user interface, and user input are loosely coupled and independently managed.

Tutorials

Known Uses

Frameworks like Spring MVC in Java for web applications.
Desktop applications in Java, such as those using Swing or JavaFX.

Consequences

Benefits:

Promotes organized code structure by separating concerns.
Facilitates parallel development of components.
Enhances testability due to decoupled nature.
Easier to manage and update individual parts without affecting others.

Trade-offs:

Increased complexity in initially setting up the architecture.
Can lead to excessive boilerplate if not implemented correctly or for very small projects.

Observeropen in new window: Often used in MVC where the view observes the model for changes; this is a fundamental relationship for updating the UI when the model state changes.
Strategyopen in new window: Controllers may use different strategies for handling user input, related through the ability to switch strategies for user input processing.
Compositeopen in new window: Views can be structured using the Composite Pattern to manage hierarchies of user interface components.