MVVM y MVP

Anonim

El propósito del desarrollo de software es crear soluciones que aborden las necesidades y problemas de los usuarios y las empresas. Para lograrlo, diferentes tecnologías y patrones de arquitectura como Model-View-ViewModel (MVVM) y Model-View-Presenter (MVP) son usados.

Al igual que con todo lo que se fabrica, el primer paso es la etapa de planificación y diseño. El proceso de diseño del software puede ser una especificación basada en el conjunto de herramientas tecnológicas preferidas y puede abarcar toda la actividad desde la concepción hasta la planificación hasta la implementación, las actualizaciones y las modificaciones.

Cubre el diseño arquitectónico de bajo y alto nivel, basado en patrones de arquitectura seleccionados, y mapea soluciones reutilizables utilizando patrones de diseño.

Estructura de la aplicación de software

La arquitectura del software define la estructura de una aplicación que cumple con los requisitos técnicos, operativos y de los usuarios, y se refiere a cómo se organiza y administra el código.

Decidir sobre la arquitectura de una aplicación de software es fundamental, ya que no es una parte fácil de cambiar de una aplicación que ya está desarrollada; por lo tanto, el patrón arquitectónico debe decidirse antes de que comience la programación.

Los patrones arquitectónicos son algo diferentes a los patrones de diseño, ya que su alcance es mucho más amplio al abordar problemas más técnicos, como el rendimiento y las limitaciones del hardware y la alta disponibilidad. Ejemplos de diferentes patrones de arquitectura son MVC, MVVM y MVP.

Por otro lado, los patrones de diseño son mejores prácticas formalizadas que facilitan el desarrollo orientado a objetos reutilizables y son más fáciles de mantener y cambiar que la arquitectura de una aplicación.

Patrones de arquitectura

Controlador de vista de modelo (MVC) Fue uno de los primeros patrones arquitectónicos desarrollados para aplicaciones web, ganando popularidad desde mediados hasta finales de los noventa, particularmente con la comunidad Java.

Los marcos más nuevos, como Django para Python y Rails (Ruby on Rails), tienen un fuerte enfoque en el despliegue rápido, por lo que MVC está asumiendo la cuota de mercado como la gran atracción en los patrones arquitectónicos.

Tradicionalmente, el desarrollo de la interfaz de usuario contenía una gran cantidad de código para manejar la lógica complicada, por lo que los patrones de arquitectura se diseñaron para reducir el código en el nivel de la interfaz de usuario (UI), haciéndolo más "limpio" y manejable.

Entonces, con el patrón MVC, una aplicación web está compuesta de

  • Modelo (datos)
  • Ver (interfaz para ver y manipular datos)
  • Controlador (operaciones y acciones realizadas sobre los datos)

los Modelo Maneja datos y lógica empresarial y hay no dependencias entre el Modelo y el Controlador o Ver.

los Ver presenta los datos al usuario en el formato compatible y el diseño requerido, y cuando el Controlador recibe solicitudes de los usuarios (para recuperar datos), llama a los recursos relevantes necesarios para completar la solicitud.

Apliquemos este patrón a la construcción de una tienda de libros en línea.

Los usuarios pueden buscar, ver, registrarse y comprar libros, así como administrar sus perfiles y listas de libros. Cuando un usuario hace clic en la categoría SCI-FI, todos los libros relacionados deberían aparecer como disponibles.

los Controladores Manejar las acciones que administran los libros (lista, agregar, ver, etc.). Puede haber múltiples Controladores con una principal Controlador "Dirigir el tráfico".

Para este ejemplo, el Controlador se llama controller_books.php y la Modelo (por ejemplo, model_books.php) maneja los datos y la lógica relacionados con los libros.

Por último, diferente Puntos de vista será necesario, como al agregar libros al carro en línea o al ver el detalle del libro con imágenes y comentarios.

los controller_books.php recibe la acción (petición del usuario) de la principal Controlador (p.ej. index.php). los controller_books.php analiza la solicitud y llama al model_books.php (los datos) para devolver la lista de libros SCI-FI.

La responsabilidad de la Modelo es proporcionar esa información, utilizando cualquier lógica que se haya aplicado (utilizando filtros de búsqueda). los Controlador A continuación, toma la información y la pasa a la correspondiente. Ver (vista de búsqueda, vista de impresión, vista de detalle, etc.) y la información se presenta (a través de la Ver) al usuario que inició la solicitud.

Estos son los fundamentos del patrón MVC, que ha evolucionado las variaciones generadoras de los patrones de arquitectura, como el Modelo-Vista-Presentador (MVP), Modelo-Vista-Modelo de Vista (MVVM), Modelo Jerárquico-Modelo-Vista-Controlador (HMVC), y Model – View – Adapter (MVA), etc.

Patrón MVP

Model-View-Presenter (MVP)

los Patrón de MVP Ha existido por un tiempo y es una variante de MVC. Fue diseñado específicamente para la automatización de pruebas, donde el objetivo era aumentar la cantidad de código que se puede probar a través de la automatización, y el patrón aborda algunos problemas con la capa de presentación, aislando la lógica empresarial de la interfaz de usuario.

La pantalla es la vista, los datos que muestra es el modelo y el presentador enlaza los dos.

MVP Comprende los siguientes componentes con responsabilidades separadas:

  • Modelo (define los datos a mostrar)
  • Ver (muestra los datos del modelo y enruta las solicitudes de los usuarios al presentador).
  • Presentador (interactúa entre la vista y el modelo y los enlaza)

los Ver (una página web) muestra y administra los controles de página reenviando eventos (solicitudes de usuario) al Presentador que se iniciaron en el Ver.

los Presentador responde a estos eventos leyendo y actualizando el Modelo para cambiar el Ver y por lo tanto, la Presentador responsabilidad es atar el Modelo y Ver.

Después de mirar MVC y MVP patrones, los puntos en común tienen responsabilidades separadas para cada componente y promueven la separación entre los Ver (UI) y Modelo (datos). Las diferencias significativas entre estos patrones son más evidentes en cómo se implementan los patrones.

MVP Puede ser un patrón complejo de implementar para soluciones avanzadas, pero ciertamente tiene grandes beneficios si se implementa como una solución bien diseñada, aunque puede que no sea necesariamente la opción adecuada para soluciones simples.

Patrón MVVM

Model-View-ViewModel (MVVM)

los MVVM modelo fue diseñado específicamente para las plataformas Windows Presentation Foundation (WPF) y Microsoft Silverlight, y se puede usar en todos XAML [i] plataformas

WPF es un sistema de Microsoft que representa interfaces de usuario en programas basados ​​en Windows y se lanzó por primera vez en.NET Framework 3.0.

MVVM fue refinado de MVC y en este patrón, la Ver está activo con comportamientos, eventos y enlace de datos, y la Ver sincroniza con el ViewModel (que permite la separación de la presentación y expone métodos y comandos para gestionar y manipular el Modelo.

MVVM consta de tres componentes principales:

  • Modelo (Representa los datos con validación y lógica empresarial).
  • Ver (La vista es responsable de definir la estructura, el diseño y la apariencia de lo que el usuario ve en la pantalla. Lo ideal es que la vista se defina exclusivamente con XAML, con un código subyacente limitado que no contenga lógica empresarial. vinculante entre el Ver y ViewModel para mostrar habilita la sincronización del Modelo y el ViewModel con la Vista)
  • ViewModel (separa la Vista del Modelo y expone los métodos y comandos para manipular los datos (Modelo).

los Ver recibe datos de la ViewModel (a través de enlace de datos y métodos), y en tiempo de ejecución, el Ver cambiará al responder a eventos en el ViewModel.

los ViewModel media entre los Ver y Modelo y maneja el Ver lógica. Interactúa con el Modelo - Tomando los datos de la Modelo y presentándolo a la Ver para mostrar

Todos estos componentes están desacoplados entre sí, lo que permite una mayor flexibilidad para trabajar en ellos de forma independiente, aísla las pruebas de las unidades y las intercambia, sin afectar a ningún otro componente.

Esta estructura permite la Modelo y otros componentes para evolucionar de forma independiente, permitiendo a los desarrolladores trabajar en diferentes aspectos de la solución al mismo tiempo. Por ejemplo, donde los diseñadores están trabajando en el Ver, simplemente generan muestras de datos sin necesidad de acceder a los otros componentes. Esto facilita un fácil rediseño de la interfaz de usuario como Ver Se implementa en XAML.

Como se mencionó anteriormente con MVPLas soluciones simples no necesitarían patrones de arquitectura y diseño, como "Hello World!" es demasiado básico para seguir cualquier patrón; sin embargo, a medida que se introducen más funciones, funciones y componentes, la complejidad de la aplicación aumenta y también aumenta la cantidad de código que se necesita administrar.

En resumen

Desde el inicio del desarrollo de la interfaz de usuario, los patrones de diseño son cada vez más populares para facilitar el proceso de desarrollo, las aplicaciones son más escalables y facilitan las pruebas.

Diferencia ilustrada entre los patrones MVP y MVVM:

  • En ambos MVP y MVVM, la Ver Es el punto de entrada a la aplicación.
  • En MVP, hay un mapeo uno a uno entre el Ver y Presentador, donde en MVVM, la relación es uno a muchos entre la Ver y ViewModel.
  • MVP se utiliza principalmente para aplicaciones de Windows Forms y Windows Phone y MVVM está diseñado para Silverlight, WPF, Knockout / AngularJS, etc.