Tiempo de juego con Jetpack Compose

Conozca la estrategia de Google Play Store para lanzar Jetpack Compose, cómo superaron desafíos específicos de rendimiento y cómo mejoraron la productividad y la satisfacción de los desarrolladores.

Publicado por Andrew Flynn y Jon Boekenoogen, Tech Leads en Google Play

En 2020, el liderazgo tecnológico de Google Play Store tomó la gran decisión de revisar toda la pila tecnológica de la tienda. El código existente tenía más de 10 años y había incurrido en una enorme deuda técnica debido a innumerables versiones de la plataforma Android y actualizaciones de funciones. Necesitábamos nuevos marcos que escalaran a la cientos de ingenieros trabajar en el producto sin afectarlo negativamente Productividad del desarrollador, experiencia de usuario o rendimiento de la propia tienda.

Hemos creado una hoja de ruta de varios años para actualizar todo en el negocio, desde la capa de red hasta la representación de píxeles. Como parte de esto, también queríamos presentar un marco de interfaz de usuario moderno y declarativo que cumpliera con los objetivos de interactividad y usabilidad de nuestro producto. Después de analizar el panorama de opciones, tomamos la audaz (entonces) decisión de comprometernos Componer jet packque todavía estaba en pre-alfa.

Desde entonces, los equipos de Google Play Store y Jetpack Compose en Google han trabajado muy de cerca para lanzar y optimizar una versión de Jetpack Compose que satisfaga nuestras necesidades específicas. En este artículo, cubrimos nuestro enfoque de migración y los desafíos y beneficios que encontramos en el camino, para brindar una idea de cómo puede ser la introducción de Compose en una aplicación con muchos colaboradores.

consideraciones

Al considerar Jetpack Compose para nuestra nueva capa de renderizado de interfaz de usuario, nuestras dos principales prioridades fueron:

1. Productividad del desarrollador: El equipo de Play Store tiene cientos de ingenieros que contribuyen a este código, por lo que debería ser fácil (y divertido) desarrollarlo.
2. Rendimiento: Play Store muestra una gran cantidad de contenido multimedia con muchas métricas comerciales que son muy sensibles a la latencia y los bloqueos, por lo que teníamos que asegurarnos de que funcionara bien en todas partes. Todo el mundo Dispositivos, especialmente hardware con poca memoria y dispositivos Android (Go Edition).

Productividad del desarrollador

Escribimos el código de la interfaz de usuario usando Jetpack Compose para ahora más de un año y disfruta de cómo Jetpack Compose simplifica el desarrollo de la interfaz de usuario.

nos encanta eso Escribir la interfaz de usuario requiere mucho menos código, a veces hasta un 50 %. Esto es posible porque Compose es un marco de interfaz de usuario declarativo y aprovecha la concisión de Kotlin. Los dibujos y diseños personalizados ahora son simples llamadas a funciones en lugar de ver subclases con anulaciones de métodos N.

Usando la tabla de evaluación como ejemplo:

Para las vistas, esta tabla consta de:

• Muestra 3 clases en total, 2 de las cuales requieren un dibujo personalizado para los rectángulos redondeados y las estrellas.
• ~350 líneas de Java, 55 líneas de XML

Para Compose, esta tabla consta de:

• Todos @Composable ¡Características incluidas en el mismo archivo e idioma!
• ~210 líneas Kotlin

animaciones son una característica popular de Compose por su simplicidad y expresividad. Nuestro equipo está desarrollando funciones de movimiento con Compose que están deleitando a nuestros usuarios de Play Store más que nunca. Con la naturaleza declarativa y las API de animación de Compose Nunca ha sido tan fácil escribir animaciones secuenciales o paralelas.. Nuestro equipo ya no teme todos los casos extremos de animaciones relacionadas con la cancelación y el encadenamiento de devolución de llamadas. Lottie, una popular biblioteca de animación, ya proporciona API de composición fáciles de usar.

Ahora podría estar pensando: todo esto suena genial, pero ¿qué pasa con las dependencias de la biblioteca que proporcionan vistas? Es cierto que no todos los propietarios de bibliotecas implementaron API basadas en Compose, especialmente cuando migramos por primera vez. Sin embargo, Compose ofrece interoperabilidad de vista simple con ComposeView y AndroidView API. Nos hemos integrado con éxito con bibliotecas populares como ExoPlayer y el reproductor de YouTube de esta manera.

rendimiento

Los equipos de Play Store y Jetpack Compose trabajaron en estrecha colaboración para garantizar que Compose se ejecute tan rápido y sin problemas como el marco de View. Debido a la forma en que Compose se incluye en la aplicación (en lugar de incluirse como parte del marco de trabajo de Android), esto fue un gran desafío. La representación de los componentes individuales de la interfaz de usuario en la pantalla fue rápida, pero los tiempos de extremo a extremo para cargar todo el marco de trabajo de Compose en la memoria para las aplicaciones fueron costosos.

Una de las mayores mejoras de rendimiento con el lanzamiento de Compose para Play Store provino del desarrollo de perfiles basicos. Si bien los perfiles en la nube ayudan a reducir el tiempo de inicio de la aplicación y existen desde hace un tiempo, solo están disponibles para API 28+ y no son tan efectivos para aplicaciones con cadencias de lanzamiento frecuentes (semanales). Para contrarrestar esto, los equipos de Play Store y Android han estado trabajando juntos en perfiles básicos: un perfil agrupado definido por el desarrollador que los propietarios de la aplicación pueden especificar. Se envían con su aplicación, son totalmente compatibles con Cloud Profiles y se pueden definir tanto en el nivel de la aplicación como en el nivel de la biblioteca (¡los usuarios de Compose obtienen esto gratis!). Al introducir perfiles básicos, Play Store vio una Disminución del tiempo de procesamiento de la página inicial en su página de resultados de búsqueda del 40%. ¡Eso es enorme!

Reutilización de componentes de la interfaz de usuario es una mecánica central de lo que hace que Compose funcione para el renderizado, especialmente en situaciones de desplazamiento. Compose hace todo lo posible por omitir la recomposición de elementos componibles que sabe que se pueden omitir (por ejemplo, si son inmutables), pero los desarrolladores también pueden forzar que los elementos componibles se traten como omitibles si todos los parámetros que cumplen @Stable requisitos de anotación. El compilador de redacción también proporciona una guía útil sobre lo que evita que se omitan ciertas funciones. Al crear componentes de interfaz de usuario muy reutilizados en Play Store, que a menudo se usaban en situaciones de desplazamiento, descubrimos que las recomposiciones innecesarias se sumaban a los tiempos de fotogramas faltantes y, por lo tanto, a la tartamudez. Construimos en Modifier para ver fácilmente estas recompilaciones en nuestra configuración de depuración también. Al aplicar estas técnicas a nuestros componentes de interfaz de usuario, Pudimos reducir el bloqueo en un 10-15%.

Modificador de visualización de recomposición en acción. Azul (sin recomposiciones), Verde (1 recomposición).

Otro componente clave para optimizar Compose para la aplicación Play Store fue un detallado, Estrategia de migración de extremo a extremo para toda la aplicación. Durante los experimentos iniciales de integración, nos encontramos con el problema de las dos pilas: ejecutar la renderización de Compose y View dentro de una sola sesión de usuario requería mucha memoria, especialmente en dispositivos de gama baja. Esto ocurría tanto con lanzamientos de código en la misma página como cuando dos páginas diferentes (por ejemplo, la página de inicio de Play Store y la página de resultados de búsqueda) estaban en una pila diferente. Para mejorar esta latencia de arranque, era importante para nosotros tener un plan concreto para ello. Orden y calendario de páginas que migran a Compose. Además, nos resultó útil agregar un calentamiento a corto plazo de clases compartidas como solución alternativa hasta que la aplicación se haya migrado por completo.

Separar Compose del marco de trabajo de Android ha reducido el esfuerzo de nuestro equipo que contribuye directamente a Jetpack Compose, lo que da como resultado tiempos de respuesta rápidos para las mejoras que benefician a todos los desarrolladores. Pudimos trabajar con el equipo de Jetpack Compose e introdujimos características como el almacenamiento en caché de los tipos de elementos de LazyList, así como arreglos rápidos como asignaciones de objetos adicionales.

mirando hacia el futuro

La adquisición de Compose por parte de Play Store ha sido una bendición para la satisfacción de los desarrolladores de nuestro equipo, y un gran paso adelante para la calidad y la salud del código. Todas las funciones nuevas de Play Store se basan en este marco y Compose fue fundamental para desbloquearlo. mejor velocidad y aterrizajes más suaves para la aplicación. Debido a la naturaleza de nuestra estrategia de migración de Compose, no hemos podido medir con precisión cosas como el cambio de tamaño de APK o la velocidad de compilación, ¡pero todas las señales que podemos ver parecen muy positivas!

Compose es el futuro del desarrollo de la interfaz de usuario de Android y, desde la perspectiva de Play Store, ¡no podríamos estar más felices!