Entendiendo el patrón de diseño MVVM


Buenas a todos,

Hoy quiero intentar explicar en qué consiste este patrón de diseño con el que me he encontrado cuando he empezado a desarrollar aplicaciones de escritorio con Windows Presentation Foundation (WPF) y de paso empezar a contar cosas sobre cómo me va con este entorno de desarrollo. Voy a intentar explicarlo tal y como yo lo he entendido. Si bien inicialmente puede parecer algo complejo de entender, o a mi me lo pareció, cuando le prestas algo de atención te das cuenta de que no es algo muy lejano al patrón MVC del que tanto oímos hablar y es archiconocido actualmente.

Este patrón de diseño es técnicamente una implementación del patrón de diseño Presentation Model de Martin Fowler que también implementa AngularJS o KnockoutJS y que es propuesto para ser usado en el desarrollo de aplicaciones WPF y Siverlight.

Para explicar en qué consiste este patrón, voy a sacar un extracto de la información que he encontrado en la web en estos días y de la que os dejo también el enlace.

El patrón MVVM proporciona una separación entre la interfaz gráfica y el desarrollo de la lógica de negocio. El ViewModel del patrón MVVM es el responsable de exponer los objetos del modelo que podrá consumir la vista de manera que estos objetos serán fácilmente manejables y consumidos. MVVM usa las funciones de DataBinding que nos proporciona XAML, para separar estas dos capas consiguiendo eliminar el code-behind de las vistas y facilitar el testing del código de los eventos que pude lanzar una vista, ya que también se encarga de gestionarlos.

Por tanto el ViewModel se puede entender como un contenedor de datos y comandos que no sabe de donde vienen los datos (aspecto del que se encargará el modelo) y cómo estos serán mostrados (aspecto del que se encargará la vista)

http://en.wikipedia.org/wiki/Model_View_ViewModel

http://www.codeproject.com/Articles/126249/MVVM-Pattern-in-WPF-A-Simple-Tutorial-for-Absolute

http://www.c-sharpcorner.com/UploadFile/1a81c5/a-simple-wpf-application-implementing-mvvm/

http://www.markwithall.com/programming/2013/03/01/worlds-simplest-csharp-wpf-mvvm-example.html

Vamos a ver una imagen de la arquitectura típica de este patrón de diseño.

MVVM

En definitiva, podemos ver que la vista conoce al viewmodel y los modelos y comandos que éste nos ofrece y el viewmodel conoce el modelo de datos. Para los que habitualmente habéis trabajado con MVC, como yo, os surgirá en seguida la pregunta de ¿Y no es el ViewModel un controlador?, pues técnicamente no, pero se le parece, de hecho, los controladores no tienen que desaparecer y en aplicaciones que por su tamaño, requieran separar adecuadamente la lógica, es posible que sigan existiendo esos controladores que la implementen, y que podrán ser usados por los distintos ViewModels a través de los comandos que haya definidos en éstos, en estos casos podemos decir que tenemos un patrón MVCVM.

Para terminar y a modo de resumen, la clave de este patrón de diseño, los ViewModels, se pueden entender como una capa intermedia entre las vistas y la lógica de la aplicación, que nos permite desacoplar completamente el diseño del código necesario para la lógica del mismo, eliminando el code-behind de la vista y proporcionando una forma eficaz para testar dicha lógica. Esto permitirá estructurar de mejor forma nuestro desarrollo, separando y diferenciando adecuadamente los roles de diseñador y desarrollador.

En el próximo post os enseñaré un ejemplo de cómo se puede implementar este patrón en una aplicación WPF, que imagino que terminará de disipar las dudas sobre el MVVM.

Un saludo y espero que os sea útil.

Anuncios

Un comentario en “Entendiendo el patrón de diseño MVVM

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s