Upgrade to Pro — share decks privately, control downloads, hide ads and more …

MVC Architecture In Software Development

MVC Architecture In Software Development

MVC Architecture, a session conducted at Faculty of Information Technology, University of Moratuwa on 07/02/2021.

Nishan Chathuranga

February 07, 2021
Tweet

More Decks by Nishan Chathuranga

Other Decks in Programming

Transcript

  1. MVC
    ARCHITECTURE
    By Nishan Chathuranga Wickramarathna

    View Slide

  2. 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

    View Slide

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

    View Slide

  4. 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.

    View Slide

  5. 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.

    View Slide

  6. 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,

    View Slide


  7. 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

    View Slide

  8. 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..)

    View Slide

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

    View Slide

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

    View Slide

  11. MVC – BIG PICTURE

    View Slide

  12. POPULAR MVC WEB FRAMEWORKS

    View Slide

  13. DEMO TIME

    View Slide

  14. Source Codes
    github.com/nishanc/MVCDemo

    View Slide

  15. 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

    View Slide

  16. 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

    View Slide

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

    View Slide