Model–view–controller explained

Model–view–controller (MVC) is a software design pattern[1] commonly used for developing user interfaces that divides the related program logic into three interconnected elements. These elements are:

Traditionally used for desktop graphical user interfaces (GUIs), this pattern became popular for designing web applications.[4] Popular programming languages have MVC frameworks that facilitate the implementation of the pattern.

__TOC__

History

One of the seminal insights in the early development of graphical user interfaces, MVC became one of the first approaches to describe and implement software constructs in terms of their responsibilities.[5]

Trygve Reenskaug created MVC while working on Smalltalk-79 as a visiting scientist at the Xerox Palo Alto Research Center (PARC) in the late 1970s.[6] [7] [8] He wanted a pattern that could be used to structure any program where users interact with a large, convoluted data set. His design initially had four parts: Model, view, thing, and editor. After discussing it with the other Smalltalk developers, he and the rest of the group settled on model, view, and controller instead.

In their final design, a model represents some part of the program purely and intuitively. A view is a visual representation of a model, retrieving data from the model to display to the user and passing requests back and forth between the user and the model. A controller is an organizational part of the user interface that lays out and coordinates multiple Views on the screen, and which receives user input and sends the appropriate messages to its underlying Views. This design also includes an Editor as a specialized kind of controller used to modify a particular view, and which is created through that view.

Smalltalk-80 supports a version of MVC that evolved from this one. It provides abstract view and controller classes as well as various concrete subclasses of each that represent different generic widgets. In this scheme, a View represents some way of displaying information to the user, and a controller represents some way for the user to interact with a view. A view is also coupled to a model object, but the structure of that object is left up to the application programmer. The Smalltalk-80 environment also includes an "MVC Inspector", a development tool for viewing the structure of a given model, view, and controller side-by-side.[9]

In 1988, an article in The Journal of Object Technology (JOT) by two ex-PARC employees presented MVC as a general "programming paradigm and methodology" for Smalltalk-80 developers. However, their scheme differed from both Reenskaug et al.'s and that presented by the Smalltalk-80 reference books. They defined a view as covering any graphical concern, with a controller being a more abstract, generally invisible object that receives user input and interacts with one or many views and only one model.[10]

The MVC pattern subsequently evolved,[11] giving rise to variants such as hierarchical model–view–controller (HMVC), model–view–adapter (MVA), model–view–presenter (MVP), model–view–viewmodel (MVVM), and others that adapted MVC to different contexts.

The use of the MVC pattern in web applications grew after the introduction of NeXT's WebObjects in 1996, which was originally written in Objective-C (that borrowed heavily from Smalltalk) and helped enforce MVC principles. Later, the MVC pattern became popular with Java developers when WebObjects was ported to Java. Later frameworks for Java, such as Spring (released in October 2002), continued the strong bond between Java and MVC.

In 2003, Martin Fowler published Patterns of Enterprise Application Architecture, which presented MVC as a pattern where an "input controller" receives a request, sends the appropriate messages to a model object, takes a response from the model object, and passes the response to the appropriate view for display. This is close to the approach taken by the Ruby on Rails web application framework (August 2004), which has the client send requests to the server via an in-browser view, these requests are handled by a controller on the server, and the controller communicates with the appropriate model objects.[12] The Django framework (July 2005, for Python) put forward a similar "model template view" (MTV) take on the pattern, in which a view retrieves data from models and passes it to templates for display.[13] Both Rails and Django debuted with a strong emphasis on rapid deployment, which increased MVC's popularity outside the traditional enterprise environment in which it has long been popular.

Components

Model

See also: Data model. The central component of the pattern. It is the application's dynamic data structure, independent of the user interface.[14] It directly manages the data, logic and rules of the application. In Smalltalk-80, the design of a model type is left entirely to the programmer.[15] With WebObjects, Rails, and Django, a model type typically represents a table in the application's database.[16] [17] [18] The model is essential for keeping the data organized and consistent. It ensures that the application's data behaves according to the defined rules and logic.

View

Any representation of information such as a chart, diagram or table. Multiple views of the same information are possible, such as a bar chart for management and a tabular view for accountants.

In Smalltalk-80, a view is just a visual representation of a model, and does not handle user input.[19] With WebObjects, a view represents a complete user interface element such as a menu or button, and does receive input from the user.[20] In both Smalltalk-80 and WebObjects, however, views are meant to be general-purpose and composable.[21] [22]

With Rails and Django, the role of the view is played by HTML templates, so in their scheme a view specifies an in-browser user interface rather than representing a user interface widget directly.[23] [24] (Django opts to call this kind of object a "template" in light of this.[25]) This approach puts relatively less emphasis on small, composable views; a typical Rails view has a one-to-one relationship with a controller action.[26]

Smalltalk-80 views communicate with both a model and a controller,[27] whereas with WebObjects, a view talks only to a controller, which then talks to a model.[28] With Rails and Django, a view/template is used by a controller/view when preparing a response to the client.[29] [30]

Controller

Accepts input and converts it to commands for the model or view.[31]

A Smalltalk-80 controller handles user input events, such as button presses or mouse movement.[32] At any given time, each controller has one associated view and model, although one model object may hear from many different controllers. Only one controller, the "active" controller, receives user input at any given time; a global window manager object is responsible for setting the current active controller. If user input prompts a change in a model, the controller will signal the model to change, but the model is then responsible for telling its views to update.[33]

In WebObjects, the views handle user input, and the controller mediates between the views and the models. There may be only one controller per application, or one controller per window. Much of the application-specific logic is found in the controller.[34]

In Rails, requests arriving at the on-server application from the client are sent to a "router", which maps the request to a specific method of a specific controller. Within that method, the controller interacts with the request data and any relevant model objects and prepares a response using a view. Conventionally, each view has an associated controller; for example, if the application had a client view, it would typically have an associated Clients controller as well. However, developers are free to make other kinds of controllers if they wish.[35]

Django calls the object playing this role a "view" instead of a controller. A Django view is a function that receives a web request and returns a web response. It may use templates to create the response.[36]

Interactions

In addition to dividing the application into a model, a view and a controller component, the MVC design pattern defines the interactions between these three components :[37]

As with other software patterns, MVC expresses the "core of the solution" to a problem while allowing it to be adapted for each system.[38] Particular MVC designs can vary significantly from the traditional description here.[39]

Motivation

As Alan Kay wrote in 2003, the original motivation behind the MVC was to allow creation of a graphical interface for any object.[40] That was outlined in detail in Richard Pawson's book Naked Objects.

Trygve Reenskaug, originator of MVC at PARC, has written that "MVC was conceived as a general solution to the problem of users controlling a large and complex data set."

In their 1991 guide Inside Smalltalk, Carleton University computer science professors Wilf LaLonde and John Pugh described the advantages of Smalltalk-80-style MVC as:

Use in web applications

Although originally developed for desktop computing, MVC has been widely adopted as a design for World Wide Web applications in major programming languages. Several web frameworks have been created that enforce the pattern. These software frameworks vary in their interpretations, mainly in the way that the MVC responsibilities are divided between the client and server.[42] Early MVC frameworks took a thin client approach that placed almost the entire model, view and controller logic on the server. In this approach, the client sends hyperlink requests or form submissions to the controller and then receives a complete and updated web page (or other document) from the view; the model exists entirely on the server.[42] Later frameworks have allowed the MVC components to execute partly on the client, using Ajax to synchronize data.

Notes and References

  1. Web site: The Principles of Clean Architecture by Uncle Bob Martin. YouTube. 15 December 2015 .
  2. Web site: The DCI Architecture: A New Vision of Object-Oriented Programming . 3 August 2019 . More deeply, the framework exists to separate the representation of information from user interaction. . Trygve . Reenskaug . James O. . Coplien . 20 March 2009 . Artima Developer . https://web.archive.org/web/20090323032904/https://www.artima.com/articles/dci_vision.html . 23 March 2009 . dmy-all .
  3. Burbeck (1992): "... the user input, the modeling of the external world, and the visual feedback to the user are explicitly separated and handled by three types of object."
  4. News: What Are The Benefits of MVC?. Davis. Ian. Internet Alchemy. 2016-11-29.
  5. http://c2.com/cgi/wiki?ModelViewControllerHistory Model–View–Controller History
  6. http://heim.ifi.uio.no/~trygver/themes/mvc/mvc-index.html Notes and Historical documents
  7. "A note on DynaBook requirements", Trygve Reenskaug, 22 March 1979, SysReq.pdf.
  8. Book: Fowler, Martin . Martin Fowler (software engineer) . 2003 . Patterns of Enterprise Application Architecture . Pearson Education, Inc. . 0-321-12742-0.
  9. Book: Goldberg, Adele . Adele Goldberg (computer scientist) . Smalltalk-80: The Interactive Programming Environment . 1984 . Addison-Wesley . 0-201-11372-4.
  10. Glenn E.. Krasner. Stephen T.. Pope. A cookbook for using the model–view controller user interface paradigm in Smalltalk-80. SIGS Publications. Aug–Sep 1988. The Journal of Object Technology. 1. 3. 26–49. Also published as "A Description of the Model–View–Controller User Interface Paradigm in the Smalltalk-80 System" (Report), ParcPlace Systems; Retrieved 2012-06-05.
  11. http://martinfowler.com/eaaDev/uiArchs.html The evolution of MVC and other UI architectures
  12. Web site: Ruby on Rails Guides . March 19, 2022.
  13. Web site: Django FAQ: Django appears to be a MVC framework, but you call the Controller the "view", and the View the "template". How come you don't use the standard names? . March 19, 2022.
  14. Burbeck, Steve (1992) Applications Programming in Smalltalk-80:How to use Model–View–Controller (MVC)
  15. Book: LaLonde . Wilf R. . Pugh . John R. . 1991 . Inside Smalltalk . U.S.A. . Prentice-Hall Inc. . 0-13-467309-3 . 8 . The model can be any object without restriction..
  16. Book: . May 2001 . WebObjects System Overview . Cupertino, CA . Apple Computer, Inc. . 28 . In WebObjects, a model establishes and maintains a correspondence between an enterprise object class and data stored in a relational database..
  17. Web site: Active Record Basics . . . Rails Guides . October 27, 2022 . This will create a Product model, mapped to a products table at the database..
  18. Web site: Models . . . Django Documentation . October 27, 2022 . Generally, each model maps to a single database table..
  19. Book: LaLonde . Wilf R. . Pugh . John R. . 1991 . Inside Smalltalk . U.S.A. . Prentice-Hall Inc. . 0-13-467309-3 . 8 . The view is responsible for providing a visual representation of the object..
  20. Book: . May 2001 . WebObjects System Overview . Cupertino, CA . Apple Computer, Inc. . 28 . View objects represent things visible on the user interface (windows, for example, or buttons)..
  21. Book: LaLonde . Wilf R. . Pugh . John R. . 1991 . Inside Smalltalk . U.S.A. . Prentice-Hall Inc. . 0-13-467309-3 . 8 . [MVC] permits views to be used as parts for assembly into larger units; new kinds of views can be constructed using existing views as subviews..
  22. Book: . May 2001 . WebObjects System Overview . Cupertino, CA . Apple Computer, Inc. . 28 . View objects tend to be very reusable and so provide consistency between applications..
  23. Web site: Action View Overview. . . Rails Guides . October 27, 2022 . Action View templates are written using embedded Ruby in tags mingled with HTML..
  24. Web site: Templates . . . Django Documentation . October 27, 2022 . A template contains the static parts of the desired HTML output as well as some special syntax describing how dynamic content will be inserted..
  25. Web site: Django FAQ: Django appears to be a MVC framework, but you call the Controller the "view", and the View the "template". How come you don't use the standard names? . October 27, 2022.
  26. Web site: Action View Overview . . . Rails Guides . October 27, 2022 . Typically, the views share their name with the associated controller action....
  27. Book: LaLonde . Wilf R. . Pugh . John R. . 1991 . Inside Smalltalk . U.S.A. . Prentice-Hall Inc. . 0-13-467309-3 . 9 . ...the view knows explicitly about the model and the controller..
  28. Book: . May 2001 . WebObjects System Overview . Cupertino, CA . Apple Computer, Inc. . 28 . Acting as a mediator between Model objects and View objects in an application is a Controller object..
  29. Web site: Action View Overview . . . Rails Guides . October 27, 2022 . In Rails, web requests are handled by action controller and action view. Typically, action controller is concerned with communicating with the database and performing CRUD actions where necessary. Action View is then responsible for compiling the response..
  30. Web site: Django FAQ: Django appears to be a MVC framework, but you call the Controller the "view", and the View the "template". How come you don't use the standard names? . October 27, 2022 . In Django, a 'view' describes which data is presented, but a view normally delegates to a template, which describes how the data is presented..
  31. http://www.codeproject.com/Articles/25057/Simple-Example-of-MVC-Model-View-Controller-Design Simple Example of MVC (Model–View–Controller) Architectural Pattern for Abstraction
  32. Book: LaLonde . Wilf R. . Pugh . John R. . 1991 . Inside Smalltalk . U.S.A. . Prentice-Hall Inc. . 0-13-467309-3 . 8 . The controller is responsible for interfacing between the user and the model/view. It interprets keyboard characters along with mouse movements and clicking..
  33. Book: LaLonde . Wilf R. . Pugh . John R. . 1991 . Inside Smalltalk . U.S.A. . Prentice-Hall Inc. . 0-13-467309-3 . 11.
  34. Book: . May 2001 . WebObjects System Overview . Cupertino, CA . Apple Computer, Inc. . 28.
  35. Web site: Action View Overview . . . Rails Guides . October 27, 2022 . Typically, the views share their name with the associated controller action....
  36. Web site: Writing views . . . Django Documentation . October 27, 2022.
  37. Buschmann, Frank (1996) Pattern-Oriented Software Architecture.
  38. Gamma, Erich et al. (1994) Design Patterns
  39. Moore, Dana et al. (2007) Professional Rich Internet Applications: Ajax and Beyond: "Since the origin of MVC, there have been many interpretations of the pattern. The concept has been adapted and applied in very different ways to a wide variety of systems and architectures."
  40. Web site: is squeak really object oriented ? . Alan Kay . Squeak Foundation mailing list . 23 May 2003 . 26 October 2021 .
  41. Book: LaLonde . Wilf R. . Pugh . John R. . 1991 . Inside Smalltalk . 2 . U.S.A. . Prentice-Hall Inc. . 0-13-467309-3 . 8–9.
  42. Avraham. Leff. James T.. Rayfield. Web-Application Development Using the Model/View/Controller Design Pattern. September 2001. IEEE Enterprise Distributed Object Computing Conference. 118–127.