La semana pasada, vi que la comunidad está tratando de transferir patrones de desarrollo probados de UIKit a SwiftUI. Pero estoy seguro de que la mejor manera de escribir código eficiente usando SwiftUI es olvidarse de UIKit y cambiar completamente su forma de pensar en términos de desarrollo de interfaz de usuario. Esta semana hablaré sobre las principales diferencias entre el desarrollo usando UIKit y SwiftUI.
Definición de diferencias
UIKit es un marco imperativo impulsado por eventos para crear interfaces de usuario para la plataforma iOS. Esto significa que debe manejar todos los cambios de estado durante eventos como cargar una vista, hacer clic en un botón, etc. Una gran desventaja de este enfoque es la dificultad de sincronizar la interfaz de usuario con su estado. Tan pronto como cambie el estado, debe agregar / eliminar / mostrar / ocultar manualmente las vistas y sincronizarlas con el estado actual de la aplicación.
SwiftUI es un marco declarativo para crear interfaces de usuario para todas las plataformas de Apple. La palabra clave en este caso es declarativa. Declarativo significa que el desarrollador necesita declarar lo que quiere lograr, y el marco se encargará de esto. El marco conoce la mejor manera de representar la interfaz de usuario.
UI = f(state)
En SwiftUI, la interfaz de usuario es una función de su estado. Esto significa que cada vez que cambia el estado de una vista, vuelve a contar la propiedad de su cuerpo y genera una nueva vista. Considere el siguiente ejemplo.
struct ContentView: View { @ObservedObject var store: Store var body: some View { Group { if store.isLoading { Text("Loading...") .font(.subheadline) } else { Image("photo") .font(.largeTitle) } } } }
En el ejemplo anterior, hay una vista que muestra el texto "Cargando ..." y muestra imágenes al final de la descarga.
ObserverObject es el estado de esta vista, y tan pronto como cambia, SwiftUI recalcula la propiedad del cuerpo y asigna una nueva vista. Durante el desarrollo con UIKit, es necesario ocultar / mostrar manualmente los elementos de la jerarquía de presentación, pero en SwiftUI no es necesario agregar / eliminar un indicador de carga. Hay varias formas en SwiftUI para describir el estado de una vista, para obtener más información sobre ellas, eche un vistazo a "
Envolturas de propiedades en SwiftUI ".
Ahora veremos más de cerca lo que sucede cuando cambia el estado de la vista. SwiftUI tiene una impresión de la jerarquía actual de vistas y, tan pronto como cambia su estado, calcula una nueva vista. SwiftUI aplica algoritmos de comparación para comprender las diferencias y agregar / eliminar / actualizar automáticamente las vistas necesarias. De manera predeterminada, SwiftUI usa la imagen de transición de entrada / salida estándar para mostrar / ocultar vistas, pero también es posible cambiar manualmente la transición a cualquier otra animación. Para obtener más información sobre la transición y las animaciones en SwiftUI, consulte mi artículo "
Animaciones en SwiftUI ".
Jerarquía de presentación
Hablemos sobre la jerarquía de vistas y cómo SwiftUI realmente muestra la estructura de las vistas. Lo primero que quiero mencionar es que SwiftUI no muestra la estructura de la vista mediante el mapeo uno a uno. Es posible utilizar tantos contenedores de vistas como desee, pero al final, SwiftUI muestra solo las vistas que tienen sentido para la representación. Esto significa que puede extraer su lógica en pequeñas representaciones y luego componerlas y reutilizarlas en la aplicación. No se preocupe, el rendimiento de la aplicación en este caso no se verá afectado. Para obtener más información sobre cómo crear vistas en SwiftUI, consulte
este artículo .
La mejor manera de comprender la jerarquía de representaciones complejas en SwiftUI es mostrar su tipo. SwiftUI utiliza un sistema de tipo estático para determinar la diferencia lo suficientemente rápido. En primer lugar, verifica el tipo de vista y luego verifica los valores de los componentes de la vista. No soy fanático de usar reflexiones en el código de trabajo, pero es muy útil en el proceso de aprendizaje.
print(Mirror(reflecting: ContentView(store: .init()).body))
Usando la estructura Mirror, puede mostrar el tipo real del cuerpo de ContentView y descubrir cómo funciona SwiftUI.
Conclusiones
Esta semana, aprendimos la principal diferencia entre UIKit y SwiftUI y examinamos en detalle el algoritmo de comparación en SwiftUI. Espero que hayas disfrutado el artículo. Gracias por leer y nos vemos la próxima semana!