(Parte II) Una breve historia con RxSwift, programando una aplicación iOS desde 0.
--
Seguimos con la construcción de nuestra pequeña aplicación para buscar álbumes con RxSwift.
Recuerda que el código fuente se encuentra aquí.
Y que, el artículo anterior es éste.
Así que empezamos.
En este artículo hablaremos, de Model-View-ViewModel. Es un patrón bien interesante. En iOS, la idea es separar el ViewController, lo que es propiamente controlar de lo que es el modelo de la vista. Así que vamos para allá.
Lo primero que haremos será crear un nuevo archivo llamado ListViewModel. Y copiaremos el modelo, que ahora mismo son los álbumes.
Ahora tenemos que actualizar el controlador para que haga uso del viewModel. Nada complicado. Borraremos los álbumes y pondremos una referencia al viewModel.
Por último, actualizaremos las dos referencias de los álbumes, que ahora lo tenemos en el viewModel.
Nos quedará realizar la instancia correctamente en el SceneDelegate.
Nota: en futuros artículos, introduciremos un patrón llamado Coordinador, en UIKit, es muy interesante de implementar y resuelve un problema generado en las navegaciones y las instancias de las vistas en la capa de aplicación.
Ya lo tendríamos. Podemos verificar que el programa sigue funcionando igual que antes.
El siguiente problema a resolver es que, en el mundo real, no existen celdas con un solo titulo. ¿Qué ocurre si tenemos mucha más información? Necesitamos una celda personalizada. Vamos allá.
Lo primero, crearemos el modelo. Crea una nueva carpeta llamada Domain. Ya veremos el por qué más adelante. Dentro crea un archivo llamado Albums.
En Album, crearemos un modelo sencillo. Un título, un género, un país y un año. Todo Strings.
Ahora crearemos la celda. Dentro de Application crea ListTableViewCell.
Crearemos los outlets de la celda. Hay una stack vertical que contiene un titulo y un género y luego otra stack horizontal con el país y el año. No te preocupes por el código, luego lo pondremos más bonito.
La inicialización es de esta forma. Con SnapKit le diremos que la stack ocupe toda la celda con un margen de 8 puntos.
Y nos quedaría pasar el viewModel de la celda. Lo haremos como en el punto anterior. Primero, pondremos la referencia al inicio de la clase.
Nos aprovecharemos del didSet para actualizar la celda.
Por último, nos quedará actualizar el RxDataSources para que acepte celdas personalizadas.
Actualizaremos el registro de la celda en la definición de la tabla.
Actualizaremos el binding de la tabla.
Nos queda el title, que también tiene parte de modelo y lo tenemos en el ViewController. Añadiremos un lazy var, por ahora, en el ViewModel que representará el numero de álbumes.
Luego actualizaremos el bind en el ViewController.
El resultado será algo así.
En resumen, hemos actualizado una celda estándar por una personalizada y hemos implementado MVVM en la pantalla (y en la celda personalizada).
Pero, el código empieza a estar no demasiado bien y aparece algo de código repetido, así que.
One More Thing: es hora de reducir el código.
En ListTableViewCell hay demasiado código repetido. Vamos a crear unos componentes. Dentro de Application crea una carpeta Components. Crea un archivo llamado Label y escribe lo siguiente.
¿Se capta la idea? Ahora haremos lo mismo creando un archivo llamado StackView.
Con estos dos archivos, podemos reducir los outlets de la celda a lo siguiente.
Lo bueno, es que ahora con estos dos componentes, podemos usarlos en infinitas pantallas de la aplicación sin repetir código.
Ya que estamos, ¿podemos crear alguno más? Sí, la tabla.
La función del registro de la tabla se repiten parámetros, verdad? Podríamos hacer esto.
Crea dentro de Application, una carpeta llamada Extensions y dentro crea un archivo llamado UITableView+Register
El componente tabla nos quedaría así.
Mucho mejor.
Y ya, lo último. En la celda estamos agregando elementos a la stackview, uno a uno. Podríamos crear una nueva extension UIStackView+AddArrangedSubviews.
El código de la celda se quedaría así.
Muchísimo mejor.
Y ya para nota, nos fijamos en el bind. También estamos pasando dos parámetros, el string de la celda y el nombre de la clase. ¿Qué podemos hacer? Pues una nueva extensión UITableView+Rx.
De forma, que el bind nos quedará así.
Qué hemos aprendido en este segundo capítulo.
- A veces es interesante separar el controlador del modelo, sobretodo si pensamos que la lógica de la pantalla va a terminar siendo compleja.
- Podemos usar celdas con elementos personalizados.
- Tenemos que ser capaces de reconocer elementos repetidos en nuestro código y intentar simplificarlo lo máximo que podamos. Pero ojo, si la simplificación va a terminar transformando el código más complejo, igual no es tan buena idea.
En el próximo capítulo empezaremos a testear el código. Es muy interesante tener esta práctica cuanto antes ya que en el caso de la programación reactiva, es de las cosas importantes para reconocer si estamos emitiendo de forma correcta. Aprenderemos un poco más de los observables, de cuando emiten algo y bien emiten errores y cómo tratarlos.
El código de este artículo se encuentra en esta rama.
Hasta luego, Albert.
