MVC Architecture, a session conducted at Faculty of Information Technology, University of Moratuwa on 07/02/2021.
By Nishan Chathuranga Wickramarathna
What is MVC and understanding
the problem it solves
Demonstration on how we can
INTRODUCTION HANDS ON
Q and A
MVC & BEYOND
What else you can do with it
Is MVC a Design Pattern or Architectural pattern?
Software design pattern is a
general, reusable solution to a
commonly occurring problem
within a given context in software
The architecture of a system
describes its major components,
their relationships (structures),
and how they interact with each
Both can be true.
MVC can be an architectural pattern, if it forms the
basis of the application architecture.
It can also be seen as simply a design pattern, an
abstract notion that is applicable to any application.
What problems does this
solve? Well, just as how
functions solve the
problems of readability,
modularity, and coupling,
so does MVC.
Well, like doing many things in life, it always helpful to be
well organized. Models, Views and Controllers are
distinctly different pieces of code that helps to provide
different functions to your overall project. Because of that,
they are kept separate and organized.
Imagine if you were designing a program. You wouldn't
put all your code into one function, would you? No, you
would divide them up into separate smaller functions that
solve very specific tasks. Likewise, as programmers,
we're constantly looking for ways to separate and divide
our large applications to smaller bits of pieces.
Say if you wanted to change a piece of code, you can tackle
it in a smaller subset that is more or less isolated from the
larger piece of code. This allows you to add, modify or
remove code more efficiently and logically. It also helps in
testing, since similar code is sectioned into groups,
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
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.
Three important MVC the components
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).
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
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.
Three important MVC the components (Continues..)
MVC – BIG PICTURE
POPULAR MVC WEB FRAMEWORKS
Controller (the C in MVC) is replaced by the ViewModel (the VM in
MVVM). The ViewModel is still a function, which is like a controller
in that it is responsible for maintaining the relationship between
the view and model. However, the difference here is that, if we
update anything in view, it gets updated in model. Likewise,
change anything in model, it shows up in the view.
THE MVVM ARCHITECTURE
Angular employs something called 2-way
binding. As it happens, the MVVM design
pattern lends itself extremely well to 2-
Not to say that you can't have 2-way
binding in MVC. It's just that in the
transactional framework associated with
client-server interactions where MVC is
typically employed, we send the view info
to the server to update the model.
Meanwhile, in Angular, we're operating on
the client side, so we can update
associated objects in real time.