Since the User Interface came on the scene of software development, it is constantly one of the biggest problems. It is really hard to design the architecture of the User Interfaces, User Interactions and deal with all the logic around, all the different states and behaviors. It is not an easy task also to separate the UI logic from the other layers of the architecture. On the other hand, even if you develop the whole application, you should start to think about how to automatically test the UI (unit tests, components tests, integration tests…), how to maintain it in a way that will reduce the regression, will easily let you add new functionality and the very important one – the new team members should be able easily get the idea or say it – readability.
The “Benefits” of this approach
I don’t think this “approach” needs more to say about, so will leave it like this.
Let me start with the father, but still the so good and famous -
Model – View – Controller. It introduces 3 separate layers of abstraction. Where the Model stands for the business (domain) object model that in most cases is similar to the Database model. The View is the layer that will be shown to the end user. It is often passive, so leave the actual screen (visual) logic to be done by the Controller – the mediator between the View and Model. This is the most famous UI Pattern across the web – used extensively in ASP.NET MVC, Ruby On Rails and much more.
Model – View – Presenter – Derivative of MVC, with some changes. The Controller is replaced with a Presenter abstraction, which stands for a guy that will hold an instance of a View and a Model and will do the visual logic by calling methods of the View. Most of the time the View is abstracted with an Interface, so leave the implementation of the Presenter fully separate and as a result the View can be easily replaced with new one.
Presentation Model - by the father of the Enterprise design patterns Martin Fawler. Here the Presentaion model is holding the state of the UI and the data. The difference with the MVP is that the View is active, it gets the state out of the Presentation Model and is synchronizing it on every change. The Presentation model doesn’t know anything about the View.
Some years later this idea was modified slightly and fitted into the world of WPF with the name of:
It was 2005, when this beautiful name was firstly mentioned by Josh Gossman in his blog post “Introduction to Model/View/ViewModel pattern for building WPF apps”. He described entirely the nature of the new UI pattern for building better WPF application. But four years later Josh Smith’s article (WPF Apps With The Model-View-ViewModel Design Pattern) in the msdn magazine really popularize the pattern and gave much more information about some of the not very well documented tricks. And that was the moment when MVVM became really popular and perfectly suited for building all types of WPF and Silverlight applications. Both WPF and Silverlight were evolving with MVVM in their blood, that’s why it so natural and well suited in their both worlds.
As every other UI pattern – it is mostly about ‘Showing and Reading Data’. The Model is the part that is concerned about the actual raw Data. It is those plain old CLR objects (POCOs) that represents each domain specific object and nothing more. Please note that these classes don’t have any business logic in them. This logic is separated in Services or Utilities alike objects. Example for Model classes are the well known Customers, Orders and so on.
This is the part that usually gets really messed and we should pay special attention to it. In the world of MVVM:
This is the guy that separates The View from The Model. (Presentation Separation)
Now lets see how these 3 layers are communicating between each other.
I’ll keep this post codeless, but I’ve prepared for you an example project, that demonstrates every one of these techniques, in a very obvious way. It is called RadWebBrowser and is very basic(for the sake of simplicity) Silverlight out-of-browser Web Browser application. It also uses some of the great RadControls for Silverlight. I'm also using the Great MVVM Light toolkit - if you don't know it, please go there, download it and start using it.
Please drop me a line if you have any comments, questions or suggestion.
Download it here.
Miro Miroslavov is XAML enthusiast. You can follow him on Twitter at @mmiroslavov.