MVC / MVP - University of Waterloo · REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE Compound...
Transcript of MVC / MVP - University of Waterloo · REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE Compound...
![Page 1: MVC / MVP - University of Waterloo · REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE Compound Pattern ‣ MVC (and other similar patterns) rely upon several more basic design patterns](https://reader031.fdocuments.net/reader031/viewer/2022022019/5b98d6b809d3f2b16c8c8a54/html5/thumbnails/1.jpg)
Material and some slide content from: - Krzysztof Czarnecki - Ian Sommerville - Head First Design Patterns
MVC / MVP Reid Holmes
[Image from: http://merroun.wordpress.com/2012/03/28/mvvm-mvp-and-mvc-software-patterns-againts-3-layered-architecture/ ]
![Page 2: MVC / MVP - University of Waterloo · REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE Compound Pattern ‣ MVC (and other similar patterns) rely upon several more basic design patterns](https://reader031.fdocuments.net/reader031/viewer/2022022019/5b98d6b809d3f2b16c8c8a54/html5/thumbnails/2.jpg)
REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE
Background‣ MVC started w/ Smalltalk-80
‣ Java UI frameworks & EJBs reignited interest
‣ Also prevalent in GWT and .NET development
![Page 3: MVC / MVP - University of Waterloo · REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE Compound Pattern ‣ MVC (and other similar patterns) rely upon several more basic design patterns](https://reader031.fdocuments.net/reader031/viewer/2022022019/5b98d6b809d3f2b16c8c8a54/html5/thumbnails/3.jpg)
REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE
MVC Motivation‣ UI changes more frequently than business logic‣ e.g., layout changes (esp. in web applications)
‣ The same data is often displayed in different ways‣ e.g., table view vs chart view‣ The same business logic can drive both
‣ Designers and developers are different people‣ Testing UI code is difficult and expensive‣ Main Goal: Decouple models and views‣ Increase maintainability/testability of system‣ Permit new views to be developed
![Page 4: MVC / MVP - University of Waterloo · REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE Compound Pattern ‣ MVC (and other similar patterns) rely upon several more basic design patterns](https://reader031.fdocuments.net/reader031/viewer/2022022019/5b98d6b809d3f2b16c8c8a54/html5/thumbnails/4.jpg)
REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE
Model‣ Contains application data
‣ This is often persisted to a backing store
‣ Does not know how to present itself
‣ Is domain independent
‣ Are often Subjects in the Observer pattern
![Page 5: MVC / MVP - University of Waterloo · REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE Compound Pattern ‣ MVC (and other similar patterns) rely upon several more basic design patterns](https://reader031.fdocuments.net/reader031/viewer/2022022019/5b98d6b809d3f2b16c8c8a54/html5/thumbnails/5.jpg)
REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE
View‣ Presents the model to the user
‣ Allows the user to manipulate the data
‣ Does not store data
‣ Is configurable to display different data
![Page 6: MVC / MVP - University of Waterloo · REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE Compound Pattern ‣ MVC (and other similar patterns) rely upon several more basic design patterns](https://reader031.fdocuments.net/reader031/viewer/2022022019/5b98d6b809d3f2b16c8c8a54/html5/thumbnails/6.jpg)
REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE
Controller‣ Glues Model and View together
‣ Updates the view when the Model changes
‣ Updates the model when the user manipulates the view
‣ Houses the application logic
‣ Loose coupling between Model and others
‣ View tightly cohesive with its Controller
![Page 7: MVC / MVP - University of Waterloo · REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE Compound Pattern ‣ MVC (and other similar patterns) rely upon several more basic design patterns](https://reader031.fdocuments.net/reader031/viewer/2022022019/5b98d6b809d3f2b16c8c8a54/html5/thumbnails/7.jpg)
REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE
Abstract topologyController
View
Model
<<updates state>>
<<changes>>
<<retrieves state>>
<<notifies of state changes>>
1
2
34
![Page 8: MVC / MVP - University of Waterloo · REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE Compound Pattern ‣ MVC (and other similar patterns) rely upon several more basic design patterns](https://reader031.fdocuments.net/reader031/viewer/2022022019/5b98d6b809d3f2b16c8c8a54/html5/thumbnails/8.jpg)
REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE
Concrete topology
ViewController
MobileView
Model
BrowserView TabletView MockView
ViewController c = new ViewController(); IView v = c.createView(c); IModel m = c.loadModel(); m.addListener(v);
[Dependency injection would remove explicit new in c.createView()]
![Page 9: MVC / MVP - University of Waterloo · REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE Compound Pattern ‣ MVC (and other similar patterns) rely upon several more basic design patterns](https://reader031.fdocuments.net/reader031/viewer/2022022019/5b98d6b809d3f2b16c8c8a54/html5/thumbnails/9.jpg)
REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE
Interaction mechanism‣ User interacts with the UI (View)
‣ UI (View) notifies controller of changes
‣ Controller handles notifications, processing them into actions that can be performed on the model
‣ Controller modifies the model as required
‣ If the model changes, it fires modification events
‣ The view responds to the modification events
![Page 10: MVC / MVP - University of Waterloo · REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE Compound Pattern ‣ MVC (and other similar patterns) rely upon several more basic design patterns](https://reader031.fdocuments.net/reader031/viewer/2022022019/5b98d6b809d3f2b16c8c8a54/html5/thumbnails/10.jpg)
REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE
Benefits and tradeoffs‣ Pro:‣ Decouple view from model‣ Support multiple views [collaborative views]‣ Maintainability [add new views]‣ Split teams [relieve critical path]
‣ Testability [reduce UI testing]‣ Con:‣ Complexity [indirection, events]‣ Efficiency [frequent updates, large models]
![Page 11: MVC / MVP - University of Waterloo · REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE Compound Pattern ‣ MVC (and other similar patterns) rely upon several more basic design patterns](https://reader031.fdocuments.net/reader031/viewer/2022022019/5b98d6b809d3f2b16c8c8a54/html5/thumbnails/11.jpg)
REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE
Compound Pattern‣ MVC (and other similar patterns) rely upon several
more basic design patterns
‣ In MVC:
‣ View (strategy) / Controller (context) leverage the strategy pattern
‣ View is often uses a composite pattern (for nested views)
‣ View (observer) / Model (subject) interact through the observer pattern
‣ Other meta-patterns rely upon similar lower-level design patterns
![Page 12: MVC / MVP - University of Waterloo · REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE Compound Pattern ‣ MVC (and other similar patterns) rely upon several more basic design patterns](https://reader031.fdocuments.net/reader031/viewer/2022022019/5b98d6b809d3f2b16c8c8a54/html5/thumbnails/12.jpg)
REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE
MVP Motivation‣ Take MVC a tiny bit further:
‣ Enhance testability
‣ Further separate Designers from Developers
‣ Leveraged by both GWT and .NET
![Page 13: MVC / MVP - University of Waterloo · REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE Compound Pattern ‣ MVC (and other similar patterns) rely upon several more basic design patterns](https://reader031.fdocuments.net/reader031/viewer/2022022019/5b98d6b809d3f2b16c8c8a54/html5/thumbnails/13.jpg)
REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE
Model‣ Contains application data
‣ This is often persisted to a backing store
‣ Does not know how to present itself
‣ Is domain independent
‣ Often fires events to an Event Bus
![Page 14: MVC / MVP - University of Waterloo · REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE Compound Pattern ‣ MVC (and other similar patterns) rely upon several more basic design patterns](https://reader031.fdocuments.net/reader031/viewer/2022022019/5b98d6b809d3f2b16c8c8a54/html5/thumbnails/14.jpg)
REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE
View‣ Thin UI front-end for controller
‣ Does not store data
‣ Can be interchanged easily
‣ Does not ever see or manipulate Model objects
‣ Only interacts with primitives
‣ e.g., (setUser(String) instead of setUser(User))
![Page 15: MVC / MVP - University of Waterloo · REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE Compound Pattern ‣ MVC (and other similar patterns) rely upon several more basic design patterns](https://reader031.fdocuments.net/reader031/viewer/2022022019/5b98d6b809d3f2b16c8c8a54/html5/thumbnails/15.jpg)
REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE
Controller‣ Glues Model and View together
‣ Updates the view when the Model changes
‣ Updates the model when the user manipulates the view
‣ Houses the application logic
![Page 16: MVC / MVP - University of Waterloo · REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE Compound Pattern ‣ MVC (and other similar patterns) rely upon several more basic design patterns](https://reader031.fdocuments.net/reader031/viewer/2022022019/5b98d6b809d3f2b16c8c8a54/html5/thumbnails/16.jpg)
REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE
MVP Topology
Presenter
View
Model
<<updates, retrieves state>>
<<notifies>> <<refresh>>
<<notifies of state changes>>
Event Bus
1
2 3
4
![Page 17: MVC / MVP - University of Waterloo · REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE Compound Pattern ‣ MVC (and other similar patterns) rely upon several more basic design patterns](https://reader031.fdocuments.net/reader031/viewer/2022022019/5b98d6b809d3f2b16c8c8a54/html5/thumbnails/17.jpg)
REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE
Concrete MVP Topology
ViewController
MobileView
Model
BrowserView MockView
App Controller
OutlineController
OutlineView MockOutline
<<notifies of state changes>>
Event Bus
App Controller can build and tear down controllers.
![Page 18: MVC / MVP - University of Waterloo · REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE Compound Pattern ‣ MVC (and other similar patterns) rely upon several more basic design patterns](https://reader031.fdocuments.net/reader031/viewer/2022022019/5b98d6b809d3f2b16c8c8a54/html5/thumbnails/18.jpg)
REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE
Concrete Examplemain(String[] args) {
AppController ac = new AppController();IModel m = ac.setModel(Persist.loadModel());m.addListener(ac);ac.showMain();
}
AppController::showMain() { ViewController vc = new ViewController(this);
v.showMain();}ViewController::ViewController(AppController ac) {
_controller = ac;_controller.getModel().addListener(vc);IView v = createView();v.setPresenter();
}
[Dependency injection should be used in ViewController.createView()]
public interface IView {public void setPresenter(Presenter p);public void showMain();
public interface Presenter {void onCancel();void onAction(String action);public IView createView();
}}
Views and presenters are tightly bound:
![Page 19: MVC / MVP - University of Waterloo · REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE Compound Pattern ‣ MVC (and other similar patterns) rely upon several more basic design patterns](https://reader031.fdocuments.net/reader031/viewer/2022022019/5b98d6b809d3f2b16c8c8a54/html5/thumbnails/19.jpg)
REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE
Benefits and tradeoffs‣ Same as MVC with improved:‣ Decoupling of views from the model‣ Split teams [relieve critical path]
‣ Testability [reduce UI testing]‣ A little less complex than MVC [fewer events]
![Page 20: MVC / MVP - University of Waterloo · REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE Compound Pattern ‣ MVC (and other similar patterns) rely upon several more basic design patterns](https://reader031.fdocuments.net/reader031/viewer/2022022019/5b98d6b809d3f2b16c8c8a54/html5/thumbnails/20.jpg)
REID HOLMES - SE2: SOFTWARE DESIGN & ARCHITECTURE
Architecture/Design Review Meeting‣ Don’t think of this as an oral exam‣ Start with 5 minute presentation (board only)‣ Followed by 25 minute discussion‣ Evaluating the product, not the producer‣ Be prepared!‣ Goal:‣ Ensure system meets proposal‣ Check consistency of design with architecture‣ Talk about design decisions/justification‣ Discuss support for future system evolution