SwiftUI: Que es y primeros pasos

| 2019-12-18 | No hay comentarios »

SwiftUI es un kit de herramientas de interfaz de usuario que nos permite diseñar aplicaciones de manera declarativa. Esa es una manera elegante de decir que le decimos a SwiftUI cómo queremos que nuestra UI se vea y funcione, y se da cuenta de cómo hacer que eso suceda a medida que el usuario interactúa con ella.

La UI declarativa se entiende mejor en comparación con la UI imperativa, que es lo que los desarrolladores de iOS estaban haciendo antes de iOS 13. En una interfaz de usuario imperativa, podríamos hacer que se llamara a una función cuando se hacía clic en un botón, y dentro de la función leíamos un valor y mostrar una etiqueta: modificamos regularmente la apariencia y el funcionamiento de la interfaz de usuario en función de lo que está sucediendo.

La UI imperativa causa todo tipo de problemas, la mayoría de los cuales giran en torno al estado, que es otro término elegante que significa «valores que almacenamos en nuestro código». Necesitamos rastrear en qué estado se encuentra nuestro código y asegurarnos de que nuestra interfaz de usuario refleje correctamente ese estado.

Si tenemos una pantalla con una propiedad booleana que afecta la interfaz de usuario, tenemos dos estados: el booleano podría estar activado o desactivado. Si tenemos dos booleanos, A y B, ahora tenemos cuatro estados:

A está apagado y B está apagado
A está encendido y B está apagado
A está apagado y B está encendido
A está encendido y B está encendido
¿Y si tenemos tres booleanos? O cinco? ¿O enteros, cadenas, fechas y más? Bueno, entonces tenemos mucha más complejidad.

Si alguna vez usó una aplicación que dice que tiene 1 mensaje no leído, sin importar cuántas veces intente saber si ha leído algo, ese es un problema de estado, es un problema de UI imperativo.

Por el contrario, la UI declarativa nos permite informar a iOS sobre todos los estados posibles de nuestra aplicación a la vez. Podríamos decir si hemos iniciado sesión muestra un mensaje de bienvenida, pero si hemos cerrado sesión, muestra un botón de inicio de sesión. No necesitamos escribir código para movernos entre esos dos estados a mano, ¡esa es la forma fea e imperativa de trabajar!

En cambio, dejamos que SwiftUI se mueva entre los diseños de la interfaz de usuario cuando cambia el estado. Ya le dijimos qué mostrar en función de si el usuario estaba conectado o desconectado, por lo que cuando cambiamos el estado de autenticación, SwiftUI puede actualizar la UI en nuestro nombre.

Eso es lo que significa declarativo: no estamos haciendo que los componentes de SwiftUI se muestren y oculten a mano, solo le estamos diciendo todas las reglas que queremos que sigan y dejando SwiftUI para asegurarnos de que esas reglas se cumplan.

Pero SwiftUI no se detiene allí: también actúa como una capa de interfaz de usuario multiplataforma que funciona en iOS, macOS, tvOS e incluso watchOS. Esto significa que ahora puede aprender un idioma y un marco de diseño, luego implementar su código en cualquier lugar.

¿Y cómo se hace una app con SwiftUI?

Básicamente, todo radica en un elemento clave: la vista. Esa vista debe devolver un Body, donde esté el contenido. Un contenido que debe tener un contenedor de mayor nivel (solo uno) que puede ser desde un elemento aislado como un texto, hasta una construcción anidada de varios elementos unos dentro de otros. Pero solo es una vista en el mayor nivel.

Podemos poner una barra de navegación (que sería el elemento de mayor nivel que devuelve el cuerpo), dentro una vista apilada vertical, dentro un botón y en el botón un texto y una imagen, por ejemplo. Dentro de una vista, además, podemos devolver otras vistas que hayamos hecho en otras estructuras con más elementos, y así crear una jerarquía de estos más compleja pero organizada por otro lado.

¿Por qué SwiftUI?

SwiftUI se acerca a un concepto más similar a la web y su diseño adaptativo (como ya hiciera el precursor React Native) para que sea más fácil de entender y diseñar por gente que se dedique puramente al diseño. Permite ver de un simple vistazo cómo va a quedar la interfaz y entender de dónde viene cada elemento y está conectado.

Si quieres empezar a probar solo necesitas un Mac y bajarte Xcode 11.

Acerca del autor: Rodrigo Paszniuk

Ingeniero Informático, amante de la tecnología, la música, el ciclismo y aprender cosas nuevas.

Posts Relacionados

  • Swift 5 llega a Xcode 10.2 Beta
  • Manual básico de Swift 3
  • Estructuras y Protocolos en Swift 3
  • Tuplas y Enumeraciones en Swift 3



SEGUÍNOS EN FACEBOOK


GITHUB