MVC Tutorial for Beginners: What is, Architecture & Example

Details

What is MVC?

The MVC is an architectural pattern that separates an application into three main logical components

  1. Model
  2. View
  3. Controller

Hence the abbreviation MVC. Each component is built to handle specific development aspect of an application.

MVC separates the business logic and presentation layer from each other. It was traditionally used for desktop graphical user interfaces (GUIs). Nowadays, MVC architecture has become popular for designing web applications as well as mobile apps.

In this tutorial, you will learn-

History of MVC

  • MVC architecture first discussed in 1979 by Trygve Reenskaug
  • MVC model was first introduced in 1987 in the Smalltalk programming language.
  • MVC was first time accepted as a general concept, in a 1988 article
  • In the recent time, MVC pattern is widely used in modern web applications

Features of MVC

  • Easy and frictionless testability. Highly testable, extensible and pluggable framework
  • Offers full control over your HTML as well as your URLs
  • Leverage existing features provided by ASP.NET, JSP, Django, etc.
  • Clear separation of logic: Model, View, Controller. Separation of application tasks viz. business logic, Ul logic, and input logic
  • URL Routing for SEO Friendly URLs. Powerful URL- mapping for comprehensible and searchable URLs
  • Supports for Test Driven Development (TDD)

MVC Architecture

MVC Architecture Diagram

Three important MVC the components are:

  • Model: It includes all the data and its related logic
  • View: Present data to the user or handles user interaction
  • Controller: An interface between Model and View components

Let's see each other this component in detail:

View

A View is that part of the application that represents the presentation of data.

Views are created by the data collected from the model data. A view requests the model to give information so that it resents the output presentation to the user.

The view also represents the data from chats, diagrams, and table. For example, any customer view will include all the UI components like text boxes, drop downs, etc.

Controller

The Controller is that part of the application that handles the user interaction. The controller interprets the mouse and keyboard inputs from the user, informing model and the view to change as appropriate.

A Controller send's commands to the model to update its state(E.g., Saving a specific document). The controller also sends commands to its associated view to change the view's presentation (For example scrolling a particular document).

Model

The model component stores data and its related logic. It represents data that is being transferred between controller components or any other related business logic. For example, a Controller object will retrieve the customer info from the database. It manipulates data and send back to the database or use it to render the same data.

It responds to the request from the views and also responds to instructions from the controller to update itself. It is also the lowest level of the pattern which is responsible for maintaining data.

MVC Examples

Let's see Model View Controller from daily life:

Example 1:

  • Let's assume you go to a restaurant. You will not go to the kitchen and prepare food which you can surely do at your home. Instead, you just go there and wait for the waiter to come on.
  • Now the waiter comes to you, and you just order the food. The waiter doesn't know who you are and what you want he just written down the detail of your food order.
  • Then, the waiter moves to the kitchen. In the kitchen waiter not prepare your food.
  • The cook prepares your food. The waiter is given your order to him along with your table number.
  • Cook then prepared food for you. He uses ingredients to cooks the food. Let's assume that your order a vegetable sandwich. Then he needs bread, tomato, potato, capsicum, onion, bit, cheese, etc. which he sources from the refrigerator
  • Cook final hand over the food to the waiter. Now it is the job of the waiter to moves this food outside the kitchen.
  • Now waiter knows which food you have ordered and how they are served.

In this case, 

View= You
Waiter= Controller
Cook= Model
Refrigerator= Data

Let see one more example,

Example 2:

Car driving mechanism is another example of the MVC model.

  • Every car consist of three main parts.
  • View= User interface : ( Gear lever, panels, steering wheel, brake, etc.)
  • Controller- Mechanism ( Engine)
  • Model- Storage ( Petrol or Diseal tank)

Car runs from engine take fuel from storage, but it runs only using mentioned user interface devices.

Popular MVC web frameworks

Here, is a list of some popular MVC frameworks.

Advantages of MVC: Key Benefits

Here, are major benefits of using MVC architecture.

  • Easy code maintenance easy to extend and grow
  • MVC Model component can be tested separately from the user
  • Easier support for new type of clients
  • Development of the various components can be performed parallelly.
  • It helps you to avoid complexity by dividing an application into the three units. Model, view, and controller
  • It only uses a Front Controller pattern which process web application requests through a single controller.
  • Offers the best support for test-driven development
  • It works well for Web apps which are supported by large teams of web designers and developers.
  • Provides clean separation of concerns(SoC).
  • Search Engine Optimization (SEO) Friendly.
  • All classed and objects are independent of each other so that you can test them separately.
  • MVC allows logical grouping of related actions on a controller together.

Disadvantages of using MVC

  • Difficult to read, change, to unit test, and reuse this model
  • The framework navigation can some time complex as it introduces new layers of abstraction which requires users to adapt to the decomposition criteria of MVC.
  • No formal validation support
  • Increased complexity and Inefficiency of data
  • The difficulty of using MVC with the modern user interface
  • There is a need for multiple programmers to conduct parallel programming.
  • Knowledge of multiple technologies is required.
  • Maintenance of lots of codes in Controller

3-tier Architecture vs. MVC Architecture

Parameter 3-Tier Architecture MVC Architecture
Communication This type of architecture pattern never communicates directly with the data layer. All layers communicate directly using triangle topology.
Usage 3-tier: widely used in web applications where the client, data tiers, and middleware a run on physically separate platforms. Generally used on applications that run on a single graphical workstation.

Summary

  • The MVC is an architectural pattern that separates an application into 1) Model, 2) View and 3) Controller
  • Model: It includes all the data and its related logic
  • View: Present data to the user or handles user interaction
  • Controller: An interface between Model and View components
  • MVC architecture first discussed in 1979 by Trygve Reenskaug
  • MVC is a highly testable, extensible and pluggable framework
  • Some popular MVC frameworks are Rails, Zend Framework, CodeIgniter, Laravel, Fuel PHP, etc.

 

YOU MIGHT LIKE: