SlideShare a Scribd company logo
1 of 14
Model-View-Controller
Architecture
2
Give someone a program, you frustrate them for a day;
teach them how to program, you frustrate them for a
lifetime.
— David Leinweber
Model
View
Controller
Model-View-Controller
 Architecture for interactive apps
• introduced by Smalltalk developers at PARC
 Partitions application so that it is
• scalable
• maintainable
What is MVC?
5
The Model
 Most programs are supposed to do work, not just be
“another pretty face”
• but there are some exceptions
• useful programs existed long before GUIs
 The Model is the part that does the work--it models
the actual problem being solved
 The Model should be independent of both the
Controller and the View
• But it provides services (methods) for them to use
 Independence gives flexibility, robustness
Model
View
Controller
6
The View
 Typically, the user has to be able to see, or view,
what the program is doing
 The View shows what the Model is doing
• The View is a passive observer; it should not affect the
model
 The Model should be independent of the View, but
(but it can provide access methods)
 The View should not display what the Controller
thinks is happening
Model
View
Controller
7
The Controller
 The Controller decides what the model is to do
 Often, the user is put in control by means of a GUI
• in this case, the GUI and the Controller are often the same
 The Controller and the Model can almost always be
separated (what to do versus how to do it)
 The design of the Controller depends on the Model
 The Model should not depend on the Controller
Model
View
Controller
Controller Communication
 Communicates with view
• determines which objects are being manipulated
 e.g., which object was selected with mouse click
 Calls model methods to make changes
• model makes change and notifies views to update
Model
View
Controller
Advantages
 Input processing is separated from output
processing.
 Controllers can be interchanged, allowing different
user interaction modes.
 Multiple views of the model can be supported easily.
Other ways
 Combining Controller and View
• Small programs
• May be highly interdependent
• Never mix model
Model
View
Controller
Other Ways
• No Model-View interaction
• All interaction happens through controller
• Controller talks to Model and View
• Your project
Model
View
Controller
Why MVC?
 Provides a logical structure for
heavily interactive system
 Adheres to good engineering design
principles and practices
• Information hiding, less coupling,
simplicity, etc.
• Delegated control style
Why MVC?
 Combining MVC into one class or using global
variables will not scale. Why?
• model may have more than one view
 each different & needing update on model changes
 Separation eases maintenance. Why?
• easy to add a new view later
 may need new model info, but old views still work
• can change a view later
 e.g., draw shapes in 3-d
• recall that the view handles selection
What’s the point?
 It’s just plain easier
• (even if it doesn’t look it)!
 Studies show that most introductory CS
college students tend to clump a UI
program into one big monolithic main
class
 Unfamiliarity stems from student
tendency to program according to styles
presented in textbooks and not being
introduced to design principles early

More Related Content

Similar to MVC architecture in software programming for interactive apps

MVVM presentation
MVVM presentationMVVM presentation
MVVM presentationInova LLC
 
Mobile App Architectures & Coding guidelines
Mobile App Architectures & Coding guidelinesMobile App Architectures & Coding guidelines
Mobile App Architectures & Coding guidelinesQamar Abbas
 
Mvc 130330091359-phpapp01
Mvc 130330091359-phpapp01Mvc 130330091359-phpapp01
Mvc 130330091359-phpapp01Jennie Gajjar
 
Adding Another "M" to MVC: MVCM
Adding Another "M" to MVC: MVCMAdding Another "M" to MVC: MVCM
Adding Another "M" to MVC: MVCMMario Vargas
 
Interaction-Oriented Architecture.pptx
Interaction-Oriented Architecture.pptxInteraction-Oriented Architecture.pptx
Interaction-Oriented Architecture.pptxGodwin Monserate
 
MVx patterns in iOS (MVC, MVP, MVVM)
MVx patterns in iOS (MVC, MVP, MVVM)MVx patterns in iOS (MVC, MVP, MVVM)
MVx patterns in iOS (MVC, MVP, MVVM)Yaroslav Voloshyn
 
Thin Controllers Fat Models - How to Write Better Code
Thin Controllers Fat Models - How to Write Better CodeThin Controllers Fat Models - How to Write Better Code
Thin Controllers Fat Models - How to Write Better CodeDr. Syed Hassan Amin
 
Porting the Legacy Application to Composite Application Guidance
Porting the Legacy Application to Composite Application GuidancePorting the Legacy Application to Composite Application Guidance
Porting the Legacy Application to Composite Application GuidanceOur Community Exchange LLC
 
Software development process models
Software development process modelsSoftware development process models
Software development process modelsMuntha Ulfat
 
iOS architecture patterns
iOS architecture patternsiOS architecture patterns
iOS architecture patternsallanh0526
 
Software Process Models
Software Process ModelsSoftware Process Models
Software Process ModelsAtul Karmyal
 
Waterfall Model for Software Development.pptx
Waterfall Model for Software Development.pptxWaterfall Model for Software Development.pptx
Waterfall Model for Software Development.pptxPrimaAyundyayasti
 
Design Pattern - MVC, MVP and MVVM
Design Pattern - MVC, MVP and MVVMDesign Pattern - MVC, MVP and MVVM
Design Pattern - MVC, MVP and MVVMMudasir Qazi
 

Similar to MVC architecture in software programming for interactive apps (20)

MVVM presentation
MVVM presentationMVVM presentation
MVVM presentation
 
Mobile App Architectures & Coding guidelines
Mobile App Architectures & Coding guidelinesMobile App Architectures & Coding guidelines
Mobile App Architectures & Coding guidelines
 
Mvc 130330091359-phpapp01
Mvc 130330091359-phpapp01Mvc 130330091359-phpapp01
Mvc 130330091359-phpapp01
 
Adding Another "M" to MVC: MVCM
Adding Another "M" to MVC: MVCMAdding Another "M" to MVC: MVCM
Adding Another "M" to MVC: MVCM
 
Interaction-Oriented Architecture.pptx
Interaction-Oriented Architecture.pptxInteraction-Oriented Architecture.pptx
Interaction-Oriented Architecture.pptx
 
MVx patterns in iOS (MVC, MVP, MVVM)
MVx patterns in iOS (MVC, MVP, MVVM)MVx patterns in iOS (MVC, MVP, MVVM)
MVx patterns in iOS (MVC, MVP, MVVM)
 
Thin Controllers Fat Models - How to Write Better Code
Thin Controllers Fat Models - How to Write Better CodeThin Controllers Fat Models - How to Write Better Code
Thin Controllers Fat Models - How to Write Better Code
 
Porting the Legacy Application to Composite Application Guidance
Porting the Legacy Application to Composite Application GuidancePorting the Legacy Application to Composite Application Guidance
Porting the Legacy Application to Composite Application Guidance
 
Software development process models
Software development process modelsSoftware development process models
Software development process models
 
Model View Controller
Model View ControllerModel View Controller
Model View Controller
 
MVC
MVCMVC
MVC
 
Models.pptx
Models.pptxModels.pptx
Models.pptx
 
Design pattern
Design patternDesign pattern
Design pattern
 
Design Pattern
Design PatternDesign Pattern
Design Pattern
 
Knockout js
Knockout jsKnockout js
Knockout js
 
iOS architecture patterns
iOS architecture patternsiOS architecture patterns
iOS architecture patterns
 
Software Process Models
Software Process ModelsSoftware Process Models
Software Process Models
 
Waterfall Model for Software Development.pptx
Waterfall Model for Software Development.pptxWaterfall Model for Software Development.pptx
Waterfall Model for Software Development.pptx
 
Models of SDLC (Software Development Life Cycle / Program Development Life Cy...
Models of SDLC (Software Development Life Cycle / Program Development Life Cy...Models of SDLC (Software Development Life Cycle / Program Development Life Cy...
Models of SDLC (Software Development Life Cycle / Program Development Life Cy...
 
Design Pattern - MVC, MVP and MVVM
Design Pattern - MVC, MVP and MVVMDesign Pattern - MVC, MVP and MVVM
Design Pattern - MVC, MVP and MVVM
 

Recently uploaded

VIP Kolkata Call Girl Gariahat 👉 8250192130 Available With Room
VIP Kolkata Call Girl Gariahat 👉 8250192130  Available With RoomVIP Kolkata Call Girl Gariahat 👉 8250192130  Available With Room
VIP Kolkata Call Girl Gariahat 👉 8250192130 Available With Roomdivyansh0kumar0
 
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
PORTAFOLIO   2024_  ANASTASIYA  KUDINOVAPORTAFOLIO   2024_  ANASTASIYA  KUDINOVA
PORTAFOLIO 2024_ ANASTASIYA KUDINOVAAnastasiya Kudinova
 
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...Yantram Animation Studio Corporation
 
3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdf3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdfSwaraliBorhade
 
A level Digipak development Presentation
A level Digipak development PresentationA level Digipak development Presentation
A level Digipak development Presentationamedia6
 
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdfThe_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdfAmirYakdi
 
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝soniya singh
 
NATA 2024 SYLLABUS, full syllabus explained in detail
NATA 2024 SYLLABUS, full syllabus explained in detailNATA 2024 SYLLABUS, full syllabus explained in detail
NATA 2024 SYLLABUS, full syllabus explained in detailDesigntroIntroducing
 
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)jennyeacort
 
SCRIP Lua HTTP PROGRACMACION PLC WECON CA
SCRIP Lua HTTP PROGRACMACION PLC  WECON CASCRIP Lua HTTP PROGRACMACION PLC  WECON CA
SCRIP Lua HTTP PROGRACMACION PLC WECON CANestorGamez6
 
CALL ON ➥8923113531 🔝Call Girls Aminabad Lucknow best Night Fun service
CALL ON ➥8923113531 🔝Call Girls Aminabad Lucknow best Night Fun serviceCALL ON ➥8923113531 🔝Call Girls Aminabad Lucknow best Night Fun service
CALL ON ➥8923113531 🔝Call Girls Aminabad Lucknow best Night Fun serviceanilsa9823
 
Kindergarten Assessment Questions Via LessonUp
Kindergarten Assessment Questions Via LessonUpKindergarten Assessment Questions Via LessonUp
Kindergarten Assessment Questions Via LessonUpmainac1
 
Chapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdfChapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdfParomita Roy
 
How to Be Famous in your Field just visit our Site
How to Be Famous in your Field just visit our SiteHow to Be Famous in your Field just visit our Site
How to Be Famous in your Field just visit our Sitegalleryaagency
 
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130Suhani Kapoor
 
VIP Russian Call Girls in Gorakhpur Deepika 8250192130 Independent Escort Ser...
VIP Russian Call Girls in Gorakhpur Deepika 8250192130 Independent Escort Ser...VIP Russian Call Girls in Gorakhpur Deepika 8250192130 Independent Escort Ser...
VIP Russian Call Girls in Gorakhpur Deepika 8250192130 Independent Escort Ser...Suhani Kapoor
 
SD_The MATATAG Curriculum Training Design.pptx
SD_The MATATAG Curriculum Training Design.pptxSD_The MATATAG Curriculum Training Design.pptx
SD_The MATATAG Curriculum Training Design.pptxjanettecruzeiro1
 
Bus tracking.pptx ,,,,,,,,,,,,,,,,,,,,,,,,,,
Bus tracking.pptx ,,,,,,,,,,,,,,,,,,,,,,,,,,Bus tracking.pptx ,,,,,,,,,,,,,,,,,,,,,,,,,,
Bus tracking.pptx ,,,,,,,,,,,,,,,,,,,,,,,,,,bhuyansuprit
 

Recently uploaded (20)

VIP Kolkata Call Girl Gariahat 👉 8250192130 Available With Room
VIP Kolkata Call Girl Gariahat 👉 8250192130  Available With RoomVIP Kolkata Call Girl Gariahat 👉 8250192130  Available With Room
VIP Kolkata Call Girl Gariahat 👉 8250192130 Available With Room
 
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
PORTAFOLIO   2024_  ANASTASIYA  KUDINOVAPORTAFOLIO   2024_  ANASTASIYA  KUDINOVA
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
 
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
 
3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdf3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdf
 
A level Digipak development Presentation
A level Digipak development PresentationA level Digipak development Presentation
A level Digipak development Presentation
 
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdfThe_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
 
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
 
NATA 2024 SYLLABUS, full syllabus explained in detail
NATA 2024 SYLLABUS, full syllabus explained in detailNATA 2024 SYLLABUS, full syllabus explained in detail
NATA 2024 SYLLABUS, full syllabus explained in detail
 
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
 
SCRIP Lua HTTP PROGRACMACION PLC WECON CA
SCRIP Lua HTTP PROGRACMACION PLC  WECON CASCRIP Lua HTTP PROGRACMACION PLC  WECON CA
SCRIP Lua HTTP PROGRACMACION PLC WECON CA
 
CALL ON ➥8923113531 🔝Call Girls Aminabad Lucknow best Night Fun service
CALL ON ➥8923113531 🔝Call Girls Aminabad Lucknow best Night Fun serviceCALL ON ➥8923113531 🔝Call Girls Aminabad Lucknow best Night Fun service
CALL ON ➥8923113531 🔝Call Girls Aminabad Lucknow best Night Fun service
 
Kindergarten Assessment Questions Via LessonUp
Kindergarten Assessment Questions Via LessonUpKindergarten Assessment Questions Via LessonUp
Kindergarten Assessment Questions Via LessonUp
 
Chapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdfChapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdf
 
How to Be Famous in your Field just visit our Site
How to Be Famous in your Field just visit our SiteHow to Be Famous in your Field just visit our Site
How to Be Famous in your Field just visit our Site
 
Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance VVIP 🍎 SER...
Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance  VVIP 🍎 SER...Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance  VVIP 🍎 SER...
Call Girls Service Mukherjee Nagar @9999965857 Delhi 🫦 No Advance VVIP 🍎 SER...
 
young call girls in Vivek Vihar🔝 9953056974 🔝 Delhi escort Service
young call girls in Vivek Vihar🔝 9953056974 🔝 Delhi escort Serviceyoung call girls in Vivek Vihar🔝 9953056974 🔝 Delhi escort Service
young call girls in Vivek Vihar🔝 9953056974 🔝 Delhi escort Service
 
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
VIP Call Girls Service Kukatpally Hyderabad Call +91-8250192130
 
VIP Russian Call Girls in Gorakhpur Deepika 8250192130 Independent Escort Ser...
VIP Russian Call Girls in Gorakhpur Deepika 8250192130 Independent Escort Ser...VIP Russian Call Girls in Gorakhpur Deepika 8250192130 Independent Escort Ser...
VIP Russian Call Girls in Gorakhpur Deepika 8250192130 Independent Escort Ser...
 
SD_The MATATAG Curriculum Training Design.pptx
SD_The MATATAG Curriculum Training Design.pptxSD_The MATATAG Curriculum Training Design.pptx
SD_The MATATAG Curriculum Training Design.pptx
 
Bus tracking.pptx ,,,,,,,,,,,,,,,,,,,,,,,,,,
Bus tracking.pptx ,,,,,,,,,,,,,,,,,,,,,,,,,,Bus tracking.pptx ,,,,,,,,,,,,,,,,,,,,,,,,,,
Bus tracking.pptx ,,,,,,,,,,,,,,,,,,,,,,,,,,
 

MVC architecture in software programming for interactive apps

  • 2. 2 Give someone a program, you frustrate them for a day; teach them how to program, you frustrate them for a lifetime. — David Leinweber
  • 3. Model View Controller Model-View-Controller  Architecture for interactive apps • introduced by Smalltalk developers at PARC  Partitions application so that it is • scalable • maintainable
  • 5. 5 The Model  Most programs are supposed to do work, not just be “another pretty face” • but there are some exceptions • useful programs existed long before GUIs  The Model is the part that does the work--it models the actual problem being solved  The Model should be independent of both the Controller and the View • But it provides services (methods) for them to use  Independence gives flexibility, robustness Model View Controller
  • 6. 6 The View  Typically, the user has to be able to see, or view, what the program is doing  The View shows what the Model is doing • The View is a passive observer; it should not affect the model  The Model should be independent of the View, but (but it can provide access methods)  The View should not display what the Controller thinks is happening Model View Controller
  • 7. 7 The Controller  The Controller decides what the model is to do  Often, the user is put in control by means of a GUI • in this case, the GUI and the Controller are often the same  The Controller and the Model can almost always be separated (what to do versus how to do it)  The design of the Controller depends on the Model  The Model should not depend on the Controller Model View Controller
  • 8. Controller Communication  Communicates with view • determines which objects are being manipulated  e.g., which object was selected with mouse click  Calls model methods to make changes • model makes change and notifies views to update Model View Controller
  • 9. Advantages  Input processing is separated from output processing.  Controllers can be interchanged, allowing different user interaction modes.  Multiple views of the model can be supported easily.
  • 10. Other ways  Combining Controller and View • Small programs • May be highly interdependent • Never mix model Model View Controller
  • 11. Other Ways • No Model-View interaction • All interaction happens through controller • Controller talks to Model and View • Your project Model View Controller
  • 12. Why MVC?  Provides a logical structure for heavily interactive system  Adheres to good engineering design principles and practices • Information hiding, less coupling, simplicity, etc. • Delegated control style
  • 13. Why MVC?  Combining MVC into one class or using global variables will not scale. Why? • model may have more than one view  each different & needing update on model changes  Separation eases maintenance. Why? • easy to add a new view later  may need new model info, but old views still work • can change a view later  e.g., draw shapes in 3-d • recall that the view handles selection
  • 14. What’s the point?  It’s just plain easier • (even if it doesn’t look it)!  Studies show that most introductory CS college students tend to clump a UI program into one big monolithic main class  Unfamiliarity stems from student tendency to program according to styles presented in textbooks and not being introduced to design principles early