Ya está aquí la versión 1.0 de Jetpack Compose, y con ello la opción de crear Apps en Android desde cero con este nuevo sistema de vistas.

Pero, ¿tienes claro lo que es Jetpack Compose? ¿Acaso solo se puede utilizar en Android?

En el artículo de hoy te lo cuento todo, y con él abrimos un nuevo curso sobre Programación de interfaces declarativas en Android con Jetpack Compose.

¿Qué es Jetpack Compose?

Jetpack Compose es una sistema de creación de interfaces declarativas para Android.

Quizá te has quedado igual que estabas, pero es la tendencia hoy en día en cuanto a creación de interfaces en cualquier entorno.

Seguramente esta tendencia se empezó a popularizar con React, pero luego la hemos visto en marcha en iOS con Swift UI, en Flutter, y seguramente muchas otras que me estoy dejando por el camino.

Las interfaces declarativas consisten en sistemas de vistas que utilizan el paradigma de la programación declarativa: Con Compose decimos cómo queremos que sean las vistas, en lugar de especificar todos los pasos de implementación.

Todo esto suena mucho a programación funcional, y en parte tiene bastante que ver.

Pero la otra gran característica es que la interfaz está totalmente interconectada con un estado, de tal forma que si ese estado cambia, la interfaz se repinta para representar ese nuevo estado.

Este sistema de repintado es bastante complejo y de momento no vamos a entrar en cómo funciona, pero está muy optimizado para repintar solo las partes que lo requieren.

¿Es Jetpack Compose solo para Android?

Esta es una pregunta con trampa. El sistema de Compose está formado por tres partes:

1. El compiler (o compilador): es el que genera todo el código necesario para que el sistema de Compose funcione. Es realmente un plugin de compilación en Gradle, lo que le abre un mundo de posibilidades en cuanto a interpretación y generación de código.
2. El runtime (o entorno de ejecución): crea y mantiene el listados de elementos de la composición y define qué se tiene actualizar y qué no, entre otras muchas cosas
3. La librería de UI: es el que finalmente decide cómo se interpreta ese listado generado por el runtime y lo pinta en pantalla

Hay 2 componentes que se mantienen inmutables y que están pensados para trabajar de forma genérica: el compile y el runtime.

Pero hay otro que es intercambiable: la librería que interpreta el trabajo realizado por las otras dos partes.

Esto es muy importante, porque esto abre las puertas a que cualquier pueda implementar su propio composer que haga lo que necesite, incluso aunque no tengan nada que ver con interfaz de usuario.

Básicamente Compose es un sistema de propósito general para gestionar un árbol de nodos de cualquier tipo. Puedes ampliar más sobre esto en este artículo de Jake Wharton.

Yéndonos más al mundo de UI, JetBrains está implementando Compose for Desktop y Compose for Web, para hacer Apps de escritorio y web simplemente reescribiendo la librería de UI.

Esto hace que Compose sea el candidato ideal para implementar Apps en Kotlin Multiplatform en el futuro, puediendo incluso compartir partes del código de UI.

La implementación de Compose para Android se llama Jetpack Compose, y por tanto siendo puristas solo serviría para Android.

Si quieres ampliar más sobre cómo funciona Compose por dentro, te recomiendo el libro de Jorge Castillo (en inglés).

Creando tu primer proyecto

Crear un proyecto en Android Studio usando Jetpack Compose es muy sencillo desde la versión estable de Arctic Fox (2020.3.1 en adelante).

Tan solo hay que crear un nuevo proyecto, y elegir la opción de “Empty Compose Activity”:

Después podremos elegir la versión de Android. Compose funciona desde el API 21, por lo que podemos elegir desde esta en adelante.

¿Qué tenemos diferente? La realidad es que todo el proyecto que nos crea es muy similar. Sí que veremos alguna cosa diferente en MainActivity:

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyMoviesTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    Greeting("Android")
                }
            }
        }
    }

Si te fijas, la función setContent() que se usa es un poco especial, porque acepta un bloque de código.

En este bloque es donde vamos a poder escribir nuestro código de Compose. Ya verás que las funciones de Compose están marcadas de una forma un poco especial.

Pero de momento aquí podemos ver otra función MyMoviesTheme, que va a identificar el tema que va a usar nuestra aplicación (ya hablaremos sobre temas más adelante).

Los temas en Jetpack Compose son un poco diferentes, porque están definidos también por funciones de Compose en vez de por XMLs como veníamos haciendo hasta ahora.

Luego vemos el primer componente de vista de Compose hasta el momento: Surface. Una superficie de Material que toma el color del fondo del tema, aplica elevaciones si corresponde, etc. Se usa para cuando queremos definir un plano nuevo en la App. Muchas veces con el primero para el fondo de la App será suficiente.

Y finalmente, una función Greeting(), que no es más que una función de ejemplo para que entendamos cómo crear las nuestras propias.

Funciones Composable

Siempre que queramos crear un nuevo componente, o extraer cierta lógica a una función que contenga código de Compose, deberemos marcar nuestra función con la anotación @Composable.

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

Esto le da al compilador información para que sepa que tiene que generar para esta función el código necesario para poder tratarlo como un componente de Compose, y que pueda formar parte del árbol de nodos del mismo.

Esta función Greeting() además usa uno de los componentes de Compose que más usarás: Text().

Este sirve para definir textos de cualquier tipo en nuestra App, y nos dará muchas opciones de configuración.

¿Y qué hacemos si queremos ver cómo queda la UI en nuestro dispositivo? Tenemos dos formas: ejecutar la App, o usar previews

Las Previews

Cuando usamos Compose, perdemos la opción de utilizar el diseñador para hacernos una idea de cómo nos va a quedar sin ejecutar a cada minuto.

A cambio, han implementado la opción de Preview, que técnicamente nos permite ver de forma rápida los cambios de cualquier Composable sin necesidad de lanzar la App. Para ello, solo tenemos que marcar cualquier función @Composable con la anotación @Preview:

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MyMoviesTheme {
        Greeting("Android")
    }
}

Para que tenga la misma apariencia que el resultado final, se pueden envolver en la función MyMoviesTheme, y ya ahí escribimos la llamada al Composable que queramos probar.

Esto es lo que veremos en la preview:

Como verás, cada vez que se cambia algo hay que volver a compilar, lo cual es muy lento. De hecho, a día de hoy, en mi experiencia es más lento que directamente ejecutar en el dispositivo, por lo que verás que de forma habitual no voy a usar estas previews.

Lo que sí que se puede modificar y veremos cambios al momento (aunque también los veremos si ejecutamos en el dispositivo) son los literales.

Si modificas un texto o una dimensión, estos cambiarán en tiempo real. Puedes probar a cambiar el texto de "Android" por otra cosa.

La anotación de @Preview permite configurar algunas cosas. La primera de ellas es si queremos mostrar el fondo o no.

Como ves, la preview de ejemplo viene configurada para que se muestre. Otro parámetro importante es el del nombre. Si te fijas en la anterior preview, el nombre era DefaultPreview, pero ese nombre se puede cambiar para que nos dé más información:

@Preview(showBackground = true, name = "Android Greeting")

Cambiando el name, cambiará también en la preview:

Hay muchos otros parámetros configurables que puedes revisar en la propia anotación. Si en el futuro las previews se vuelven más usables, haré un artículo viéndolas más a fondo.

Si quieres probar lo lento que es a día de hoy, pues añadir otro Greeting() a la preview:

    MyMoviesTheme {
        Greeting("Android")
        Greeting("Antonio")
    }

Para verlo en la preview, necesitarás compilar.

Ahora verás que los elementos se superponen. Este es el comportamiento por defecto en Compose:

Pero no te preocupes, porque en el próximo artículo vamos a ver cómo disponer los elementos en pantalla para poder posicionarlos donde queramos.

Si quieres ver lo hecho hasta ahora puedes ver el código aquí. Cada paso es un commit, así que puedes hacer checkout del que te interese.

Jetpack Compose ha venido para quedarse

Es un hecho que Jetpack Compose es el futuro de Android, y es el momento de subirse a la ola y ser de los primeros en dominar esta tecnología.

Para ello, en DevExperto vamos a darte todas las herramientas para que lo consigas, empezando por un curso gratuito al que puedes acceder desde aquí:

En el próximo artículo vamos a entrar en materia, y veremos cuáles son los layouts principales en Jetpack Compose, y cómo estructurar las pantallas con ellos. ¡No te lo pierdas!