MVC Overview

This is a short introduction to Model View Controller (MVC) software architectural pattern. For more information, please refer to "Wikipedia's MVC"
(Please tell me if you find any errors or omissions in the document —Upsorn Praphamontripong, 31-January-2021)

 My Very Cool Drink Factory (MVC) 

Illustrate MVC with drink factory

  The MVC Drink Factory: A Recipe  

  • Requires:
    • 2 kiwis
    • 1 cup frozen whole strawberries
    • 1 container (6 ounces) low-fat strawberry yogurt
    • 1/2 cup low-fat milk
    • 2 tablespoons honey
  • Peel the kiwis and cut them into chunks.
  • Put the kiwi chunks, strawberries, yogurt, milk and honey into a blender container. The blender is sharp inside. Watch your fingers!
  • Cover the blender with the lid and blend on high speed until the mixture is smooth. Turn the blender off and on or pulse, if needed, to break up the strawberries.
  • Pour into glass(es), garnish with straberry and kiwi slices, and serve with straws (optional)

  The MVC Drink Factory: Abstract  

  • What makes a drink?
    • Ingredients
    • Glassware
    • Recipe
  • Recipe controls the entire process (controller)
  • Ingredients make up the content of the the drink (model)
  • Glass changes how you see the drink (view), but not its contents

  The MVC Drink Factory: Alteration  

  • We can make other drinks by changing the ingredients, keeping the steps to follow and the glass
    MVC: different model, same controoler

  • We can make other drinks by changing the glass, keeping the steps to follow and the ingredients
    MVC: different view, same controoler        MVC: different view, same controoler

  • We can make other drinks by changing the steps, keeping the glasses and the ingredients
    MVC: different controller, same model and view    MVC: different controller, same model and view            MVC: different controller, same model and view

  The MVC Modular Drink Factory  

  • My Very Cool factory separates concerns between recipes, ingredients, and glasses
  • Different people can pull out ingredients, follow the recipe, and pour the result into the correct glass without knowing exactly what the other people does
  • With the separation, we can completely replace how the ingredients are gathered (maybe use pre-portioned or pre-mixed) without changing the rest of the process


  • This separation of concerns is what we want in our web applications
  • Because it is so modular, we named an entire design pattern based on this recipe, ingredient, presentation pattern (MVC)
  • Alternatively, we may call it Model-View-Controller
    • Model: ingredients
    • View: glass/presentation
    • Controller: recipe

MV* Patterns

Separation of concerns — How to separate presentation from data and logic?
  • Model: domain-specific data, does not matter how it is interacted with
  • View: visual representation of current state of model
  • Controller: moderates user interactions, makes business decisions


  • Low level controller/model code can be easily shared
  • View can have direct access to model and thus can communicate with model directly
  • Model updates view directly


  • Easier to develop in parallel (V only talks to VM)
  • View does not communicate with model directly
  • View has no idea what are in model and just needs data binding
  • Model does not concern with formatting
  • ViewModel is similar to MVC but only does data translation and formatting between Model and View
  • (more directly maps to MyVeryCool Drink Factory than MVC does)