Model-view-viewmodel ( MVVM ) es un patrón de arquitectura de software que facilita la separación del desarrollo de la interfaz gráfica de usuario (la vista ), ya sea a través de un lenguaje de marcado o código GUI, del desarrollo de la lógica empresarial o de respaldo. finalice la lógica (el modelo ) para que la vista no dependa de ninguna plataforma de modelo específica. El modelo de vista de MVVM es un convertidor de valor, [1] lo que significa que el modelo de vista es responsable de exponer (convertir) los objetos de datos.del modelo de tal manera que los objetos se manejen y presenten fácilmente. En este sentido, el modelo de vista es más modelo que vista, y maneja la mayoría, si no toda, la lógica de visualización de la vista. [1] El modelo de vista puede implementar un patrón de mediador , organizando el acceso a la lógica de back-end en torno al conjunto de casos de uso admitidos por la vista.
MVVM es una variación del patrón de diseño del modelo de presentación de Martin Fowler . [2] [3] Fue inventado por los arquitectos de Microsoft Ken Cooper y Ted Peters específicamente para simplificar la programación impulsada por eventos de las interfaces de usuario. El patrón se incorporó a Windows Presentation Foundation (WPF) ( sistema de gráficos .NET de Microsoft ) y Silverlight (derivado de la aplicación de Internet de WPF). [3] John Gossman, uno de los arquitectos WPF y Silverlight de Microsoft, anunció MVVM en su blog en 2005. [3] [4]
Model-view-viewmodel también se conoce como model-view-binder , especialmente en implementaciones que no involucran la plataforma .NET. ZK (un marco de aplicación web escrito en Java ) y KnockoutJS (una biblioteca de JavaScript ) usan model-view-binder. [3] [5] [6]
Componentes del patrón MVVM
- Modelo
- El modelo se refiere a un modelo de dominio , que representa contenido de estado real (un enfoque orientado a objetos), o a la capa de acceso a datos , que representa contenido (un enfoque centrado en datos). [ cita requerida ]
- Vista
- Como en los patrones modelo-vista-controlador (MVC) y modelo-vista-presentador (MVP), la vista es la estructura, diseño y apariencia de lo que un usuario ve en la pantalla. [7] Muestra una representación del modelo y recibe la interacción del usuario con la vista (clics del mouse, entrada de teclado, gestos de toque de pantalla, etc.), y reenvía el manejo de estos al modelo de vista a través del enlace de datos (propiedades , devoluciones de llamada de eventos, etc.) que se define para vincular la vista y el modelo de vista.
- Ver modelo
- El modelo de vista es una abstracción de la vista que expone las propiedades y los comandos públicos. En lugar del controlador del patrón MVC, o el presentador del patrón MVP, MVVM tiene una carpeta , que automatiza la comunicación entre la vista y sus propiedades enlazadas en el modelo de vista. El modelo de vista se ha descrito como un estado de los datos en el modelo. [8]
- La principal diferencia entre el modelo de vista y el Presentador en el patrón MVP es que el presentador tiene una referencia a una vista, mientras que el modelo de vista no. En cambio, una vista se vincula directamente a las propiedades del modelo de vista para enviar y recibir actualizaciones. Para funcionar de manera eficiente, esto requiere una tecnología de vinculación o generar un código repetitivo para realizar la vinculación. [7]
- Aglutinante
- Los datos declarativos y el enlace de comandos están implícitos en el patrón MVVM. En la pila de soluciones de Microsoft , el cuaderno es un lenguaje de marcado llamado XAML . [9] El encuadernador libera al desarrollador de estar obligado a escribir lógica de placa de caldera para sincronizar el modelo de vista y la vista. Cuando se implementa fuera de la pila de Microsoft, la presencia de una tecnología de enlace de datos declarativos es lo que hace posible este patrón, [5] [10] y sin un vinculador, normalmente se usaría MVP o MVC en su lugar y tendría que escribir más texto repetitivo (o generarlo con alguna otra herramienta).
Razón fundamental
MVVM se diseñó para eliminar prácticamente todo el código GUI (" código subyacente ") de la capa de vista, mediante el uso de funciones de enlace de datos en WPF (Windows Presentation Foundation) para facilitar mejor la separación del desarrollo de la capa de vista del resto del patrón. [3] En lugar de requerir que los desarrolladores de experiencia de usuario (UX) escriban código GUI, pueden usar el lenguaje de marcado del marco (por ejemplo, XAML ) y crear enlaces de datos al modelo de vista, que es escrito y mantenido por los desarrolladores de aplicaciones. La separación de roles permite a los diseñadores interactivos centrarse en las necesidades de UX en lugar de programar la lógica empresarial. De este modo, las capas de una aplicación se pueden desarrollar en múltiples flujos de trabajo para una mayor productividad. Incluso cuando un solo desarrollador trabaja en toda la base del código, una separación adecuada de la vista del modelo es más productiva, ya que la interfaz de usuario suele cambiar con frecuencia y al final del ciclo de desarrollo según los comentarios del usuario final. [ cita requerida ]
El patrón MVVM intenta obtener las ventajas de la separación del desarrollo funcional proporcionado por MVC, al tiempo que aprovecha las ventajas de los enlaces de datos y el marco vinculando los datos lo más cerca posible del modelo de aplicación puro. [3] [4] [11] [ aclaración necesaria ] Utiliza la carpeta, el modelo de vista y las funciones de verificación de datos de cualquier capa empresarial para validar los datos entrantes. El resultado es que el modelo y el marco controlan la mayor cantidad de operaciones posible, eliminando o minimizando la lógica de la aplicación que manipula directamente la vista (por ejemplo, código subyacente).
Crítica
John Gossman ha criticado el patrón MVVM y su aplicación en usos específicos, afirmando que MVVM puede ser "excesivo" al crear interfaces de usuario simples. Para aplicaciones más grandes, él cree que generalizar el modelo de vista por adelantado puede ser difícil y que el enlace de datos a gran escala puede conducir a un menor rendimiento. [12]
Implementaciones
.NET frameworks
- Biblioteca de prismas
- Caliburn / Caliburn.Micro
- WindowsCommunityToolkit
- DevExpress MVVM
- Proyecto de código abierto DotVVM
- Kit de herramientas MVVMLight
- ReactivoUI
- Kit de herramientas de Mugen MVVM
- Uno Framework - Código abierto
- Rascl
- MvvmCross
- FreshMvvm
Marcos de JavaScript
- Angular
- Aurelia
- Durandal
- Ember.js
- Ext JS
- Knockout.js
- Omi.js
- Oracle JET
- Reactjs
- Esbelto
- Vue.js
Ver también
- Arquitectura de varios niveles
Referencias
- ^ a b Grupos de Google. "Pensamiento: MVVM elimina el 99% de la necesidad de ValueConverters" .
- ^ Martin Fowler (19 de julio de 2004). "El patrón de diseño del modelo de presentación" . Martin Fowler.com.
- ^ a b c d e f Smith, Josh (febrero de 2009). "Aplicaciones WPF con el patrón de diseño Modelo-Vista-ViewModel" . Revista MSDN .
- ^ a b Gossman, John (8 de octubre de 2005). "Historias del Smart Client: Introducción al patrón Model / View / ViewModel para la creación de aplicaciones WPF" .
- ^ a b Massey, Simon. "Patrones de presentación en ZK" . Consultado el 24 de marzo de 2012 .
- ^ Steve Sanderson. "KnockoutJS" .
- ^ a b "El patrón MVVM" . msdn.microsoft.com . Consultado el 29 de agosto de 2016 .
- ^ Pete Weissbrod. "Modelo-vista-patrón de modelo de vista para WPF: otro enfoque" . Archivado desde el original el 1 de febrero de 2008.
- ^ Wildermuth, Shawn. "Enlace de datos de Windows Presentation Foundation: parte 1" . Microsoft . Consultado el 24 de marzo de 2012 .
- ^ "ZK MVVM" . Potix . Consultado el 24 de marzo de 2012 .
- ^ Karl Shifflett. "Aprendiendo WPF MV-VM" . Archivado desde el original el 13 de abril de 2009 . Consultado el 5 de junio de 2009 .
- ^ John Gossman. "Historias del Smart Client: ventajas y desventajas de MV-VM" . Cite journal requiere
|journal=
( ayuda )
enlaces externos
- "Cómo implementar MVVM (Model-View-ViewModel) en TDD (desarrollo basado en pruebas)" . Red de desarrolladores de Microsoft . Microsoft.
- "Introducción al patrón Model / View / ViewModel para crear aplicaciones WPF" . Red de desarrolladores de Microsoft . Microsoft.
- Lógica de validación MVVM , escrita en Java por Tim Clare
- "Comprensión de MVVM: una guía para desarrolladores de JavaScript" . AddysOnmani.com .
- "Tutorial paso a paso de MVVM" . learnmvvm.com .