Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Jetpack Compose Overview

Jetpack Compose Overview

Jetpack Compose es el kit de herramientas moderno de Android para compilar UI nativas.
Simplifica y acelera el desarrollo de la UI en Android. Crea interfaces de usuario más rápido con menos código, herramientas potentes y lo mejor de todo una API muy intuitiva de Kotlin.
Esta presentación se muestra los nuevos conceptos básicos y ejemplos de como cambia la forma de crear interfaces de usuario de forma declarativa con Jetpack Compose.

Aec5eaefa6787f3e5295a2669f8f05d8?s=128

Gustavo Lizárraga

October 13, 2021
Tweet

Transcript

  1. Jetpack Compose Overview La salvación para los Android Devs nativos.

  2. lizarragadev

  3. “En el mundo hay mas teléfonos celulares que seres humanos.

    Stats
  4. Gustavo Lizárraga GitHub Campus Expe rt Auth0 Ambassador GitKraken Ambassador

    Android & iOS Dev Trainer Speaker @lizarragadev
  5. Cuando te dicen que actualizarán el diseño de la app

    y sabes que tienes que modi fi car n-mil archivos XML, agregar montón de dependencias y sabes que se vienen tiempos oscuros sin tiempos libres…
  6. Problemas

  7. Historia Cambios representativos en herramientas de UI de Android durante

    los años. 2008 2013 2014 2017 2021 Jetpack Compose ConstraintLayout, Kotlin, Arch Components ART, RecyclerView Android Studio Android release
  8. UI Inconsistente Actualizaciones de la UI desde distintos lugares. fi

    ndViewById(…) Main.kt main.xml
  9. Vieja UI Versiones 2.2, 2.3, 4.0

  10. Nueva UI Versiones actuales

  11. Aferrarse al pasado No desagrupar el kit de herramientas de

    la inte rf az de usuario. Ni los botones de mi camisa se aferran tanto a aguantar como Google se aferró a seguir haciendo UI con XML.
  12. Duras actualizaciones Complejos cambios en actualizaciones de diseño. Cuando el

    equipo de diseño me envía el nuevo diseño de la app y yo recién acabé de fi xear problemas de la anterior versión.
  13. “ “API Design is building future regret” Chet Haase

  14. Solución

  15. Jetpack Compose

  16. None
  17. Jetpack Compose

  18. Kotlin Compiler Plugin Genera código necesario para que Compose funcione.

  19. Runtime Realiza un listado de elementos composables que se deben

    actualizar o mantener de las vistas.
  20. UI Library Interpreta el listado de Runtime para dibujarlo en

    pantalla.
  21. Características

  22. UI Declarativa

  23. Imperativo vs Declarativo ¡Hola a tod@s!

  24. Imperativo vs Declarativo • Sólo código • Inicializar con datos

    • Sincronizar con LiveData, etc. • XML + Código • Inicializar • Sincronizar
  25. UI Declarativa Flu tt er Swi ft UI

  26. UI Declarativa Compose Hello World!

  27. UI como función View/XML Compose UI as Object UI as

    Function
  28. Unbundled UI - OS Nuevo conjunto de widgets de inte

    rf az de usuario desagregado del sistema operativo.
  29. Inspirado en…

  30. ¿Cómo iniciamos?

  31. Android Studio h tt ps://developer.android.com/studio

  32. Compatibilidad Android 5.0 (API 21) o superior

  33. Demo

  34. None
  35. XML UI

  36. Conclusiones • No más XML. • No más fi ndViewById(…).

    • Composición sobre herencia. • El nuevo estándar para UI.
  37. Referencias • Jetpack Compose • What's new in Compose •

    Compose From First Principles • Jetpack Compose Internals (Book) • Codelabs - Jetpack Compose Basics
  38. Y como dijo mi ex, hasta aquí llegamos…

  39. speakerdeck.com/lizarragadev

  40. github.com/lizarragadev/ JetpackComposeDemo

  41. lizarragadev