Design Patterns (Week 7, part #2) Flashcards
What are the separation of concerns in web computing?
HTML - structure / organisation of content
CSS - presentation
Javascript - functionally
What is ‘separation of concerns’?
1) A design principle for separating software code into distinct ‘sections’, such that each section addresses a separate concern.
2) A strategy for handling complexity
- -> Of the problem
- -> Of the solution e.g. software code
What can we reuse to connect views and data?
models and views
What are the different variations on the theme of Model-View-{Bridge}
1) Model View Controller (MVC)
2) Model View Adaptor (MVA)
3) Model View Presenter (MVP)
4) Model View ViewModel (MVVM)
Define the components of MVC
✨✨✨
Model - directly manages data, logic and rules. Expresses behaviour of problem domain
View - output representation of information
Controller - accepts input and converts it to commands for the model or view
What is MVVM?
✨✨✨
Model-View-ViewModel
ViewModel is an <strong>abstraction of the view, exposing public properties and commands.</strong>
The binder mediates communication between the view and the data binder
Draw an annotated diagram of MVC
See diagrams doc #3
Draw an annotated diagram for MVVM
See diagrams doc #4
In terms of MVC, if business logic gets complex, where do we put it?
In state
Explain the observer pattern in terms of the diagram #5
Screen = Presentation:
User sees the quantity they entered and the calculated total
–> Specific to the UI
–> Independent of Domain
Session state = Model Quantity stored in state Observer watches the quantity and pushes new total to interface --> Independent of UI --> Specific to the Domain
Record state = Data
What are the PROs of MVC?
✨✨✨
+ Multiple views
+ Synchronized views
+ Pluggable views and controllers
+ Exchangeable look and feel
What are the CONs of MVC? (5)
✨✨✨
- Complexity
- Can have lots of updates/notifications
- Links between controller and view
- Coupling of controller/view and model
- Mix of platform-dependent/independent code within controller and view (porting)
Compare MCV and MVP using two diagrams to illustrate the differences
See diagram doc #6
Explain the difference between MVC and MVP
✨✨✨
1) MVC is Model-View-Controller
<strong>view is stateless with not much logic.</strong>
<strong>Renders a representation of model(s)</strong> when called by controller or triggered by model.
<strong>Gets data directly from model.</strong>
2) MVP is Model-View-Presenter
<strong>view</strong> can be <strong>completely isolated from model</strong> and <strong>rendering data from presenter</strong>, or can be a MVC view, or somewhere in between (e.g. view separate from model)
Give diagram for MVP
See diagram doc #6 & #7
What should we use design patterns for?
1) use divide and conquer to develop and integrate
2) separate out concerns and make bridges –> 3-teir architecture of browser, server and data store
–> MV* as a design concept
Explain the Model component of MVC
1) directly manages data, logic and rules.
2) Expresses behaviour of problem domain
3) updates view,
4) Stores data that is retrieved according to commands from the controller and displayed in the view
Explain the View in MVC
✨✨✨
1) output representation of information
2) Generates new output to the user based on changes in the model.
Explain the Controller in MVC
1) accepts input and converts it to commands for the model or view
2) handles input,
3) updates model
4) model’s state (e.g., editing a document). It can also send commands to its associated view to change the view’s presentation of the model (e.g., scrolling through a document, movement of document)
What are the three key ideas behind MCV?
✨✨✨
1) have bridge connection
2) separate model and view
3) use framework to implement bridge
What are the components of Model View ViewModel (MVVM)?
1) Model
2) View
3) ViewModel
4) Binder
Explain the Model of MVVM
✨✨✨
1) Either to a domain model, which represents real state content (an object-oriented approach), or to a data access layer, which represents content (a data-centric approach).
2) what to store in DB or have on server
Explain the View of MVVM
✨✨✨
1) The view is the structure, layout, and appearance of what a user sees on the screen (HTML & CSS)
2) Vue -> JS and templates
Explain the ViewModel of MVVM
✨✨✨
1) An <strong>abstraction of the view exposing public properties and commands.</strong>
Instead of the controller of the MVC pattern, or the presenter of the MVP pattern, MVVM has a binder.
2) In the ViewModel, the binder mediates communication between the view and the data binder.
The ViewModel has been described as a <strong>state of the data in the model</strong>
3) binding data for rendering
4) subset of view
Explain the Binder of MVVM
1) Decalarative data and command-binding are implicit in the MVVM pattern.
2) thing Vue.js implements
3) In ViewModel, the binder mediates communication between the view and the data binder.
How does MVVM apply to Vue.js?
✨✨✨
Technically, Vue.js is focused on the ViewModel layer of the MVVM pattern.
It connects the View and the Model via two way data bindings.
Actual DOM manipulations and output formatting are abstracted away into Directives and Filters
