DEV Community

Andrés Zapata
Andrés Zapata

Posted on

Implementando y optimizando MVVM para nuestras aplicaciones Xamarin.forms

La arquitectura sugerida para el desarrollo de aplicaciones móviles, utilizando Xamarin.forms es MVVM(Model-View-ViewModel).

Model: Es el encargado de representar la lógica de negocio y/o la capa de acceso a datos.

View: Nos representa toda la parte gráfica en la cual queremos mostrar nuestra información.

ViewModel: Es la abstracción de la vista, en la cual exponemos propiedades y comandos para hacer un puente entre la View y el Model.

Screen Shot 2020-12-11 at 11.58.19 AM

Para poder implementar esa arquitectura, necesitamos implementar la interface INotifyPropertyChanged

Screen Shot 2020-12-11 at 12.30.43 PM

Como ejemplo, vamos a crear una ViewModel para la autenticación, en la cual vamos a capturar 2 datos, el usuario y la contraseña:

Screen Shot 2020-12-11 at 12.42.25 PM

Como podemos ver, solo agregando 2 propiedades, nuesto código ya comienza a ser muy extenso, entonces vamos a comenzar a optimizar un poco.

Para esto vamos a crear una la clase BaseViewModel, en la cual implementaremos la interface INotifyPropertyChanged y agregaremos el atributo [CallerMemberName] para no tener que enviar el nombre de nuestra propiedad cuando llamamos el método OnPropertyChanged:

Screen Shot 2020-12-11 at 12.40.37 PM

Y ahora todas nuestras clases ViewModel, las heredamos de nuestra base:

Screen Shot 2020-12-11 at 12.47.07 PM

Mejoró un poco, pero que pasa si no estamos implementando una pantalla de autenticación, en donde solo capturamos dos datos, si no que por el contrario tenemos un formulario para la creación de un nuevo cliente, donde los datos son:

  1. Nombre
  2. Apellido
  3. Tipo de documento
  4. Número de documento
  5. Fecha de nacimiento
  6. Teléfono fijo
  7. Celular
  8. Correo electrónico

Nuestra clase sería muy extensa y tendríamos una gran probabilidad de error con nuestro OnPropertyChanged, ya que por lo general, para evitar escribir mucho código, recurrimos a "Copiar" y "Pegar" las propiedades y renombrarlas.

Como estamos desarrollando bajo el ecosistema .Net, podemos hacer uso de las librerias y/o nugets que tenemos disponibles para solucionar algunos problemitas y/o desarrollar más rápido.

Para este caso, vamos hacer uso de PropertyChanged.Fody

Screen Shot 2020-12-11 at 1.02.17 PM

Lo instalamos en el proyecto compartido y luego agregamos un nuevo archivo que llamaremos FodyWeavers.xml, allí haremos refencia a nuestro nuget instalado.

Screen Shot 2020-12-11 at 1.06.46 PM

Ahora, con lo que acabamos de hacer, ya nos vamos a evitar escribir mucho código, pues este nuget, nos ayudara a generar código en tiempo de compilación y nos agregara el OnPropertyChanged a todas las propiedades de las clases que implementan la interface INotifyPropertyChanged.

Nuestras clases ViewModel nos quedan así:

Screen Shot 2020-12-11 at 1.14.03 PM

La implementación quedo mucho más limpia, más corta, más facil de entender y casi con cero probabilidad de tener errores con el llamado al método OnPropertyChanged.

En ocasiones, no todas las propiedades necesitan hacer un llamado al método OnPropertyChanged, como por ejemplo el Id del objeto, pues por lo general son datos que no se muestran en pantalla, sino que los usamos para identificarlo y nada más, entonces ¿qué podemos hacer?

Es muy sencillo, PropertyChanged.Fody nos ofrece algunos atributos que podemos usar para evitar que al momento de compilar, no agrege el OnPropertyChanged a las propiedades, por ejemplo:

Screen Shot 2020-12-11 at 1.26.05 PM

Con este atributo, la propiedad Id, se conservará como la escribimos y no estará notificando a la vista que su valor cambio, en caso de que esto ocurra.

Ahora, ¿qué pasa si por ejemplo, tenemos un listado de datos que mostramos en un picker, y dependiendo del item seleccionado, necesitamos filtrar otro listado o realizar alguna acción?

Por lo general, haciamos un llamado al método que necesitamos en el set de la propiedad:

Screen Shot 2020-12-16 at 10.54.45 AM

Pero con PropertyChanged.Fody, lo podemos hacer de una manera más limpia, vamos a interceptar la propiedad usando la estructura OnPropertyNameChanged:

Screen Shot 2020-12-16 at 11.00.40 AM

Incluso podemos implementarlo de la siguiente manera, para conocer el valor actual y el anterior de la propiedad:

Screen Shot 2020-12-16 at 11.06.05 AM


Hay muchas cosas más que nos ofrece este nuget, pero la mayor optimización la logramos con la explicación anterior.

En la siguiente url nos podemos documentar mucho más sobre PropertyChanged.Fody

https://github.com/Fody/PropertyChanged

Hasta la próxima !!

Discussion (2)

Collapse
gpmanuel profile image
GPManuel

Gran aporte! ¿Sabes si PRISM incluye estas características?

Collapse
azapatac profile image
Andrés Zapata Author

Solo tiene la clase base, pero la implementación con Fody si la debes realizar. Son compatibles los dos nugets.