TikTok reduce el tamaño del código en un 58% y mejora el rendimiento de la app para las funciones nuevas con Jetpack Compose

TikTok es una plataforma global de videos cortos conocida por su enorme base de usuarios y sus funciones innovadoras. El equipo lanza constantemente actualizaciones, experimentos y funciones nuevas para sus usuarios. Ante el desafío de mantener la velocidad mientras se gestionaba la deuda técnica, el equipo de Android de TikTok recurrió a Jetpack Compose.

El equipo quería habilitar una iteración más rápida y de mayor calidad de los requisitos del producto. Con Compose, el equipo buscaba mejorar la eficiencia de la ingeniería escribiendo menos código y reduciendo la carga cognitiva, además de lograr un mejor rendimiento y estabilidad. 

Optimiza la IU compleja para acelerar la productividad de los desarrolladores

Las páginas de TikTok suelen ser más complejas de lo que parecen, ya que contienen numerosos requisitos condicionales en capas. Esta complejidad solía generar jerarquías de vistas difíciles de mantener y con una estructura poco óptima, además de un anidamiento excesivo de vistas, lo que causaba una degradación del rendimiento debido a un aumento en la cantidad de pases de medición.

Compose ofreció una solución directa a este problema estructural. 

Además, la estrategia de medición de Compose ayuda a reducir la doble imposición, lo que facilita la optimización del rendimiento de las mediciones. 

Para mejorar la productividad de los desarrolladores, el equipo central del sistema de diseño de TikTok proporciona una biblioteca de componentes para los equipos que trabajan en diferentes funciones de la app.  El equipo observó que el desarrollo en Compose es simple; aprovechar los pequeños elementos componibles es muy eficaz, mientras que incorporar grandes bloques de IU con lógica condicional es sencillo y tiene una sobrecarga mínima.

Cómo trazar un plan de acción a través de la migración estratégica

Con la adopción estratégica de Jetpack Compose, TikTok pudo mantenerse al tanto de la deuda técnica y, al mismo tiempo, seguir enfocándose en crear experiencias excelentes para sus usuarios. La capacidad de Compose para controlar la lógica condicional de forma limpia y optimizar la composición permitió que el equipo lograra una reducción de hasta un 78% en el tiempo de carga de las páginas nuevas o completamente reescritas. Esta mejora fue del 20% al 30% en casos más pequeños y del 70% al 80% para reescrituras completas y funciones nuevas. También pudieron reducir el tamaño de su código en un 58%, en comparación con la misma función compilada en Views. El equipo también compartió un par de aprendizajes:  

La estrategia general del equipo de TikTok era migrar de forma incremental los recorridos de los usuarios específicos. Esto les dio la oportunidad de migrar, confirmar los beneficios medibles y, luego, escalar a más pantallas. Comenzaron usando Compose para simplificar la estructura general de la función de código QR y vieron las mejoras. Luego, el equipo expandió la migración a las experiencias de acceso y registro. 

El equipo compartió algunos aprendizajes adicionales:  

Mientras verificaba el rendimiento durante la migración, el equipo de TikTok descubrió que usar muchos objetos ComposeView pequeños para reemplazar elementos dentro de un solo ViewHolder generaba una sobrecarga de composición. Obtuvieron mejores resultados cuando expandieron la migración para usar un solo ComposeView para todo el ViewHolder.

Cuando se migró un fragmento dentro de ViewPager, que tiene una lógica de altura personalizada y una lógica condicional para ocultar y mostrar la IU según los experimentos, el rendimiento no se vio afectado. En este caso, la migración de ViewPager a Composable tuvo un mejor rendimiento que la migración del fragmento. 

A Jun Shen le gusta mucho que Compose "reduzca la cantidad de código necesario para el desarrollo de funciones, mejore la capacidad de prueba y acelere la entrega". El equipo planea aumentar de forma constante la adopción de Compose, lo que lo convertirá en su framework preferido a largo plazo. Jetpack Compose demostró ser una solución potente para mejorar la experiencia de los desarrolladores y las métricas de producción a gran escala.

Cómo comenzar a usar Jetpack Compose

Obtén más información sobre cómo Jetpack Compose puede ayudar a tu equipo.