9

Jetpack Compose: El futuro de Kotlin con Android.

Giuseppe
gvetri
12258
<h1>Jetpack Compose</h1> <h1>Anteriormente en Android</h1>

El SDK de Android, nos permite desarrollar aplicaciones para el sistema operativo del robot verde. Este SDK lleva más de 10 años, 10 en los que la comunidad ha buscado siempre mejorar hacia una forma más fácil de crear aplicaciones Android y permitir que cualquiera pueda empezar a crear apps.

Hemos visto cómo han pasado de ser layouts en XML súper anidados con cientos de líneas de código, a layouts más planos en donde herramientas como Constraint Layout han ayudado a reducir el anidamiento de vistas.

<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"><ImageViewandroid:id="@+id/icon"android:layout_width="40dp"android:layout_height="40dp"android:layout_marginStart="16dp"android:layout_marginTop="16dp"android:contentDescription="Icon image"android:src="@drawable/library_notification_icon"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /><com.google.android.material.textview.MaterialTextViewandroid:id="@+id/userName"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_marginStart="16dp"android:layout_marginTop="16dp"android:text="Julia Gutierrez"app:layout_constraintStart_toEndOf="@id/icon"app:layout_constraintTop_toTopOf="parent" /><com.google.android.material.textview.MaterialTextViewandroid:id="@+id/jobDescription"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_marginStart="16dp"android:layout_marginTop="8dp"android:text="Android Developer"app:layout_constraintStart_toEndOf="@id/icon"app:layout_constraintTop_toBottomOf="@id/userName" /></androidx.constraintlayout.widget.ConstraintLayout>

Aunque también existe la posibilidad de crear vistas por código con el viejo Java o utilizando Kotlin, la complejidad de estas es bastante alta. Y en este no tan nuevo mundo, con Kotlin como primer lenguaje de desarrollo Android, es normal que “hacer las cosas a lo Java” no aproveche tanto las ventajas de Kotlin.

Sacándole provecho a Kotlin

Kotlin como lenguaje puede darnos muchas funcionalidades que el viejo Java no puede, ya que Kotlin es un lenguaje con diferentes paradigmas de programación como estandartes. Por ejemplo: Una de las características de Kotlin es la inmutabilidad.

Si quieres aprender más sobre Kotlin y sobre qué es la inmutabilidad te recomiendo el curso de Kotlin para Android aquí en Platzi.

Las funciones de extensión y las funciones inline son grandes herramientas que ayudan a crear buenos frameworks con APIS legibles y fáciles de utilizar, estas nos permiten ahorrar código repetitivo y crear código fácil de entender y de reutilizar.

Dejando la programación imperativa atrás

Con Kotlin podemos cambiar a otro paradigma de programación llamada programación declarativa.

En la programación imperativa lo que se hace es obtener una instancia de un objeto de vista y luego modificar propiedades de esta instancia. Por ejemplo:

val textviewNombre : TextView = findViewById(R.id.userName)
textviewNombre.text = "Giuseppe Vetri"

En la programación declarativa, se haría de la siguiente manera:

return Text(text = "Giuseppe")

Ya que en la programación declarativa estas View serían inmutables en lugar de obtener una vieja instancia y modificarla, esta instancia se actualizará a sí misma con un nuevo valor.

Una película basada en hechos reales

Este tipo de programación ya se utiliza actualmente en frameworks como Flutter o React Native. Claramente dada la popularidad de estos frameworks habrá servido de inspiración para que el equipo de Google se haya tomado la titánica tarea de rehacer todo el framework de UI de Android.

Presentando Jetpack compose

Con jetpack compose podremos cambiar de esto:

<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"><ImageViewandroid:id="@+id/icon"android:layout_width="40dp"android:layout_height="40dp"android:layout_marginStart="16dp"android:layout_marginTop="16dp"android:contentDescription="Icon image"android:src="@drawable/library_notification_icon"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" /><com.google.android.material.textview.MaterialTextViewandroid:id="@+id/userName"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_marginStart="16dp"android:layout_marginTop="16dp"android:text="Julia Gutierrez"app:layout_constraintStart_toEndOf="@id/icon"app:layout_constraintTop_toTopOf="parent" /><com.google.android.material.textview.MaterialTextViewandroid:id="@+id/jobDescription"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_marginStart="16dp"android:layout_marginTop="8dp"android:text="Android Developer"app:layout_constraintStart_toEndOf="@id/icon"app:layout_constraintTop_toBottomOf="@id/userName" /></androidx.constraintlayout.widget.ConstraintLayout>

Para poder crear esto:

Jetpack Compose Preview

A el siguiente código en Kotlin para tener el mismo resultado:

classMainActivity : AppCompatActivity() {
    overridefunonCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApp {
                MyScreenContent()
            }
        }
    }
}

@Composable
funMyApp(content: @Composable () -> Unit) {
    ComposeStartTheme {
        Surface(color = Color.White) {
            content()
        }
    }
}

@Composable
funMyScreenContent() {
    Row(Modifier.padding(16.dp)) {
        val imageModifier = Modifier.preferredSize(120.dp, 120.dp)
        Image(imageResource(id = R.drawable.picture), modifier = imageModifier)
        Column {
            Text(text = "Julia Gutierrez", modifier = Modifier.padding(start = 16.dp, end = 16.dp))
            Text(
                text = "Android Developer",
                modifier = Modifier.padding(start = 16.dp, top = 8.dp, end = 16.dp)
            )
        }
    }
}

En el mundo de jetpack compose dejamos atrás los XML y vamos definiendo todo mediante funciones componibles, por ejemplo los estilos de tu aplicación o las modificaciones que quieras hacer a una vista.

Además de todo esto, si agregamos la anotación @Preview Jetpack compose nos permitirá ver las preview de cada vista en Android Studio y así evitar tener que correr toda la app para ver la previsualización de nuestra vista.

Jetpack Compose Example

Las cosas buenas y las cosas no tan buenas de compose

En mi opinión estas son las razones por las cuales Jetpack compose es un paso inmenso en el desarrollo de Android.

  • La creación de vistas personalizadas y la reutilización de componentes será más fácil reduciendo la duplicidad de código.
  • La programación declarativa hará que el código sea más intuitivo.

Seguramente hay un montón de cosas que podría seguir enumerando de Jetpack compose, pero también quiero agregar algunas cosas que por el momento no están tan bien.

  • Actualmente está en Alpha y puede sufrir grandes cambios, debido a esto no es recomendable usarlo en la producción todavía.
  • Significa un cambio de paradigma de programación a la cual muchos tendremos que adaptarnos.
  • Al principio habrá menos código de referencia para ver cómo realizar cierta funcionalidad, si lo comparamos con el sistema que venimos usando en Android para las vistas el cual lleva ya 10 años. Sin embargo, Google está apostando muy fuerte para crear una gran cantidad de contenido para que no falte nada y estoy seguro que la comunidad llenará rápido esas referencias, solo hará falta buscar en google su equivalente y encontraremos la alternativa.

Si quiero aprender Android, ¿debería empezar con Jetpack Compose?

No. El XML todavía tiene mucho tiempo por vivir, además todas las apps hasta el momento están hechas de esta forma, luego cuando compose esté disponible en versión estable podrías plantearte migrar o empezar a usar compose en la app que estés trabajando 😉. Mientras tanto puedes empezar aprendiendo sobre layouts en Android con este Curso de Introducción al Desarrollo de Interfaces con Android Studio.

Preparandonos para el futuro

A medida que haya más aplicaciones necesitaremos más desarrolladores Android y aquellos que nunca paren de aprender llegarán más lejos. En Platzi tenemos cursos para que puedas lograr estos objetivos, no seas alguien que solo utiliza apps. Atrévete a crearlas 🚀.

https://platzi.com/desarrollo-android/

Links

https://developer.android.com/jetpack/compose/setup

Escribe tu comentario
+ 2