Embed Size (px)
Citation preview
© 2015 Avanade Inc. All Rights Reserved.
1
Model–view–controller
(MVC)
Michael van Rooijen
© 2015 Avanade Inc. All Rights Reserved.
<Restricted> See Avanade’s Data Classification and Protection Standard
Agenda
2
• Wat is Model–view–controller (MVC)?
• De Theorie
• In de Praktijk
• UI patterns in de praktijk
© 2015 Avanade Inc. All Rights Reserved.
3
Wat is Model–view–controller?
© 2015 Avanade Inc. All Rights Reserved.
<Restricted> See Avanade’s Data Classification and Protection Standard
4
MODEL
CONTROLLERVIEW
© 2015 Avanade Inc. All Rights Reserved.
5
De Theorie
© 2015 Avanade Inc. All Rights Reserved.
<Restricted> See Avanade’s Data Classification and Protection Standard
6
Wat is MVC?
Model–view–controller (MVC) is a software
architectural pattern for implementing user
interfaces. It divides a given software
application into three interconnected parts, so
as to separate internal representations of
information from the ways that information is
presented to or accepted from the user.
-Wikipedia-
… controller receives user input
and makes calls to model
objects and the view to perform
appropriate actions.
© 2015 Avanade Inc. All Rights Reserved.
<Restricted> See Avanade’s Data Classification and Protection Standard
7
• (Correct) toepassen van patterns resulteert in hogere kwaliteit software
• Hogere kwaliteit = sneller / meer opleveren
MVC – Waarom?
© 2015 Avanade Inc. All Rights Reserved.
<Restricted> See Avanade’s Data Classification and Protection Standard
8
MVC – Waarom?
Development snelheid van een team dat hogekwaliteit software maakt
© 2015 Avanade Inc. All Rights Reserved.
<Restricted> See Avanade’s Data Classification and Protection Standard
9
MVC – Waarom?
Development snelheid van een team dat lagekwaliteit software maakt
© 2015 Avanade Inc. All Rights Reserved.
<Restricted> See Avanade’s Data Classification and Protection Standard
10
Wat is software kwaliteit?
MVC – Waarom?
Don’t Repeat Yourself
SOLID
Separation of concerns
Hollywood principle
YAGNIPrinciple of least knowledge
KISS
Principles
© 2015 Avanade Inc. All Rights Reserved.
<Restricted> See Avanade’s Data Classification and Protection Standard
11
Wat is software kwaliteit?
MVC – Waarom?
© 2015 Avanade Inc. All Rights Reserved.
<Restricted> See Avanade’s Data Classification and Protection Standard
12
MVC – Waarom?
Modularity
Veranderingen in een
component hebben minimale
impact op andere componenten
© 2015 Avanade Inc. All Rights Reserved.
<Restricted> See Avanade’s Data Classification and Protection Standard
13
MVC – Waarom?
Modularity Reusability
Het gemak waarmee een
component in een andere
context gebruikt kan worden
© 2015 Avanade Inc. All Rights Reserved.
<Restricted> See Avanade’s Data Classification and Protection Standard
14
MVC – Waarom?
Modularity Reusability
Modifiability
Mate waarin een component
effectief en efficient aangepast
kan worden zonder problemen
te introduceren
© 2015 Avanade Inc. All Rights Reserved.
<Restricted> See Avanade’s Data Classification and Protection Standard
15
MVC – Waarom?
Modularity Reusability
Modifiability Testability
Mate waarin een component
effectief en efficient kan worden
getest
© 2015 Avanade Inc. All Rights Reserved.
<Restricted> See Avanade’s Data Classification and Protection Standard
16
• Belangrijkste concept in MVC wordt Separated Presentation
genoemd
– Scheiding tussen het Model dat de werkelijkheid (het domein)
beschrijft en de View die de visuele weergave is van dat
domein
• Daarin bevat de View wel referenties naar het Model, maar
andersom niet. Zo kunnen er meerdere visuele weergaven van
het Model zijn, zonder dat het Model daarvan hoeft te weten.
• Om de View nog verder herbruikbaar te maken is het verwerken
van de gebruikersinteractie met het scherm in de Controller
ondergebracht. Deze verantwoordelijkheden zijn vaak breder
toepasbaar dan in een enkele view, waardoor ze goed op hun
plek zijn in een losse controller. Deze interactie resulteert vaak in
de weergave van een ander scherm en/of een verandering van
het Model.
MVC – Waarom: In theorie
© 2015 Avanade Inc. All Rights Reserved.
<Restricted> See Avanade’s Data Classification and Protection Standard
17
MVC – A compound pattern
© 2015 Avanade Inc. All Rights Reserved.
<Restricted> See Avanade’s Data Classification and Protection Standard
18
• Observer pattern: Het Model maintains a list of its dependents, called observers, and notifies them automatically of any state changes
• Strategy pattern: Behavior can be selected at runtime
• Composite pattern: a composite is an object designed as a composition of one-or-more similar objects, all exhibiting similar functionality.
MVC – A compound pattern
© 2015 Avanade Inc. All Rights Reserved.
19
In de praktijk
© 2015 Avanade Inc. All Rights Reserved.
<Restricted> See Avanade’s Data Classification and Protection Standard
20
Populariteit van MVC
© 2015 Avanade Inc. All Rights Reserved.
<Restricted> See Avanade’s Data Classification and Protection Standard
21
Complexe web applicaties
© 2015 Avanade Inc. All Rights Reserved.
<Restricted> See Avanade’s Data Classification and Protection Standard
22
Complexe Apps
© 2015 Avanade Inc. All Rights Reserved.
<Restricted> See Avanade’s Data Classification and Protection Standard
23
Cross-device
© 2015 Avanade Inc. All Rights Reserved.
<Restricted> See Avanade’s Data Classification and Protection Standard
24
Cross-device
© 2015 Avanade Inc. All Rights Reserved.
<Restricted> See Avanade’s Data Classification and Protection Standard
25
Cross-platform
© 2015 Avanade Inc. All Rights Reserved.
<Restricted> See Avanade’s Data Classification and Protection Standard
26
Cross-device
© 2015 Avanade Inc. All Rights Reserved.
<Restricted> See Avanade’s Data Classification and Protection Standard
27
Cross-device
Controller
Model
© 2015 Avanade Inc. All Rights Reserved.
28
UI patterns in de praktijk
© 2015 Avanade Inc. All Rights Reserved.
<Restricted> See Avanade’s Data Classification and Protection Standard
29
Evolutie van UI patterns
© 2015 Avanade Inc. All Rights Reserved.
<Restricted> See Avanade’s Data Classification and Protection Standard
30
MVC vs MVP vs MVVM
© 2015 Avanade Inc. All Rights Reserved.
<Restricted> See Avanade’s Data Classification and Protection Standard
31
Complexiteit van web User Interfaces neemt toe
© 2015 Avanade Inc. All Rights Reserved.
<Restricted> See Avanade’s Data Classification and Protection Standard
32
UI patterns en front-end frameworks in web applicaties
© 2015 Avanade Inc. All Rights Reserved.
<Restricted> See Avanade’s Data Classification and Protection Standard
33
Front-end framework overload
© 2015 Avanade Inc. All Rights Reserved.
<Restricted> See Avanade’s Data Classification and Protection Standard
34
AngularJS
© 2015 Avanade Inc. All Rights Reserved.
<Restricted> See Avanade’s Data Classification and Protection Standard
35
MVC in AngularJS
© 2015 Avanade Inc. All Rights Reserved.
<Restricted> See Avanade’s Data Classification and Protection Standard
36
Meervoudige toepassing MVC
© 2015 Avanade Inc. All Rights Reserved.
<Restricted> See Avanade’s Data Classification and Protection Standard
37
Meervoudige toepassing MVC
ModelController
Co
ntr
oll
er
Mo
del
Vie
iw
© 2015 Avanade Inc. All Rights Reserved.
<Restricted> See Avanade’s Data Classification and Protection Standard
38
Variaties van MVC – Apple iOS (Cocoa)
© 2015 Avanade Inc. All Rights Reserved.
<Restricted> See Avanade’s Data Classification and Protection Standard
39
• MVC pattern en vergelijkbare patterns als MVVM en MVP worden veelvuldig toegepast
• Het is van belang om exact te weten hoe de patterns werken, ook al zal je ze zelf vaak nietblanco toepassen
Key takeaways
