Aplicando el patrón de diseño MVVM

Cuando estamos creando una aplicación, a todos nos gustaría tener nuestro código limpio y organizado, para que cualquier otro desarrollador tenga una más rápida comprensión del mismo. Es aquí en donde entran en juego los patrones de diseño. ¿Pero exactamente por qué lo usamos? Los patrones de diseño nos ofrecen una arquitectura y un conjunto de reglas/principios definidos previamente que deben de ser cumplidos en nuestra App, en este caso les explicaré un patrón de diseño llamado MVVM (Modelo-Vista-Vista-Modelo) aplicado a Xamarin Forms. Antes de comenzar, quiero enumerar algunas de las caracteríticas más importantes que se obtienen al usar patrones de diseño:

• Código más limpio y organizado.
• Mayor claridad y mejor comprensión del proyecto frente a otros desarrolladores.
• Reutilización de código
• Mantenimiento más rápido

¡Empecemos!

¿Qué es el patrón MVVM?

El patrón Model-View-ViewModel (MVVM) nos ayuda a separar la lógica de negocios de la interfaz de usuario, facilitando las pruebas, mantenimiento y la escalabilidad de los proyectos. Existen tres componentes que nos ayudan a lograrlo:

Creando un escenario ejemplo para aplicar el patrón MVVM

Antes de comenzar, quiero mostrarles la metodología que usaremos en esta explicación. Vamos a aplicar el patrón MVVM, paso por paso, a un ejemplo simple de una Agenda telefónica. Se mostrarán los requerimientos de la App, para ir desglosándolos en cada componente del patrón de diseño correspondiente.

Los requerimientos son los siguientes:

• La agenda tendrá los siguientes campos: : Name, last name, phone number y gender.
• Todos los contactos deberán ser mostrados en una lista.
• La aplicación tendrá un botón principal que cambia la apariencia de colores haciendo un click.
• El diseño de la pantalla deberá ser como el siguiente Mockup

Conociendo los componentes del patrón MVVM

El Modelo (Model)

Las clases contenidas en los “Models”, representan el modelo de dominio de la aplicación, dentro del cual se encuentran: El modelo de datos y la lógica empresarial. A la hora de iniciar una aplicación es el primer componente tomado en cuenta, ya que aquí definimos los atributos que estaremos utilizando en nuestra App. Para comprender mejor, en nuestro ejemplo, comenzaremos a definir los atributos que necesita la aplicación de la Agenda. (En el primer requisito define estos atributos).

Ahora, creemos una carpeta llamada: “Models”, dentro agreguemos la clase de contacto con los atributos, como el siguiente ejemplo:

La Vista-Modelo (ViewModel)

El modelo de vista contiene toda la lógica de presentación. Implementa propiedades y comandos que definen las funcionalidades que tomará dicha aplicación. Estas propiedades y comandos son capaces de enlazar con la vista (UI). Por lo tanto, se encarga realizar la comunicación entro los modelos y las vistas.

Continuando con nuestro ejemplo, definiremos las funcionalidades que necesita la aplicación de la Agenda. ( El segundo, tercer y cuarto requisito definen las funcionalidades a desarrollar).

Empecemos a codear!

1. En el primer bloque, implementé la interfaz INotifyPropertyChanged, la cual es responsable de notificar a los clientes que el valor de una propiedad ha cambiado. Puede leer más información aquí.

2. Aquí llenamos la colección con algunos datos de pruebas para poder mostrarlas en el ejemplo de su Agenda Telefónica.

3. Por último, agreguemos la acción “Cambiar apariencia”.

Como podemos ver, en la clase ContactInformationViewModel agregamos las funcionalidades requeridas. En el folder ViewModel, puede agregar tantas clases necesite.

La vista (View)

La Vista define cómo la información y las funcionalidades se mostrarán gráficamente. Tiene la responsabilidad de definir la estructura que saldrá de la pantalla. Esto se puede definir por CodeBehind (C#) o en XAML (Recomendado).

Para terminar este ejemplo. Solo tenemos que hacer los siguientes pasos:

1. Agregue la fuente BindingContext para llenar el XAML. En este caso con la clase ContactInformationViewModel.

2. Puedes llamar todos los atributos que necesitemos agregando la palabra "Binding" seguido del nombre del atributo, como se muestra a continuación:

Los Binding permiten vincular las propiedades de dos objetos. Además de permitirnos mostrar toda la información contenida en el ViewModel. Más información aquí.

3. Por ultimo, en el ejemplo, creé la clase ChangeAppearanceCommand para realizar un cambio en la apariencia de la interfaz de usuario, mediante los Commands. Los cuales nos permiten agregar las acciones que necesitemos del ViewModel, por ejemplo, alguna acción para hacer cuando se hace click en un botón. Más información aquí.

Para concluir la aplicación de agenda telefónica, agregamos el XAML (View).

En el folder Views, puede agregar tantas vistas como necesites.

Buena suerte con tu implementación!😎

Click to see an example in my GitHub.

Artículo en inglés: https://askxammy.com/applying-mvvm-design-pattern/

Referencia: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/enterprise-application-patterns/mvvm