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 los usuarios. Ante el desafío de mantener la velocidad y, al mismo tiempo, administrar la deuda técnica, el equipo de Android de TikTok recurrió a Jetpack Compose.

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

Optimización de 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 a menudo generaba jerarquías de View difíciles de mantener, con una estructura subóptima y un anidamiento excesivo de View, lo que provocaba una degradación del rendimiento debido a un mayor número 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 tributació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 objetos componibles pequeños es muy eficaz, mientras que incorporar grandes bloques de IU con lógica condicional es sencillo y tiene una sobrecarga mínima.

Cómo construir un camino hacia el futuro a través de la migración estratégica

Al adoptar Jetpack Compose de forma estratégica, 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 clara y optimizar la composición permitió que el equipo lograra una reducción de hasta el 78% en el tiempo de carga de las páginas nuevas o completamente reescritas. Esta mejora fue del 20 al 30% en los casos más pequeños y del 70 al 80% en las reescrituras completas y las funciones nuevas. También pudieron reducir el tamaño del código en un 58%, en comparación con la misma función compilada en Views. Además, el equipo compartió algunas conclusiones:  

La estrategia general del equipo de TikTok consistió en migrar de forma incremental recorridos de usuarios específicos. Esto les brindó la oportunidad de migrar, confirmar beneficios medibles y, luego, escalar a más pantallas. Comenzaron a usar Compose para simplificar la estructura general de la función de código QR y observaron las mejoras. Más adelante, 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 ComposeViews pequeños para reemplazar elementos dentro de un solo ViewHolder generaba una sobrecarga de composición. Obtuvieron mejores resultados expandiendo la migración para usar un solo ComposeView para todo el ViewHolder.

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

A Jun Shen le gusta mucho que Compose "reduce la cantidad de código necesario para el desarrollo de funciones, mejora la capacidad de prueba y acelera 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 tanto la experiencia de los desarrolladores como las métricas de producción a gran escala.

Comienza a usar Jetpack Compose

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