O TikTok reduz o tamanho do código em 58% e melhora o desempenho do app para novos recursos com o Jetpack Compose

O TikTok é uma plataforma global de vídeos curtos conhecida pela enorme base de usuários e pelos 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, ao mesmo tempo, gerenciar o débito técnico, 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 da engenharia escrevendo menos código e reduzindo a carga cognitiva, além de alcançar melhor desempenho e estabilidade. 

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

As páginas do TikTok costumam ser mais complexas do que parecem, com vários requisitos condicionais em camadas. Essa complexidade geralmente resultava em hierarquias de visualização difíceis de manter e estruturadas de forma inadequada, além de aninhamento excessivo de visualizações, o que causava degradação do desempenho devido a um aumento no número de passagens 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 dupla tributação, facilitando a otimização do desempenho da medição. 

Para melhorar a produtividade dos desenvolvedores, a equipe central do sistema de design do TikTok oferece uma biblioteca de componentes para as 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 é simples e tem uma sobrecarga mínima.

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

Ao adotar o Jetpack Compose de forma estratégica, o TikTok conseguiu controlar o débito técnico e, ao mesmo tempo, continuar focado em criar ótimas experiências para os usuários. A capacidade do Compose de lidar com lógica condicional de forma limpa e simplificar a composição permitiu que a equipe reduzisse em até 78% o tempo de carregamento da página em páginas novas ou totalmente reescritas. Essa melhoria foi de 20% a 30% em casos menores e de 70% a 80% para 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 visualizações. A equipe também compartilhou alguns aprendizados:  

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

A equipe compartilhou mais alguns aprendizados:  

Ao verificar o desempenho 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 alcançaram resultados melhores ao expandir a migração para usar um único ComposeView para 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 IU com base em experimentos, o desempenho não foi afetado. Nesse caso, a migração do ViewPager para o Composable teve um desempenho melhor do que a migração do 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 testabilidade e acelera a entrega". A equipe planeja aumentar gradualmente a adoção do Compose, tornando-o o framework preferido a longo prazo. O Jetpack Compose provou ser uma solução poderosa para melhorar a experiência do desenvolvedor e as métricas de produção em grande escala.

Comece a usar o Jetpack Compose

Saiba como o Jetpack Compose pode ajudar sua equipe.