Difference between revisions of "W2707 Model View Controller"

From Coder Merlin
(Merging concepts into this page)
 
(4 intermediate revisions by 2 users not shown)
Line 1: Line 1:
==Overview==   
    The Model View Controller (also known as MVC) architecture is a method of organizing an application so that there is a distinction between the code that is responsible for the appearance of your application, the behavior of your application, and the content of your application. The structure is designed to where the inputs from applications work with the structure and content of an application but the structure and content of an application does not communicate or work together in an application.
[[File:Mvc-diagram.png|thumb]]
[[File:Mvc-diagram.png|thumb]]
==Background==
A '''software design pattern''' is a general, reusable solution to a commonly occurring problem in software design. It provides a template that can be used to solve similar problems in various situations. Design patterns can help speed development by providing tested and proven paradigms.
A paradigm is defined as a method used to solve a problem or complete a task. A programming paradigm is a paradigm that coders implement in programming language tools and techniques. Some examples of programming paradigms include Imperative, Declarative, and Model-View-Controller.
In the case of the Model-View-Controller (MVC) paradigm, you can use it to understand how code is managed in an application, how data is handled in the database, and how that data is visually represented via the communication between the two through a controller.
==Introduction==
The Model-View-Controller, or '''MVC''', is a popular way to organize code for apps and websites that have a user interface. The idea is that portions of the code are grouped into different objects that serve different functions. This makes it much easier for collaborators to understand the code's purpose and where future material should be added. These three objects are '''Model''', '''View''', and '''Controller'''.
==Description==
==Description==
    The Model of a program would be the data and the logic of the program. The controller is the ‘middle-man’ between the model and the view. The view is the appearance of the application, which is created after the controller has received the necessary data to display to the user.
The main idea of the MVC pattern is designating a unique purpose to different sections of your code. In brief, the Model can be thought of as the data. The View can be thought of as the user interface. The Controller can be thought of as an input reader that takes the user input and decides what to do with it. The MVC model can be seen as a cycle where everything contributes to another's task. Without one of them, the program would be incomplete.
    The View represents the data visually and contains the functions that enable users to interact with a user interface. An example of this would be when you are customizing your desktop’s wallpaper to make it visually appealing. An important fact of this component is that it only demonstrates visuals given to it as instructions from the controller. There is no data logic being analyzed by the View as that function will already occur in the Controller.
 
    The Controller is the brains of the program. The only interaction between the Model and the View is through the Controller. Any user input is given to the controller which it translates into a request for the model to process. The controller then takes the data from the model and passes it to the view to display.
===Model===
The Model is the collection of tasks that contain the functionality of a program. This section can be seen as the brains of the code because it contains all the data, logic, and rules of the application. For example, when the user clicks a button, the model does something in response to the input and sends the output to the controller.
 
[[File:Model-View-Controller architectural pattern.svg|thumb|Model-View-Controller architectural pattern (alternative view)]]
 
The interactions of the three MVC components are illustrated in the figure here.
===View===
The View contains the user interface. This section is primarily focused on the visuals that a user sees, such as the font or color on the screen. It also stores the functions that define the way users use the app are stored here. The user's information requests are transferred from the View to the Model by the Controller. For example, the look of a button. This component only displays visuals given to it as instructions from the controller. It does not analyze data logic because the Controller has already performed that function.
 
===Controller===
The Controller is the primary connection between the Model and View. Whereas the View focuses on presenting and taking information to and from the user, the Model manipulates the data, rules, and logic of the application. The Controller is the middleman that takes the input from the View and updates the Model. It accepts inputs and converts them into usable instructions for the Model or View. The Controller basically acts as a "conduit" or a connection between the View and the Model. It interprets the input from the View and sends data to the Model.
 
==Example==
==Example==
    One example of a Model View Controller that you might be familiar with is Super Mario Bros. A model is data used in a game, so the actual data that represents the character Mario would be the model in MVC. The view is the visuals in Super Mario Bros. From the background to the platforms and designs of characters, the view would be the visual aspects of the game. The controller handles the inputs, so anything from a Wii Remote to a Switch Controller could be examples of the controller that helps the user interact with the game and make Mario move. All of these work together in order to make all the aspects of Super Mario work efficiently.
{{MerlinNoteFromEditor|A subject matter expert should review whether the below is a good example, or if another might be more common or easier to follow.}}
==Paradigm==
One example of MVC that you might be familiar with is Super Mario Bros. The Model is the data used in the game, so the actual data that represents the character Mario is the Model in MVC. The View is the visuals in Super Mario Bros. From the background to the platforms and designs of characters, the View handles the visual aspects of the game. The Controller handles the inputs. So anything from a Wii Remote to a Switch Controller are examples of the Controller that helps the user interact with the game and make Mario move. These all work together to make all the aspects of Super Mario work efficiently.
    A paradigm is a model or pattern that can be used to represent a certain concept, Having a model to represent a universal concept allows a person to understand the inner-workings behind any application. In the case of the Model-View-Controller paradigm, you can use it to understand how code is managed in an application and how data is handled between the database, and how that data is visually represented via the communication between the two through a controller. These applications can range from being a website to a video game like Super Mario Bros to websites like YouTube. Overall, a paradigm sets the standards for an accepted idea (in this case, MVC).
 
==Usages==
MVC is commonly used to design Web applications and mobile apps and across many frameworks like Python, Ruby, PHP, and JavaScript. MVC can be found in actual apps and Web applications that have a user interface like Clash Royale, Facebook, Instagram, and others. Here we list some of the advantages and disadvantages of the MVC pattern.
===Advantages===
Using an MVC framework comes with several advantages. To start, this method involves separating the application development into three core components. This allows for more efficient collaboration because multiple people can work on different components at the same time. This method of development allows for faster transitions when changing a program. For example, changing the layout of buttons in the UI affects only the View code, rather than having to edit the whole program. Using this framework is fairly straightforward when it relates to the human thought process. It provides a simple way of planning and structuring a program that even an inexperienced programmer can understand.
===Disadvantages===
The MVC Architecture has multiple components and, therefore, increases the complexity of the program. This can result in some inefficient data transfers. It is also not the best idea to apply this when creating a small program because it is typically efficient only when applied by a large team of programmers who are working on multiple parts of the code at the same time (called parallel programming).
 
==Process==
[[File:MVC example.png|thumb|The processing in an MVC framework]]
# A user gives an input from the View or, alternatively, requests information from the Controller
# The request is sent to the Controller
# The Controller interprets the data, and relays it to the Model
# The Model manipulates the data using the logic and and framework supplied by the program
# The Model then returns the newly manipulated data to the Controller
# The Controller supplies the new data to the View
# The View uses the new data and updates the View model for the user accordingly
 
==History==
[[File:Trygve reenskaug.jpg|thumb|Trygve Reenskaug, the orginial creator of the MVC pattern]]
Model-View-Controller was originally created by Trygve Reenskaug, a Norwegian Computer Scientist. He first implemented it in the 1970s in Smalltalk-79 while he was visiting the Xerox Palo Alto Research Center. He wrote his first paper on MVC in 1978, originally calling it the ''Thing-Model-View-Editor'' pattern. Jim Althoff and others would later implement MVC in Smalltalk-80 in the 1980s. The MVC pattern has been modified into multiple variants (more on this below). MVC grew in popularity and use in 1996 with the introduction of NeXT's WebObjects.
 
===Variations===
The MVC has evolved since it was first introduced. Several different variants are now used:
* Hierarchical Model-View-Controller (HMVC)
* Model-View-Adapter (MVA)
* Model-View-Presenter (MVP)
* Model-View-View-Model (MVVM)
 
{{KeyConcepts|
* Model View Controller. A design pattern that is used to organize code
* Model. Holds raw data / framework of program
* View. User interface
* Controller. Communication between the Model and View Receives user input and model output
* Input. Information given to the application
* Output. Information that the application produces
}}
 
{{MerlinNoteFromEditor|Please assess whether this page should have missing sections: Exercises, Quiz.}}


==Sources==
{{GoingDeeper|
https://www.codecademy.com/articles/mvc
* https://developer.apple.com/library/archive/documentation/General/Conceptual/DevPedia-CocoaCore/MVC.html
https://www.youtube.com/watch?v=DUg2SWWK18I
* https://www.codermerlin.com/wiki/index.php/W1526_Model-View-Controller
https://www.educative.io/blog/mvc-tutorial
* https://docs.microsoft.com/en-us/aspnet/mvc/overview/older-versions-1/overview/understanding-models-views-and-controllers-cs
* https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller
}}


Presented by Team Cambodia
{{MerlinNoteFromEditor|Please cite these references up in the body of the topic above. And format them as they are done in other topics. This then automatically assembles them in the References section in the order in which they are referenced. For good examples, see "Why Learn Linux" page 4 of 5 in the Wiki topic.}}
==References==
* https://www.codecademy.com/articles/mvc
* https://www.youtube.com/watch?v=DUg2SWWK18I
* https://www.educative.io/blog/mvc-tutorial
* [https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller Model View Controller Wikipedia]
* [https://www.codecademy.com/articles/mvc Code Academy]
* [https://developer.apple.com/library/archive/documentation/General/Conceptual/DevPedia-CocoaCore/MVC.html Developer Apple]
* [http://stephenwalther.com/archive/2008/08/24/the-evolution-of-mvc Stephen Walter]
* [[https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller Model-view-controller]] Wikipedia
* https://www.codecademy.com/articles/mvc
* https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller#History
* https://www.geeksforgeeks.org/mvc-design-pattern/
* [[https://en.wikipedia.org/wiki/Software_design_pattern Software Design Pattern]] Wikipedia

Latest revision as of 17:16, 11 February 2022

Within these castle walls be forged Mavens of Computer Science ...
— Merlin, The Coder
Mvc-diagram.png

Background[edit]

A software design pattern is a general, reusable solution to a commonly occurring problem in software design. It provides a template that can be used to solve similar problems in various situations. Design patterns can help speed development by providing tested and proven paradigms.

A paradigm is defined as a method used to solve a problem or complete a task. A programming paradigm is a paradigm that coders implement in programming language tools and techniques. Some examples of programming paradigms include Imperative, Declarative, and Model-View-Controller.

In the case of the Model-View-Controller (MVC) paradigm, you can use it to understand how code is managed in an application, how data is handled in the database, and how that data is visually represented via the communication between the two through a controller.

Introduction[edit]

The Model-View-Controller, or MVC, is a popular way to organize code for apps and websites that have a user interface. The idea is that portions of the code are grouped into different objects that serve different functions. This makes it much easier for collaborators to understand the code's purpose and where future material should be added. These three objects are Model, View, and Controller.

Description[edit]

The main idea of the MVC pattern is designating a unique purpose to different sections of your code. In brief, the Model can be thought of as the data. The View can be thought of as the user interface. The Controller can be thought of as an input reader that takes the user input and decides what to do with it. The MVC model can be seen as a cycle where everything contributes to another's task. Without one of them, the program would be incomplete.

Model[edit]

The Model is the collection of tasks that contain the functionality of a program. This section can be seen as the brains of the code because it contains all the data, logic, and rules of the application. For example, when the user clicks a button, the model does something in response to the input and sends the output to the controller.

Model-View-Controller architectural pattern (alternative view)

The interactions of the three MVC components are illustrated in the figure here.

View[edit]

The View contains the user interface. This section is primarily focused on the visuals that a user sees, such as the font or color on the screen. It also stores the functions that define the way users use the app are stored here. The user's information requests are transferred from the View to the Model by the Controller. For example, the look of a button. This component only displays visuals given to it as instructions from the controller. It does not analyze data logic because the Controller has already performed that function.

Controller[edit]

The Controller is the primary connection between the Model and View. Whereas the View focuses on presenting and taking information to and from the user, the Model manipulates the data, rules, and logic of the application. The Controller is the middleman that takes the input from the View and updates the Model. It accepts inputs and converts them into usable instructions for the Model or View. The Controller basically acts as a "conduit" or a connection between the View and the Model. It interprets the input from the View and sends data to the Model.

Example[edit]

 This article can be improved by:  A subject matter expert should review whether the below is a good example, or if another might be more common or easier to follow.

One example of MVC that you might be familiar with is Super Mario Bros. The Model is the data used in the game, so the actual data that represents the character Mario is the Model in MVC. The View is the visuals in Super Mario Bros. From the background to the platforms and designs of characters, the View handles the visual aspects of the game. The Controller handles the inputs. So anything from a Wii Remote to a Switch Controller are examples of the Controller that helps the user interact with the game and make Mario move. These all work together to make all the aspects of Super Mario work efficiently.

Usages[edit]

MVC is commonly used to design Web applications and mobile apps and across many frameworks like Python, Ruby, PHP, and JavaScript. MVC can be found in actual apps and Web applications that have a user interface like Clash Royale, Facebook, Instagram, and others. Here we list some of the advantages and disadvantages of the MVC pattern.

Advantages[edit]

Using an MVC framework comes with several advantages. To start, this method involves separating the application development into three core components. This allows for more efficient collaboration because multiple people can work on different components at the same time. This method of development allows for faster transitions when changing a program. For example, changing the layout of buttons in the UI affects only the View code, rather than having to edit the whole program. Using this framework is fairly straightforward when it relates to the human thought process. It provides a simple way of planning and structuring a program that even an inexperienced programmer can understand.

Disadvantages[edit]

The MVC Architecture has multiple components and, therefore, increases the complexity of the program. This can result in some inefficient data transfers. It is also not the best idea to apply this when creating a small program because it is typically efficient only when applied by a large team of programmers who are working on multiple parts of the code at the same time (called parallel programming).

Process[edit]

The processing in an MVC framework
  1. A user gives an input from the View or, alternatively, requests information from the Controller
  2. The request is sent to the Controller
  3. The Controller interprets the data, and relays it to the Model
  4. The Model manipulates the data using the logic and and framework supplied by the program
  5. The Model then returns the newly manipulated data to the Controller
  6. The Controller supplies the new data to the View
  7. The View uses the new data and updates the View model for the user accordingly

History[edit]

Trygve Reenskaug, the orginial creator of the MVC pattern

Model-View-Controller was originally created by Trygve Reenskaug, a Norwegian Computer Scientist. He first implemented it in the 1970s in Smalltalk-79 while he was visiting the Xerox Palo Alto Research Center. He wrote his first paper on MVC in 1978, originally calling it the Thing-Model-View-Editor pattern. Jim Althoff and others would later implement MVC in Smalltalk-80 in the 1980s. The MVC pattern has been modified into multiple variants (more on this below). MVC grew in popularity and use in 1996 with the introduction of NeXT's WebObjects.

Variations[edit]

The MVC has evolved since it was first introduced. Several different variants are now used:

  • Hierarchical Model-View-Controller (HMVC)
  • Model-View-Adapter (MVA)
  • Model-View-Presenter (MVP)
  • Model-View-View-Model (MVVM)
Key ConceptsKeyConceptsIcon.png
  • Model View Controller. A design pattern that is used to organize code
  • Model. Holds raw data / framework of program
  • View. User interface
  • Controller. Communication between the Model and View Receives user input and model output
  • Input. Information given to the application
  • Output. Information that the application produces

 This article can be improved by:  Please assess whether this page should have missing sections: Exercises, Quiz.

Going DeeperGoingDeeperIcon.png

 This article can be improved by:  Please cite these references up in the body of the topic above. And format them as they are done in other topics. This then automatically assembles them in the References section in the order in which they are referenced. For good examples, see "Why Learn Linux" page 4 of 5 in the Wiki topic.

References[edit]

Retrieved from "https://www.codermerlin.academy/wiki/index.php?title=W2707_Model_View_Controller&oldid=17484"