Jetpack Compose - Programando la UI en forma declarativa en Android con Kotlin

Las interfaces gráficas declarativas son una tendencia que se viene viendo en otras tecnologías, como React/React Native, Vue.js, Flutter, Litho y otros. En el caso de Android, Jetbrains y Google se encuentran desarrollando conjuntamente Jetpack Compose, el cual fue mostrado en el Google I/O de este año. Si te interesa adelantarte a la próxima forma de crear los layouts de tus apps, entonces en esta charla veremos los conceptos básicos y varias demos para que puedas empezar cuanto antes.

Transcript

1. Jetpack Compose Facundo Rodríguez Arceri @facundomr
2. ¿Qué es Jetpack Compose? • Librería • Plugin del compilador de Kotlin
3. ¿Quién lo desarrolla? • El equipo de desarrollo de Android. • En colaboración con Jetbrains.
4. ¿Por qué? • Librerías > clases del SDK. • Retrocompatibilidad. • Complejidad para reutilizar Views. • Single source of truth. • Necesidad de minimizar el código necesario.
5. ¿Por qué ahora? • Diez años de Android • Tendencia • Compatibilidad con layouts existentes • Kotlin ❤
6. ¿Cómo aprender? • Tutorial oficial • Codelab • Slack team: kotlinlang • ¡Esta charla!
7. ¡Empecemos!
9. Hasta ahora... • Una Activity en Android constaba de dos partes: ◦ Clase (Java/Kotlin) ◦ Layout (XML)
10. <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/greeting" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello Android!" /> </RelativeLayout>
11. class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) } }
12. class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) greeting.text = "Hello Facu!" } }
13. Declarative UI • Qué vs Cómo • Separación de responsabilidades • Cohesión vs Acoplamiento
15. class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { MaterialTheme { Greeting("Android") } } } } @Composable fun Greeting(name: String) { Text(text = "Hello $name!") }
17. @Composable • Funciones Kotlin simples. • La anotación hace la magia ✨ • ¡No genera Views convencionales! • Son reinvocadas cada vez que cambian los parámetros de entrada.
18. ¿Qué puedo hacer con ellas? • ¡Lo que quieras, es código Kotlin! • Composición por sobre herencia
19. Composición
21. data class Player(val name: String, val number: Int) class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val players = arrayListOf( Player("Nicolas Tagliafico", 3), Player("Leandro Paredes", 5), Player("Sergio Agüero", 9), Player("Lionel Messi", 10) ) setContent { PlayersList(players) } } }
22. @Composable fun PlayersList(players: List<Player>) { Column { players.forEach { PlayerRow(it) } } }
23. @Composable fun PlayerRow(player: Player) { Padding(padding = EdgeInsets(left = 32.dp, right = 16.dp, top = 8.dp, bottom = 8.dp)) { Row { Text( text = "${player.number}", style = TextStyle(fontWeight = FontWeight.Bold) ) WidthSpacer(width = 24.dp) Text(text = player.name) } } }
25. Flujo de datos
26. Flujo de datos • La idea es simplificar la arquitectura. • Las @Composable reciben los objetos que dibujan. • Los eventos que ocurren en una @Composable deben ser delegados a quien la invocó.
28. @Composable fun PlayersList(players: List<Player>) { Column { players.forEach { PlayerRow(it, listener = { Toast.makeText(baseContext, "Clickeaste a ${it.name}", Toast.LENGTH_SHORT) .show() }) } } }
29. @Composable fun PlayerRow(player: Player, listener: ((Player) -> Unit)) { Clickable(onClick = { listener(player) }) { Padding(padding = EdgeInsets(left = 32.dp, right = 16.dp, top = 8.dp, bottom = 8.dp)) { Row { Text( text = "${player.number}", style = TextStyle(fontWeight = FontWeight.bold) ) WidthSpacer(width = 24.dp) Text(text = player.name) } } } }
30. Reactividad
32. Reaccionando a cambios en el estado • El estado de la pantalla debe ser almacenado en alguna @Composable. • Dicho estado debe ser observable. • Las @Composables correspondientes deben ser reinvocadas cuando algún atributo del estado cambia.
33. @Model data class MainActivityModel(var players: MutableList<Player> = mutableListOf())
34. @Model • Genera una nueva clase. • Atributos observables. • Thread-safe. • Cuando una @Composable acceda a un atributo, será reinvocada cada vez que dicho atributo cambie.
35. class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { MyApp() } } }
36. @Composable fun MyApp(model: MainActivityModel = MainActivityModel()) { MaterialTheme { FlexColumn { inflexible { Button(text = "Agregar jugador", onClick = { model.players.add(Player("Nuevo jugador ${model.players.size}", model.players.size)) model.players = model.players }) } flexible(flex = 1f) { PlayersList(model.players) } } } }
37. @Composable fun PlayersList(players: List<Player>) { VerticalScroller { Column { players.forEach { PlayerRow(it) } } } }
39. Repasando
40. Links útiles • Documentación - https://d.android.com/jetpackcompose • Codelab - https://codelabs.developers.google.com/codelabs/jetpack-compose-basics • Android Dev Summit 2019 - https://www.youtube.com/user/androiddevelopers/playlist • Android Devs Bs As - https://www.twitter.com/AndroidDevsBsAs
41. ¿Preguntas?
42. ¡Muchas gracias!