El desarrollo con SwiftUI es mucho más sencillo por el simple hecho de que cada vista que desarrollamos solo depende de un fichero swiff (el propio código) y no como sucedía con UIKit cuando teníamos el .xib o el .storyboard asociado a la vista.

En ese caso era normal que elimináramos un IBOutlet del código, pero no lo hiciéramos en el .xib. Por este motivo, nos dejaba con un error en tiempo de ejecución cuando intentábamos presentar esa vista.

Alguno pensarán que desarrollar todo a código va a ser mucho más complicado o difícil de mantener, pero no es así, ya que con SwiftUI se ha eliminado uno de los elementos más complejos de utilizar a código: Autolayout.

La forma de diseñar vistas con SwiftUI elimina la necesidad de utilizar Autolayout, por lo que han conseguido que sea muy cómodo diseñar y desarrollar nuevas interfaces.

Para ayudarnos con estas tareas de diseño de interfaces, Xcode incorpora un nuevo editor de vistas que realizará la previsualización de las vistas que estemos diseñando a código.

Para entender como funciona el nuevo editor de SwiftUI vamos a crear un nuevo proyecto de tipo SwiftUI desde el propio Xcode, seleccionando la opción App y rellenando los datos necesarios en el siguiente formulario:

Al abrir cualquier fichero de vista en Swift podemos expandir el editor visual pulsando las teclas ⌘ + ⌥ + ↵ o seleccionar la opción Canvas en el propio editor.

El editor se compone principalmente de los siguientes elementos:

1. Código. Esto es un fichero de ‘Swift’ normal, por lo que podemos tener diferentes struct, class, enum o lo que sea necesario (ni siquiera tiene que haber una vista aquí).
2. Código para la previsualización. El componente de previsualización se muestra gracias a esta parte del código. Tal y como se ve, es algo muy simple, ya que solo es necesario crearse un struct que implemente el protocolo PreviewProvider y en la propiedad previews iniciar la vista que queramos mostrar.Por lo general, la vista a mostrar será la que esté definida en el propio fichero. Es importante tener en cuenta que si la vista requiere de datos de entrada deberemos proporcionarlos en esta inicialización (tanto parámetros directos como parámetros de entorno, tal y como veremos más adelante), por lo que nos obligará en muchas ocasiones a tener un juego de datos mockeados en la app con los que mostrar correctamente las pantallas de previsualización.El código de previsualización no se incluye en el binario de la app cuando generamos la app para la subida a la App Store.
3. Previsualización. En esta parte se ve el resultado visual del código que hemos declarado. La previsualización se mostrará en caliente, sin necesidad de compilar la app. Si no fuera así deberá aparecer una barra en la parte superior con un botón de Resume o, lo que es lo mismo, podemos forzar a su recarga con las teclas: ⌘ + ⌥ + P. ¡Recuerda bien esta combinación de teclas porque la vais a usar continuamente!
4. Previsualización en vivo (Live Preview). La previsualización no solamente muestra datos estáticos, también nos permite interactuar con ellos y navegar por la pantalla como si se tratase del propio simulador, pero cada cambio en el código lo veremos reflejado instantáneamente aquí.Además, si dejamos el botón pulsado, podemos alternar entre previsualización con depuración o sin depuración para que se pare en los puntos de ruptura. Esta previsualización no muestra los mensajes del log. Por defecto el botón lanza la previsualización sin depuración.
5. Propiedades del componente. Este panel es similar al incluido en UIKit. Nos muestra información del componente que hayamos seleccionado en el previsualizador y nos permite añadir, modificar o eliminar propiedades del componente. Veremos que cuando hacemos cualquier cambio aquí el código cambia (este apartado es un asistente visual para la modificación de las vistas).
6. Librería de componentes. Acceso directo a todos los componentes que podemos añadir al código. Aquí podemos encontrar todos los componentes de SwiftUI que podremos añadir a nuestras vistas arrastrándolos.

Aparte de esto nos encontramos ante un proyecto de Xcode normal, por lo que los demás componentes del editor no han cambiado.

¡Esperamos que te haya gustado este post! La semana que viene traeremos un interesante artículo de cómo funciona SwiftUI.

Rafael Fernández,
iOS Tech Lider