Alain Hufkens {Rich Interactive Applications Developer}

Model-View-ViewModel in Silverlight and Flex

Last year I have been working a lot on Flex applications, and because of this I usually take my experience from Flex development and apply it to Silverlight. One example is the PureMVC framework that we use at Nascom for most RIA applications we build. The framework also has ports towards other technologies and one of these is the C# Silverlight port. I recently checked it out but they seem to have trouble keeping up with the speed of Microsoft's Silverlight releases.

So let's see if I can bring some of the patterns I learned while developing Silverlight into the world of Flex. One specific pattern that I want to talk about is the Model-View-ViewModel pattern. It's a specialization of the PresentationModel design pattern introduced by Martin Fowler specific for the Windows Presentation Foundation (WPF). Yeah, but what about the MVC pattern? Doesn't that already cover all our problems? In the MVC pattern, the model is the data, the view is the user interface, and the controller is the programmatic interface between the view, the model, and the user input. This pattern, however, does not seem to work well in declarative user interfaces like Windows Presentation Foundation (WPF) or Silverlight because the XAML that these technologies use can define some of the interface between the input and the view (because data binding, triggers, and states can be declared in XAML). And for the same reason it also applies to Flex, and even more to Flex4 because MXML will become more declarative in the future.

So what is the Model-View-ViewModel? The pattern is an adaptation of the MVC pattern in which the view model provides a data model and behavior to the view but allows the view to declaratively bind to the view model. The view becomes a mix of XAML and C#, the model represents the data available to the application, and the view model prepares the model in order to bind it to the view.

Probably most Silverlight developers out there are already familiar with this pattern, but I created two small sample applications (one in Silverlight 3 and one in Flex4 beta 2) to compare both technologies and give you an idea how it works. Both applications do exactly the same thing. They load an XML file with data (Phones) and display this data using data binding. You can change the amount so that you can see the total price changing. Yeah, this is definitely no rocket-science (doh, should have used rockets!) , but it works. The Silverlight client loads the XML file using LINQ. LINQ is pretty cool and powerful, but it still takes more code to parse an XML file in Silverlight than it does in Flex using e4x.

You can download the source files for the Silverlight 3 and Flex4 demos here.

Model-View-ViewModel in Silverlight 3

Model-View-ViewModel in Flex 4 (right click to view source)

What do you think? I find this pattern easy to use in applications that depend heavily on data binding like Silverlight and maybe also Flex. But I think I will still be using PureMVC for my next big Flex Project.