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 y 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. Al aprovechar Compose, el equipo buscó 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. 

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 vistas difíciles de mantener y estructuradas de forma no óptima, además de un anidamiento excesivo de vistas, lo que causaba una degradación del rendimiento debido a una mayor 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 la medición. 

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 componentes 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.

Creación de un camino hacia adelante a través de la migración estratégica

Al adoptar estratégicamente 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 clara y optimizar la composición permitió al equipo lograr una reducción de hasta el 78% en el tiempo de carga de la página en 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 del código en un 58%, en comparación con la misma función compilada en Views. Además, el equipo compartió un par de aprendizajes:  

La estrategia general del equipo de TikTok fue migrar de forma incremental recorridos específicos del usuario. Esto les dio la oportunidad de migrar, confirmar beneficios medibles y, luego, escalar a más pantallas. Comenzaron usando Compose para simplificar la estructura general en la función de código QR y vieron las mejoras. Más tarde, 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 causaba 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 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 convierte 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.