Project Description
MVVM is a great framework for Silverlight and WPF development. But the major flaw with MVVM is with its responsiveness. When the number of user controls increase beyond a certain limit, the UI gets very slow. Responsive MVVM framework aims to make the UI more responsive.


Problems we are trying to address

Keep the UI responsive even when the Model takes a lot of time to return

This is a very general case of application hang. You Model is performing a CPU intensive calculation or waiting on response from service etc. to return results. If your View->ViewModel->Model are tied up in a single thread, the View will hang until the Model returns data.

This is demonstrated in the Source Code (Examples of need of RMVVM\TimeConsumingProcessingProblem\ProblemStatement)

TimeConsumingProcessingProblem.jpg

On click of the Increment Count button
  • We should be able to see the counter value increase gradually from 0 onwards
  • We should be able to initiate another action like Decrement Count while Increment Count is in progress

There are two solutions proposed for this situation.
TimeConsumingProcessingProblem-SolUsingModel.jpg
  1. Make the calls to Model using a new thread (Examples of need of RMVVM\TimeConsumingProcessingProblem\SolutionUsingThreadsInModel)
  2. Make the calls to ViewModel using a new thread (Examples of need of RMVVM\TimeConsumingProcessingProblem\SolutionUsingThreadsInViewModel)
Making changes to ViewModel is a more elegant solution since you have to make change at only one place (RelayCommand) and you catch the problem early on before there are repercussions of it.

Keep the UI responsive even when large number of items are added to a data bound collection

We generally use ObservableCollection in View to databind to a collection of items in ViewModel. Whenever the ViewModel collection changes the UI gets updated automatically. But when a large number of items are added in a loop (for e.g. on start of app when a huge collection is loaded based on data from service), the UI hangs until the collection creation is complete.

This is demonstrated in the Source Code (Examples of need of RMVVM\HandlingThousandsOfElementsInUIProblem\ProblemStatement)

HandlingThousandsOfElementsInUIProblem.jpg

On click of the Load All Small Items button
  • We should be able to see small red boxes being added to the window on a continuous basis. It should not hang the UI for some time and then show all items together at once.
  • We should be able to initiate another action like Show Message to show "Am alive!!" message box while addition of items into collection is in progress

There are two solutions proposed for this situation.
HandlingThousandsOfElementsInUIProblem-SolUsingModel.jpg
  1. Make the calls to Model using a new thread (Examples of need of RMVVM\HandlingThousandsOfElementsInUIProblem\SolutionUsingThreadsInModel)
  2. Make the calls to ViewModel using a new thread (Examples of need of RMVVM\HandlingThousandsOfElementsInUIProblem\SolutionUsingThreadsInViewModel)
As before, making changes to ViewModel is a more elegant solution since you have to make change at only one place (RelayCommand) and you catch the problem early on before there are repercussions of it.

Also ObvservableCollection will not allow you to add items to collection from a thread different from the one that created the collection. Hence you need to use a modified collection which can add items using the dispatcher thread (I have used the ObservationCollectionEx proposed at http://geekswithblogs.net/NewThingsILearned/archive/2008/01/16/have-worker-thread-update-observablecollection-that-is-bound-to-a.aspx)

Last edited Mar 18, 2012 at 9:46 AM by souvikbasu, version 9