Guías

Arquitectura MVVM con SwiftUI

Implementar la arquitectura MVVM en el nuevo framework SwiftUI

Una de las novedades que nos has traído la recién terminada WWDC 2019 ha sido SwiftUI, un nuevo framework para el desarrollo de interfaces gráficas de usuario, de forma declarativa.

SwiftUI is an innovative, exceptionally simple way to build user interfaces across all Apple platforms with the power of Swift.

Además de introducir una nueva forma declarativa de desarrollar las vistas de nuestras apps, también ha traído cambios de mayor calado, como es el uso de una nueva arquitectura en la que basaremos el desarrollo.

Así que pasaremos de usar el veterano MVC a decirle hola a MVVM, que se ajusta mejor a esta nueva forma de implementar los interfaces.

Pero… qué es MVVM, en qué consiste y cómo se implementa son algunas de las preguntas a las que vamos a dar respuesta en este artículo.

¿Qué es MVVM?

Diseñada por Microsoft a mediados de la pasada década, a partir del MVC, nace con la idea de facilitar la separación del desarrollo del interface de usuario del de la capa de negocio o backend.

Componentes del Model – View – ViewModel

Traducido al español sería Modelo – Vista – Modelo de la Vista.

  • Model. Es la capa de acceso a datos. Se encarga de gestionar todo lo referente a la información que maneja la app. En nuestras apps son las estructuras de datos que recogemos de servicios REST o las que tenemos almacenadas en Core Data.
  • View. Igual que la vista en el MVC. Se encarga de pintar en la pantalla la información para el usuario y de disparar los eventos. Son las estructuras que implementan el protocolo View y en las que declaramos el interface de usuario.
  • View Model. Es una abstracción de la vista que expone métodos y propiedades públicas. Lo más característico es que dispone de un binder que se encarga de comunicar la vista con las propiedades enlazadas en el view model. ¿Y qué es el view model?

El view model es un estado determinado de los datos en el modelo

Los ViewModel los implementamos usando el framework Combine, para publicar los cambios producidos en el modelo de datos, y los tipos de datos @ObjectBinding y @EnvironmentObject que «escuchan» estos cambios en las vistas de SwiftUI.

Enséñanos un ejemplo de todo esto.

La mayoría de nosotros conocemos la app WWDC desarrollada por Apple que nos sirve de guía a la hora de seguir las sesiones durante la semana de la WorldWide Developers Conference.

Para ilustrar este artículo, y otros que van a venir en el futuro, vamos a crear nuestra propia versión de esta app.

En este primer artículo la app va a tener una funcionalidad muy simple, y se limitará a descargar las distintas colecciones especiales que hay ahora mismo, así como el detalle de cada una de las sesiones que lo componen, pero que será suficiente para centrarnos en la arquitectura MVVM.

El flujo de trabajo en MVVM

Lo primero que se presenta ante nosotros es una vista (el component View) que se encarga de presentar en nuestro dispositivo los datos de las colecciones y sesiones de la WWDC.

Para enlazar la vista con el modelo necesitamos el ViewModel que hace de puente entre estas dos capas, y en SwiftUI se hace mediante una característica de Swift 5.1 llamada @PropertyWrapper . Si te interesa saber qué son y cómo funcionan, no te pierdas nuestro capítulo Apple Coding Snippet en el canal de Youtube, bajo estas líneas (y no olvides suscribirte, si no lo has hecho ya).

Estos delegados o encapsulados de propiedad son @ObjectBinding, @EnvironmentObject y @State que son los que enlazan la vista con el ViewModel que va a gestionar los datos que debe presentar la vista.

Para que se pueda cumplir este enlace el objeto que hace las veces de ViewModel debe ser una clase y cumplir con el protocolo BindableObject cuyo único requisito es implementar la propiedad didChange que debe ser un tipo que implemente Publisher, en nuestro caso un PassthroughSubject. Para entender mejor Combine, puedes echarle un ojo al tutorial que hicimos hace poco pulsando aquí.

El ViewModel realiza una petición al cliente REST para recuperar los datos que necesita, en este caso las colecciones especiales creadas tras la WWDC.

Una vez recuperados los datos debemos informar a la vista de que se ha producido un cambio en el modelo de datos que tiene que presentar, para ello haremos uso del framework Combine.

En concreto este aviso se produce cuando invocamos la función send de didChange. Así de simple, al invocarlo, SwiftUI sabe que debe actualizar la vista.

Conclusión

Con el uso de MVVM y los frameworks SwiftUI y Combine aligeramos el código en nuestros proyectos además de dotarle de una arquitectura más moderna. Seguiremos más adelante, pero ya hemos dejado las bases establecidas. Un saludo y Good Apple Coding.

Código fuente | Repositorio de GitHub

Etiquetas

Adolfo Vera

Me gustan las camisetas y las zapatillas // Swift + UX/UI en sistemas Apple // Ahora @seeyuu_app // Creador de @GetPomodoroApp · @MADatBUS · @GetMeteo y...

Artículos relacionados

Botón volver arriba
Cerrar
Cerrar