Si hace unos meses hablamos en este artículo sobre lo que es SwiftUI y el cambio de paradigma que ha supuesto en términos de la programación en iOS como lo conocíamos hasta ahora, en este artículo ponemos foco en cómo empezar a desarrollar en SwiftUI y los puntos más importantes que debemos conocer a la hora de empezar desarrollos en este nuevo lenguaje.
Prepara tu entorno
Antes de empezar hay que asegurarse de que el entorno de trabajo cuente con los requisitos mínimos aceptables para poder desarrollar en SwiftUI.
Los requisitos mínimos para contar con un entorno apto son:
- Versión de Xcode igual o superior a la 11.0
- Versión de iOS que vamos a usar igual o superior a iOS 13
- Versión de macOS igual o superior a macOS Catalina 10.15
Pero por ejemplo, el contenido de este post se está creando con:
- Versión de Xcode igual o superior a la 11.0
- Versión de iOS que vamos a usar igual o superior a iOS 13
- Versión de macOS igual o superior a macOS Catalina 10.15
Crea tu proyecto
A la hora de crear el proyecto es importante que en el momento en que se escoge un nombre y se selecciona interfaz con los que trabajar, el interfaz se cambie a «SwiftUI» como en el ejemplo de abajo para que una vez hecho se guarde el proyecto y quede todo listo para empezar a desarrollar.
Primer vistazo a SwiftUI
A simple vista se pueden observar unas cuantas diferencias principales con UiKit: un nuevo editor de vistas o la desaparición de los .xib / .storyboards y de las constraints.
Con SwiftUI cada vista que se desarrolla solo depende de un .swift que va a contener toda la información (tanto de vista como de código), y no de un .swift y un .xib / .storyboard como ocurre en UiKit.
Aunque de primeras puede parecer que esto hará que el código sea más complejo de entender, a medida que nuestro proyecto avance será notable que no es así.
Otra de las cosas que desaparecen en SwiftUI es el “AutoLayout”, ahora diseñar las vistas, añadir componentes y modificarlos va a ser mucho más fácil e intuitivo y hace posible olvidar de las constraints, que para much@s developers eran un dolor de cabeza importante.
Además, SwiftUI incorpora un nuevo editor de vistas que visualmente tiene un gran parecido a «Android Studio» (aunque no tienen nada que ver) y aplica los nuevos cambios, como se aprecia en la siguiente imagen:
Así, este editor de vistas nuevo consta de dos partes:
- Código: en la parte de la izquierda es visible el código Swift, lugar donde desarrollar la lógica que va a contener la vista.
- Live Preview: en la parte de la derecha podemos ver una preview donde es posible simular cómo queda la vista con cada una de las modificaciones que aplicamos en el código.
Elementos básicos de SwiftUI
¿Te perdiste el último workshop de Avantgarde IT? Nuestro Avantgardian y autor de este post Arnau Rivas Rivas (iOS Developer) nos enseñó las bases de SwiftUI desde cero y nos dio las claves para aplicar los nuevos conocimientos durante una segunda sesión práctica que consistió en desarrollar una aplicación con un listado de elementos y una navegación a un detalle con información del elemento seleccionado.
En él encontrarás más información y una explicación más extensa de los elementos básicos de SwiftUI como structs, contenedores y componentes.
Ahora puedes acceder a la grabación del workshop y ver las sesiones registrándote aquí 👇
