Overview of MVC
What is MVC Framework?
• The Model-View-Controller (MVC) framework is an architectural
pattern that separates an application into three main logical
components Model, View, and Controller. Hence the abbreviation
MVC.
• Each architecture 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 in web technology has become popular
for designing web applications as well as mobile apps.
History of MVC
• MVC architecture was 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
• To design a web application architecture using the MVC pattern, it 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)
Why Should You Use MVC?
• Three words: separation of concerns, or SoC for short.
• The MVC pattern helps you break up the frontend and backend code
into separate components. This way, it's much easier to manage and
make changes to either side without them interfering with each other.
• But this is easier said than done, especially when several developers
need to update, modify, or debug a full-blown application
simultaneously.
MVC Architecture
Three important MVC 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
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 presents the output
presentation to the user.
• The view also represents the data from charts, diagrams, and tables.
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
sends back to the database or uses 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
• In this MVC architecture
example,
View= You
Waiter= Controller
Cook= Model
Refrigerator= Data
• 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 Diesel
tank)
How to Use MVC
• To better illustrate the MVC pattern, I've included a web application
that shows how these concepts all work.
• My Car Clicker application is a variation of a well-known Cat Clicker
app.
Now let's dive into these three components
that make up the MVC architecture pattern.
Model (data)
• The model's job is to simply manage the data. Whether the data is
from a database, API, or a JSON object, the model is responsible for
managing it.
• In the Car Clicker application, the model object contains an array of
car objects with all the information (data) needed for the app.
• It also manages the current car being displayed with a variable that's
initially set to null.
Views (UI)
• The view's job is to decide what the user will see on their screen, and
how.
• The Car Clicker app has two views: carListView and CarView.
• Both views have two critical functions that define what each view wants
to initialize and render.
• These functions are where the app decides what the user will see and
how.
Controller (Brain)
• The controller's responsibility is to pull, modify, and provide data to
the user. Essentially, the controller is the link between the view and
model.
• Through getter and setter functions, the controller pulls data from the
model and initializes the views.
• If there are any updates from the views, it modifies the data with a
setter function.
Popular MVC web frameworks
• Ruby on Rails • Rails
• Django • Zend Framework
• CakePHP • CodeIgniter
• Yii • Laravel
• CherryPy • Fuel PHP
• Spring MVC • Symphony
• Catalyst
Advantages of MVC: Key Benefits
• Easy code maintenance which is easy to • Offers the best support for test-driven
extend and grow development
• MVC Model component can be tested • It works well for Web apps which are
separately from the user supported by large teams of web designers
• Easier support for new types of clients and developers.
• Development of the various components • Provides clean separation of
can be performed parallelly. concerns(SoC).
• It helps you to avoid complexity by • Search Engine Optimization (SEO) Friendly.
dividing an application into the three • All classes and objects are independent of
units. Model, view, and controller each other so that you can test them
• It only uses a Front Controller pattern separately.
which process web application requests • MVC design pattern allows logical grouping
through a single controller. of related actions on a controller together.
Disadvantages of using MVC
• Difficult to read, change, unit test, • The difficulty of using MVC with
and reuse this model the modern user interface
• The framework navigation can • There is a need for multiple
some time complex as it programmers to conduct parallel
introduces new layers of programming.
abstraction which requires users
to adapt to the decomposition • Knowledge of multiple
criteria of MVC. technologies is required.
• No formal validation support • Maintenance of lots of codes in
Controller
• Increased complexity and
Inefficiency of data
3-tier Architecture vs. MVC
Architecture
Conclusion
• The most attractive concept of the MVC pattern is separation of
concerns.
• Modern web applications are very complex, and making a change can
sometimes be a big headache.
• Managing the frontend and backend in smaller, separate components
allows for the application to be scalable, maintainable, and easy to
expand.
