TikTok es una plataforma mundial de vídeos cortos conocida por su enorme base de usuarios y sus innovadoras funciones. El equipo lanza constantemente actualizaciones, experimentos y nuevas funciones para sus usuarios. Ante el reto de mantener la velocidad y, al mismo tiempo, gestionar la deuda técnica, el equipo de Android de TikTok recurrió a Jetpack Compose.

El equipo quería acelerar y mejorar la calidad de la iteración de los requisitos del producto. Al aprovechar Compose, el equipo buscaba mejorar la eficiencia de la ingeniería escribiendo menos código y reduciendo la carga cognitiva, al tiempo que conseguía un mejor rendimiento y estabilidad. 

Simplificar las interfaces de usuario complejas para aumentar 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 daba lugar a jerarquías de vistas difíciles de mantener, con una estructura no óptima y con un anidamiento excesivo de vistas, lo que provocaba una degradación del rendimiento debido a un mayor número de pases de medición.

Compose ofrecía 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 a los equipos que trabajan en diferentes funciones de la aplicación. El equipo observó que el desarrollo en Compose es sencillo: aprovechar los elementos componibles pequeños es muy eficaz, mientras que incorporar bloques de interfaz de usuario grandes con lógica condicional es sencillo y tiene una sobrecarga mínima.

Crear un camino hacia el futuro mediante una migración estratégica

Al adoptar estratégicamente Jetpack Compose, TikTok pudo mantenerse al día con la deuda técnica y, al mismo tiempo, seguir centrándose en crear experiencias excelentes para sus usuarios. La capacidad de Compose para gestionar la lógica condicional de forma clara y optimizar la composición permitió al equipo reducir hasta un 78% el tiempo de carga de las páginas nuevas o totalmente reescritas. Esta mejora fue del 20-30% en los casos más pequeños y del 70-80% en las reescrituras completas y las funciones nuevas. También pudieron reducir el tamaño de su código en un 58% en comparación con la misma función creada en Vistas. El equipo ha compartido un par de conclusiones más:  

La estrategia general del equipo de TikTok consistía en migrar de forma incremental recorridos de usuario específicos. Esto les dio la oportunidad de migrar, confirmar los beneficios medibles y, a continuación, ampliar la cobertura a más pantallas. Empezaron usando Compose para simplificar la estructura general de la función de código QR y vieron las mejoras. Más adelante, el equipo amplió la migración a las experiencias de inicio de sesión y registro. 

El equipo ha compartido algunas conclusiones adicionales:  

Al comprobar el rendimiento durante la migración, el equipo de TikTok descubrió que usar muchas ComposeViews pequeñas para sustituir elementos dentro de un solo ViewHolder provocaba una sobrecarga de composición. Han conseguido mejores resultados ampliando la migración para usar un único ComposeView en todo el ViewHolder.

Al migrar un fragmento dentro de ViewPager, que tiene una lógica de altura personalizada y una lógica condicional para ocultar y mostrar la interfaz de usuario en función de los experimentos, el rendimiento no se vio afectado. En este caso, migrar ViewPager a Composable ha dado mejores resultados que migrar Fragment. 

A Jun Shen le gusta mucho que Compose "reduce la cantidad de código necesaria para desarrollar funciones, mejora la capacidad de prueba y acelera el lanzamiento". El equipo tiene previsto aumentar de forma constante la adopción de Compose para que se convierta en su framework preferido a largo plazo. Jetpack Compose demostró ser una solución eficaz para mejorar tanto la experiencia de los desarrolladores como las métricas de producción a gran escala.

Empezar a usar Jetpack Compose

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