MVVM, de stap naar beheersbare WPF/Silverlight applicaties

 
30 december 2010

Als je net leert programmeren, is het fijn dat je snel up and running bent en resultaat boekt. Dit houdt je gemotiveerd om verder te gaan en de diepte in te duiken. Echter nu, een aantal jaar later, vind ik het jammer dat quick and dirty programmeren in de eerste programmeerstappen die men maakt met de paplepel wordt ingegoten. Het zijn immers gewoontes die je er later weer uit moet slopen om op een professionele manier software te kunnen maken.

Toen ik ooit begon met Winforms, was je snel op weg. Knopje op je formulier slepen, dubbelklikken en je zat in de code behind file meteen in de betreffende click-event handler. Daar kon je dan naar hartenlust je logica tikken en het werkte meteen. Toen ik hierna ASP leerde kon je eigenlijk nog steeds hetzelfde doen. Later, toen ik de wereld van WPF aan het verkennen was, ging dit ook op.

Toen ik op een gegeven moment ASP.Net MVC leerde kennen kwam ik met het MVC (Model View Controller) pattern in aanraking. Het duurde even voordat ik doorhad hoe dit werkte, en wat nou de toegevoegde waarde van dit design pattern was. Toen ik toekwam aan het het bouwen van grotere applicaties, waarbij het van belang wordt dat alle logica geautomatiseerd testbaar is, is de toegevoegde waarde snel duidelijk.

M-V-VM staat voor Model View ViewModel, een design pattern dat wordt gebruikt in combinatie met WPF (Windows Presentation Foundation) en Silverlight-applicaties. Het is een pattern dat heel erg lijkt op MVC en MVP (Model View Presenter). Het pattern realiseert een ontkoppeling van display, state en behaviour logica met betrekking tot de UI.

In het Model wordt de state en de behaviour van de data vastgelegd.
In het ViewModel wordt de state/behaviour van het model vertaald naar de state/behaviour die in een bepaalde view benodigd is. Dit is de plek waar aggregatie en transformatie kan plaatsvinden.
In de View wordt de visuele weergave van de door het ViewModel aangeboden datamodel vastgelegd. Ook bevat de view bindings naar commands. Dit zijn referenties naar de behaviours die worden geboden door het ViewModel.

Het speciale van het MVVM model is dat, in tegenstelling tot MVC en MVP, de view en het ViewModel elkaar niet kennen. De koppeling wordt gerealiseerd door de bindings van het WPF Framework. Door niet alleen de data, maar ook de interactielogica te databinden aan het ViewModel is het mogelijk een view te creëren welke geen code behind nodig heeft.

Omdat de view-laag geen “logica” bevat en het ViewModel de view-laag niet nodig heeft om gebruikt te kunnen worden opent dit de mogelijkheid om de functionaliteit te unittesten. De unittests kunnen net als een view direct inhaken op het ViewModel. Hiermee is de interactie met de UI te testen, een probleem dat altijd erg lastig te tackelen is.

Een van de andere voordelen is dat, door de ontkoppeling van de view, het creëren van het ontwerp voor de UI makkelijker uit te besteden is aan een (interaction) designer. Hiermee kunnen deze werkzaamheden in principe parallel plaatsvinden en kan er tijdswinst geboekt worden.

Leuk natuurlijk dat ik enthousiast kan worden over de toepassing van een nieuw verkend design pattern. Belangrijker is de vraag of MVVM de gouden hamer waar we elk WPF/Silverlight project mee moeten gaan bouwen.

Een van de duidelijke voordelen van de “quick and dirty” methode is natuurlijk dat het “quick” is.
De MVVM methode heeft een klein beetje scaffolding nodig, wat je bij kleine projectjes als onnodige overhead zou kunnen zien. Verder heeft het databinden van de UI ook nadelen. Het wordt moeilijker om te vinden waar “het” nou precies gebeurt.
De tooling heeft moeite, net als bij bijvoorbeeld dependency injection, om door losse koppelingen heen te “navigeren”. Dit probleem komt deels voort uit de XAML editor waar de autocompletion nog niet lekker in werkt en er nog teveel met strings gewerkt en daarom een voordeel van typechecking deels weg lijkt te vallen. Echter dit is een algemeen probleem met betrekking tot WPF databinding en niet direct gerelateerd aan MVVM.

Conclusie is dat MVVM een goed design pattern is om in je WPF applicatie te gebruiken. De kritieke massa die je applicatie moet hebben om het MVVM pattern toe te passen is dusdanig klein, dat het al rendabel is op het moment dat besluit je applicatie te willen unit testen. Als je test driven werkt is dit dus eigenlijk al bij de eerste regel code.

Om de kracht van het MVVM model te laten zien, is hier een simpel codevoorbeeld te downloaden waarbij de view-laag volledig gedatabind is op het ViewModel en de logica in de UI volledig getest kan worden.


Werken met ?
Kijk dan bij onze mogelijkheden voor zowel starters als ervaren engineers.


Categorieën: Architectuur, Development, .Net, .Net, Microsoft Windows

Tags: , ,