![Page 1: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/1.jpg)
MV* Design Patterns
Alexander Nelson
August 25, 2017
University of Arkansas - Department of Computer Science and Computer Engineering
![Page 2: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/2.jpg)
Reminders
![Page 3: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/3.jpg)
Course Mechanics
Course Webpage:
you.uark.edu/ahnelson/cmpe-4623-mobile-programming/
Syllabus is on the website.
Course Communication:
https://csce4623-uark.slack.com/
This slack channel is to be the primary mode of communication
![Page 4: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/4.jpg)
Projects
Project 1 will go out Wednesday
Choose a project idea and team for the final project ASAP
First project report is due September 15th
![Page 5: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/5.jpg)
Multitier Architectures
![Page 6: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/6.jpg)
What is a multitier architecture?
Physical separation of data concerns
Examples:
• Presentation (UI)
• Application Processing
• Data Management
![Page 7: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/7.jpg)
Why split into layers?
OSI Model
![Page 8: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/8.jpg)
Why split into layers?
OSI Model
Separation of concerns!
A change to one layer can have
no bearing on the rest of the
model
e.g. Fiberoptic instead of Coax
at the PHY layer
![Page 9: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/9.jpg)
How does this apply to mobile?
Application designers often want separation of UI and logic!
Three tier architecture
![Page 10: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/10.jpg)
These software engineering abstractions relate
to the MV* architectures that are common in
mobile computing systems
![Page 11: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/11.jpg)
Model View Controller (MVC)
![Page 12: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/12.jpg)
Model View Controller
1
1Krasner 1988
![Page 13: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/13.jpg)
Definitions
Model: Models are those components of the system application
that actually do the work
View: Display aspects of the models
Controller: Used to send messages to the model, provide interface
between model, views, and UI devices.
![Page 14: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/14.jpg)
Models
Models enable encapsulation
Model encapsulates all data as well as methods to change them
• Can change the underlying data structures without having to
recreate the model
• Can create multiple views and controllers without
reimplementing the underlying model
Encapsulation enables scalability!
![Page 15: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/15.jpg)
Models
Other advantages of models:
• Persistence – Model can pull data from a more permanent
datastore (think local or cloud databases)
• Sharing – Models enable flexibility to share among multiple
users (All manipulating same data instead of local copies)
![Page 16: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/16.jpg)
Control
What does MVC control path look like?
• Views and controllers have exactly 1 model
• Model has 1 or more views and controllers associated with it
• Views and controllers need to know about model explicitly
• Models should not know about their views and controllers
![Page 17: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/17.jpg)
Changes
Change in model is triggered by controller connecting user action
to a message sent to the model.
Reflected in all views, not just the view associated with the
controller which initiated the change
![Page 18: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/18.jpg)
Dependencies
Views and controllers of a model are registered as dependents of
the model
• Informed whenever aspect of the model has changed
(subscriber?)
• Message passed, with parameters so that there are several
types of model change messages
• View and controllers respond to the appropriate model
changes
![Page 19: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/19.jpg)
Interaction Cycle
User takes input action, and controller notifies model to change
Model carries out prescribed operations
• possibly change state
• broadcasts to dependents that it has changed
Views can inquire about new state
• Update display if needed
Controllers change their method of interaction depending on new
state of the mode
![Page 20: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/20.jpg)
Model View Controller
![Page 21: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/21.jpg)
Model View Presenter (MVP)
![Page 22: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/22.jpg)
Model View Presenter
2
2Potel 1996
![Page 23: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/23.jpg)
Goals
Two fundamental concepts to a program:
1. Data Management
2. User Interface
These two concepts embody two basic design questions:
1. How do I manage my data?
2. How does my user interact with my data?
![Page 24: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/24.jpg)
Goals
Two fundamental concepts to a program:
1. Data Management
2. User Interface
These two concepts embody two basic design questions:
1. How do I manage my data?
2. How does my user interact with my data?
![Page 25: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/25.jpg)
MVP addresses these by formalizing a
distinction between the model and the
viewcontroller (now called presentation)
![Page 26: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/26.jpg)
Data Management Questions
![Page 27: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/27.jpg)
Data Management Questions
What is my data?
This question is the same as the model in MVC
How do I specify my data?
Selections
How do I change my data?
Commands
![Page 28: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/28.jpg)
Selections and Commands
Selections are operations which allow the ability to choose a
certain set from the data
Or, more formally...
Selection S ⊂ D where D is the set of all data
Commands are operations on the set of data
Or, more formally
Command C acts on Selection S , yielding Selection S ′
![Page 29: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/29.jpg)
Selections and Commands
![Page 30: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/30.jpg)
User Interface Questions
![Page 31: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/31.jpg)
User Interface Questions
How do I display my data?
This is the same as the View from MVC
How do events map into changes in my data?
Interactors
How do I put it all together?
Presenter
![Page 32: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/32.jpg)
Interactors and Presenters
Interactors account for user interactions
e.g. Mouse tracking, clicking, menu selection, keyboard,
specification of a selection, etc...
The Presenter is similar to the Controller of MVC, but with added
functionality
The Presenter is responsible for:
• The traditional main/event loop
• Create models, selections, commands, views, and interactors
• Enable business logic that directs what happens and when
![Page 33: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/33.jpg)
Interactors and Presenters
![Page 34: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/34.jpg)
MVP - Put all together
![Page 35: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/35.jpg)
Model View ViewModel (MVVM)
![Page 36: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/36.jpg)
Model View ViewModel
3
3https://msdn.microsoft.com/en-us/library/hh848246.aspx
![Page 37: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/37.jpg)
View
Responsible for defining structure, layout, and appearance of what
user sees
Ideally defined purely with XAML (or XML)
Limited code which does not contain business logic
![Page 38: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/38.jpg)
Model
Implementation of applications domain model
Includes business and validation logic
Includes repositories, business objects, data transfer objects, etc...
![Page 39: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/39.jpg)
ViewModel
Intermediary between view and model
Responsible for handling view logic
Interacts with model by invoking methods in model classes
Provides data from model in a form that the view can use
![Page 40: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/40.jpg)
Benefits
Developers and designers can work more independently and
concurrently on components
• Designers can concentrate on the view using sample data
• Developers can work on the view model and model
components
Create unit tests for the view model and the model without using
the view
![Page 41: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/41.jpg)
Benefits
Easy to redesign the UI of the application without touching the
code
• View is implemented entirely in XML
• New versions of the view should work with an existing view
model
Enables backwards compatibility
• Often changing existing models is risky. ViewModel acts as an
adapter to views
![Page 42: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/42.jpg)
What pattern should I use?
![Page 43: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/43.jpg)
What pattern should I use?
There are lots of opinions
https://academy.realm.io/posts/eric-maxwell-mvc-mvp-and-mvvm-
on-android/
Short Answer:
Any are sufficient for this class
None of the projects (except maybe the final) are big enough to
necessitate separation of concerns
However...
MVC is being replaced by MVVM and MVP in many live dev
scenarios
![Page 44: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/44.jpg)
What pattern should I use?
There are lots of opinions
https://academy.realm.io/posts/eric-maxwell-mvc-mvp-and-mvvm-
on-android/
Short Answer:
Any are sufficient for this class
None of the projects (except maybe the final) are big enough to
necessitate separation of concerns
However...
MVC is being replaced by MVVM and MVP in many live dev
scenarios
![Page 45: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/45.jpg)
What pattern should I use?
There are lots of opinions
https://academy.realm.io/posts/eric-maxwell-mvc-mvp-and-mvvm-
on-android/
Short Answer:
Any are sufficient for this class
None of the projects (except maybe the final) are big enough to
necessitate separation of concerns
However...
MVC is being replaced by MVVM and MVP in many live dev
scenarios
![Page 46: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/46.jpg)
You should know is how to separate concerns
in code with hierarchies
![Page 47: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/47.jpg)
Readings
![Page 48: MV* Design Patternscsce.uark.edu/~ahnelson/CSCE4623/lectures/lecture4.pdfMVC is being replaced by MVVM and MVP in many live dev scenarios. You should know is how to separate concerns](https://reader030.vdocuments.mx/reader030/viewer/2022040304/5e969b8e9aa94f5a0a38a31f/html5/thumbnails/48.jpg)
Reading
MVC - Krasner (1988)
MVP - Potel (1996)
Google Samples MVP and MVVM (Just know that this exists)
Read these by Monday, and be prepared to discuss