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 Android do TikTok recorreu ao Jetpack Compose.

A equipe queria permitir uma iteração mais rápida e de maior qualidade dos requisitos do produto. Ao aproveitar 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 performance e estabilidade. 

Simplificando a interface complexa para acelerar a produtividade do desenvolvedor

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, com estrutura abaixo do ideal e aninhamento excessivo de visualizações, o que causava degradação da performance devido a um número maior 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 bitributação, facilitando a otimização da performance de medição. 

Para melhorar a produtividade do desenvolvedor, 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 uma sobrecarga mínima.

Criando um caminho a seguir por meio da migração estratégica

Ao adotar o Jetpack Compose de forma estratégica, 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 forma 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% 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 compartilhou mais algumas lições aprendidas:  

A estratégia geral da equipe do TikTok era migrar incrementalmente jornadas de usuários específicas. 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 no recurso de QR code e observaram 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 aprendidas:  

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

Ao migrar um fragmento dentro do ViewPager, que tem lógica de altura personalizada e lógica condicional para ocultar e mostrar a interface com base em experimentos, a performance não foi afetada. Nesse caso, a migração do ViewPager para um elemento combinável teve um desempenho melhor do que a migração do fragmento. 

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 constantemente a adoção do Compose, tornando-o a estrutura preferida a longo prazo. O Jetpack Compose mostrou ser uma solução poderosa para melhorar a experiência do desenvolvedor e as métricas de produção em escala.

Começar a usar o Jetpack Compose

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