O TikTok é uma plataforma global de vídeos curtos conhecida pela enorme base de usuários e recursos inovadores. A equipe está sempre lançando atualizações, experimentos e novos recursos para os usuários. Diante do desafio de manter a velocidade e gerenciar a dívida técnica, a equipe do TikTok para Android recorreu ao Jetpack Compose.

A equipe queria permitir uma iteração mais rápida e de maior qualidade dos requisitos do produto. Ao usar o Compose, a equipe buscou melhorar a eficiência de engenharia escrevendo menos código e reduzindo a carga cognitiva, além de alcançar melhor desempenho e estabilidade. 

Otimização de interfaces complexas para acelerar a produtividade dos desenvolvedores

As páginas do TikTok costumam ser mais complexas do que parecem, contendo vários requisitos condicionais em camadas. Essa complexidade geralmente resultava em hierarquias de visualização difíceis de manter e estruturadas de maneira inadequada, além de aninhamento excessivo de visualizações, o que causava degradação da performance devido ao aumento do número de transmissões de medição.

O Compose ofereceu uma solução direta para esse problema estrutural. 

Além disso, a estratégia de medição do Compose ajuda a reduzir a bitributação, facilitando a otimização da performance de medição. 

Para melhorar a produtividade dos desenvolvedores, a equipe central do sistema de design do TikTok oferece uma biblioteca de componentes para equipes que trabalham em diferentes recursos do app.  A equipe observou que o desenvolvimento no Compose é simples. O uso de pequenos elementos combináveis é altamente eficaz, enquanto a incorporação de grandes blocos de interface com lógica condicional é direta e tem sobrecarga mínima.

Construir um caminho para o futuro com a migração estratégica

Ao adotar estrategicamente o Jetpack Compose, o TikTok conseguiu manter a dívida técnica sob controle e continuar se concentrando na criação de ótimas experiências para os usuários. A capacidade do Compose de processar a lógica condicional de maneira limpa e simplificar a composição permitiu que a equipe reduzisse em até 78% o tempo de carregamento de páginas novas ou totalmente reescritas. Essa melhoria foi de 20 a 30% em casos menores e de 70 a 80% em reescritas completas e novos recursos. Eles também conseguiram reduzir o tamanho do código em 58%, em comparação com o mesmo recurso criado em Views. A equipe também compartilhou algumas lições:  

A estratégia geral da equipe do TikTok foi migrar gradualmente jornadas específicas do usuário. Isso deu a eles a oportunidade de migrar, confirmar benefícios mensuráveis e depois escalar para mais telas. Eles começaram usando o Compose para simplificar a estrutura geral no recurso de QR code e notaram as melhorias. Mais tarde, a equipe expandiu a migração para as experiências de login e inscrição. 

A equipe compartilhou mais algumas lições:  

Ao verificar a performance durante a migração, a equipe do TikTok descobriu que usar muitas ComposeViews pequenas para substituir elementos em um único ViewHolder causava sobrecarga de composição. Eles conseguiram resultados melhores ao expandir a migração para usar uma única ComposeView em todo o ViewHolder.

Ao migrar um Fragment dentro do ViewPager, que tem lógica de altura personalizada e lógica condicional para ocultar e mostrar a interface com base em experimentos, o desempenho não foi afetado. Nesse caso, migrar o ViewPager para Composable teve um desempenho melhor do que migrar o Fragment. 

Jun Shen gosta muito do fato de que o Compose "reduz a quantidade de código necessária para o desenvolvimento de recursos, melhora a capacidade de teste e acelera a entrega". A equipe planeja aumentar gradualmente a adoção do Compose, tornando-o a estrutura preferida no longo prazo. O Jetpack Compose provou ser uma solução eficiente para melhorar a experiência do desenvolvedor e as métricas de produção em grande escala.

Comece a usar o Jetpack Compose

Saiba mais sobre como o Jetpack Compose  pode ajudar sua equipe.