Over the past eighteen months I have been developing a series of apps at home and in every instance I found myself using the MVVM (Model-View-ViewModel) pattern. The MVVM pattern is a close relation to the more popular and better known MVC (Model-View-Controller) pattern, the focus of both is the idea of a separation of concerns pattern. The main purpose of a separation pattern is that it helps developers and designers associate a specific set of responsibilities to each layer.

  • Model - Where the data originates
  • View - What the user sees and performs actions upon.
  • Controller - Relatively large object that coordinates the actions/reactions within the View.
  • View Model - Relatively small object that represents a Views data context.

While the MVC pattern is the preferred option for many situations (especially on the web) it is poorly suited for systems that make heavy use of data-binding (like XAML). Features within XAML allows for flexible binding of data at both runtime and design time, which subsequently allow the developer to focus on manipulating the data context (source) rather than the UI. Binding in this fashion, by definition, supports the principle and practice of separation of concerns, allowing UX designers to go nuts while the developers pull information from the various sources and services as necessary.

One of the more exciting frameworks I have used, within a professional context, is Knockout. Knockout provides all the benefits of MVVM to your client side web development. You are able to easily associate DOM elements with model data, so when your data model's state changes, your UI updates automatically. Checkout this video by Steve Sanderson who delivers a really strong argument for using KnockoutJS for large and small data driven sites. The video introduces you to jQuery, jQuery templating, JSON and live data binding.