Desde la primera release lanzada el 28 de julio de 2021, Compose llegó para cambiar todo el paradigma de cómo se desarrolla la interfaz de usuario nativa en Android. El enfoque declarativo de Jectpak Compose hace que cambie radicalmente la forma en la que se desarrollaba la interfaz de usuario, obligando a cambiar por completo la manera de pensar al momento de desarrollar UI para nuestras aplicaciones.
Ahora mismo ya se encuentra en la reléase 1.2 y es fácil que surja la pregunta ¿Desarrollamos usando Jectpack Compose? ¿Por qué se debería usar? ¿Aprendo Compose? A lo largo de esta lectura estas preguntas se responden.
Tal y como se explica en la página de Andorid developer “Jetpack Compose es el conjunto de herramientas moderno de Android para crear una interfaz de usuario nativa. Simplifica y acelera el desarrollo de la interfaz de usuario en Android, dando vida a sus aplicaciones con menos código, herramientas potentes y API de Kotlin intuitivas. Hace que la creación de la interfaz de usuario de Android sea más rápida y sencilla”.
Pero qué realmente significa “menos código, intuitivo o más rápido”. Veamos en detalle punto por punto.
Este es el primer gran cambio, Compose se escribe en Kotlin, sí, tal y como lo estás leyendo ha llegado la hora de olvidar los XML. Nuestra UI solo estará escrita en Kotlin, ya no tendremos que dividir el desarrollo entre XML y Kotlin, por lo tanto, la cantidad de código disminuye en comparación al sistema de Android View.
Visualizar nuestra UI será tan sencillo como llamar a la función @Composable y toda nuestra interfaz de usuario será creada tal y como la hemos definido en la función.
Te podrás estar preguntado ¿función @Composable? Como te he comentado antes, nos olvidamos de los XML y por lo tanto no usaremos las class View, nuestra base serán los @Comopsable y no son clases sino funciones, más adelante te explico qué son las funciones @Composables.
Solo debemos declarar nuestra UI, y Compose ya se encarga. ¿Así de sencillo? Sí, te doy un poco más de detalle.
El enfoque de Compose es declarativo, por lo tanto, nuestra interfaz será desarrollada únicamente pensando en ¿qué queremos lograr? y no en ¿cómo lo queremos lograr?
El enfoque que anteriormente se usaba en el sistema de Android View era un enfoque imperativo, en el cual desarrollábamos una serie de pasos para poder realizar acciones que permitían cambiar el estado de nuestra interfaz y así llegar al resultado esperado.
En Compose tenemos la ventaja de desarrollar nuestra UI tal y como la hemos definido y en cuanto al estado y a los cambios que pueda sufrir por acciones del usuario, Compose vuelve a llamar a la función @Composable con los datos nuevos que indiquemos. Eso provoca la recomposición de la función. El framework de Compose puede recomponer de forma inteligente solo los componentes que cambiaron de la UI y volver a dibujarlos.
Para entender el enfoque declarativo de una forma más cotidiana, veamos un ejemplo:
Una persona llega a una cafetería y quiere un café cortado
Compose acelera el desarrollo, Android Studio nos brinda funciones como la vista previa en vivo, por lo que podremos iterar sobre cualquiera de nuestra UI, de hecho, podremos crear distintas vistas previas y por lo tanto podrás validar diferentes configuraciones de tu pantalla. Sencillo, ahorras tiempo creando múltiples vistas previas para comprobar que funciona correctamente cada configuración que necesitas de cada @Composable.
Además de lo comentado, Compose permite crear aplicaciones atractivas y accesibles de forma rápida.
Aplicaciones atractivas ya que posee una compatibilidad completamente integrada con Material Desing.
Apps Accesibles, porque ofrece una API de accesibilidad, Compose usa propiedades de semántica para pasar información a los servicios de accesibilidad, ¿qué quiere decir esto? que Compose por detrás posee un árbol semántico, en ese árbol se describe la UI, de manera que los servicios de accesibilidad usan esa información para describir la UI a usuarios con necesidades específicas. Si nuestras aplicaciones utilizan elementos que admiten composición y modificadores de la biblioteca base o de Material Compose, nuestro árbol se generará automáticamente y la magia estará hecha, ahorraremos mucho tiempo cuando se trate de este tipo de elementos en temas de accesibilidad. Para elementos personalizados que siempre probablemente aparecerán en nuestros desarrollos, le tendremos que definir su semántica de forma manual y si por algún motivo no nos gusta la forma automática en la que se describe la UI de los elementos que se generen automáticamente, podremos adaptar ese árbol, utilizando el modificador semantics.
Tienes ganas de empezar con Compose, te ayudo con los primeros pasos, para comenzar un proyecto con Compose es tan sencillo como descargar Android Studio, te recomiendo la versión estable te dejo por aquí el enlace.
Una vez instalado Android Studio, seleccionamos New Project, elegimos la categoría Phone and Tablet y seleccionamos Empty Compose Activity. Compose funciona a partir del Api 21.
Cuando se cree el proyecto veremos la Main Activity. Te explico que hace ese código; encontraremos una función setContent, donde podremos escribir código Compose, por otro lado veremos MyApplicationTheme que identificará el tema de la aplicación, por último veremos la llamada a una función llamada Greeting.
Greeting es una función @Composable, en este caso por defecto Android Studio la crea para que tengamos un ejemplo de una función de este tipo, más adelante te explico qué son estas funciones.
Por último, tendremos una función @Composable con la anotación @Preview que será la anotación que nos permita previsualizar la configuración de nuestros distintos Composables.
Esta función te permite configurar algunos parámetros específicos para la vista previa, como lo es el tema, si ves la imagen del código, se envuelve la función Gretting dentro del tema de la aplicación, se puede configurar el fondo de la preview , tamaño y otras series de parámetros.
Una función @Composable no es más que una función que toma los datos y emite elementos de la interfaz.
Al tomar datos quiere decir que puede recibir parámetros y a través de ellos que la lógica de la aplicación describa la interfaz de usuario. Como te comenté antes serán la base de nuestro desarrollo, siempre que queramos hacer un componente o realizar una lógica que contenga Compose vamos a tener que utilizar la anotación @Composable.
En la imagen anterior vemos un simple ejemplo de una función @Composable, donde tenemos un Texto “Hello IfGeekThen”, en el cual le indicamos mediante un modificador el tamaño de ancho y el tamaño de largo.
Ya hemos hablado un poco de lo valioso que puede ser Compose, le hemos dado sentido y significado a lo de “más rápido, menos código e intuitivo”, los primeros pasos para crear un proyecto y además te he explicado que es una función composable.
Ahora te explicaré un punto que bajo mi opinión es clave para el desarrollo con Compose y muy importante para cambiar la forma de pensar al momento de desarrollar, en algunos párrafos anteriores te lo he mencionado, se trata del estado. Es un tema que da para mucho, pero mi objetivo es darte una pequeña introducción de lo que considero importante para empezar.
Primer punto clave y que debemos recordar siempre, si el estado cambia la UI va a cambiar. Ya no tendremos un estado de presentación y otro estado de vista, en el que la vista gestionaba su propio estado, ahora tendremos un único estado y por lo tanto no tendremos que controlar la sincronización de ambos.
Entonces ¿cómo cambiamos o actualizamos nuestra UI cuando el estado cambia? Si recuerdas te expliqué que Compose es declarativo, para poder actualizar un elemento la única forma que podremos hacerlos es llamando al mismo elemento @Composable con argumentos nuevos, estos argumentos que te estoy mencionando serán la representación del estado en la UI.
El Composable necesita conocer que su estado ha cambiado, para ello los parámetros de la composición tendrán que usar una instancia de State. En este caso si usamos MutableState para definir los valores de la composición que controlarán el estado de nuestro @Composable, cuando se modifique el valor, todos los @Composables que dependan de ese estado se recomponen y se actualizará la UI.
Cada vez que se modifica un estado, se produce lo que en Android han denominado recomposición.
El resultado de la recomposición hará que se renderice toda la función @Composable incluyendo los argumentos de estado con instancia State. Para que el composable pueda recordar el valor de los argumentos de tipo MutableState debemos hacer uso del remember, esta función va a recordar los valores que le indiquemos en cada recomposición y además puede utilizar objetos mutables e inmutables. También existe rememberSaveable que soporta cambios de configuración del dispositivo, como por ejemplo cambio de orientación.
En el siguiente ejemplo obtenido de la página de Android Developer, vemos una función Composable con argumentos con instancia State y recordando el estado para la variable name.
Se que puede ser mucho contenido y queda mucho más que conocer sobre Compose que no he tratado en este artículo, pero como todo siempre tiene un fin te dejo algunas mis conclusiones:
ifgeekthen.nttdata.com es un blog del grupo NTT DATA. Un proyecto que busca compartir con profesionales del mundo digital temas relacionados con la tecnología y el universo geek.
