Design Patterns (Week 7, part #2)

Question 1

What are the separation of concerns in web computing?

Answer 1

HTML - structure / organisation of content

CSS - presentation

Javascript - functionally

Question 2

What is ‘separation of concerns’?

Answer 2

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

Question 3

What can we reuse to connect views and data?

Answer 3

models and views

Question 4

What are the different variations on the theme of Model-View-{Bridge}

Answer 4

1) Model View Controller (MVC)
2) Model View Adaptor (MVA)
3) Model View Presenter (MVP)
4) Model View ViewModel (MVVM)

Question 5

Define the components of MVC

✨✨✨

Answer 5

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

Question 6

What is MVVM?

✨✨✨

Answer 6

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

Question 7

Draw an annotated diagram of MVC

Answer 7

See diagrams doc #3

Question 8

Draw an annotated diagram for MVVM

Answer 8

See diagrams doc #4

Question 9

In terms of MVC, if business logic gets complex, where do we put it?

Answer 9

In state

Question 10

Explain the observer pattern in terms of the diagram #5

Answer 10

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

Question 11

What are the PROs of MVC?

✨✨✨

Answer 11

+ Multiple views

+ Synchronized views

+ Pluggable views and controllers

+ Exchangeable look and feel

Question 12

What are the CONs of MVC? (5)

✨✨✨

Answer 12

• 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)

Question 13

Compare MCV and MVP using two diagrams to illustrate the differences

Answer 13

See diagram doc #6

Question 14

Explain the difference between MVC and MVP

✨✨✨

Answer 14

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)

Question 15

Give diagram for MVP

Answer 15

See diagram doc #6 & #7

Question 16

What should we use design patterns for?

Answer 16

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

Question 17

Explain the Model component of MVC

Answer 17

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

Question 18

Explain the View in MVC

✨✨✨

Answer 18

1) output representation of information

2) Generates new output to the user based on changes in the model.

Question 19

Explain the Controller in MVC

Answer 19

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)

Question 20

What are the three key ideas behind MCV?

✨✨✨

Answer 20

1) have bridge connection
2) separate model and view
3) use framework to implement bridge

Question 21

What are the components of Model View ViewModel (MVVM)?

Answer 21

1) Model
2) View
3) ViewModel
4) Binder

Question 22

Explain the Model of MVVM

✨✨✨

Answer 22

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

Question 23

Explain the View of MVVM

✨✨✨

Answer 23

1) The view is the structure, layout, and appearance of what a user sees on the screen (HTML & CSS)
2) Vue -> JS and templates

Question 24

Explain the ViewModel of MVVM

✨✨✨

Answer 24

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

Question 25

Explain the Binder of MVVM

Answer 25

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.

Question 26

How does MVVM apply to Vue.js?

✨✨✨

Answer 26

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