MVC ARCHITECTURE By Nishan Chathuranga Wickramarathna 

02 01 04 03 What is MVC and understanding the problem it solves Demonstration on how we can implement it. INTRODUCTION HANDS ON Q and A CONCLUSION MVC & BEYOND What else you can do with it 

WHO AM I NISHAN CHATHURANGA Software Engineer 99X (Pvt) Ltd. University of Moratuwa Faculty of Information Technology @NishanWrites [email protected] 

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 design. Software design pattern Software architecture The architecture of a system describes its major components, their relationships (structures), and how they interact with each other. 

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 having separated functions solve the problems of readability, modularity, and coupling, so does MVC. WHY 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 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. Three important MVC the components 

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. Three important MVC the components (Continues..) 

Let's see Model View Controller from daily life: EXAMPLES 

Let's see Model View Controller from daily life: EXAMPLES 

MVC – BIG PICTURE 

POPULAR MVC WEB FRAMEWORKS 

DEMO TIME 

Source Codes github.com/nishanc/MVCDemo 

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- way binding. 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. MVVM EXAMPLE 

THANKS! Does anyone have any questions? [email protected] @NishanWrites