TikTok est une plate-forme mondiale de vidéos courtes, connue pour son énorme base d'utilisateurs et ses fonctionnalités innovantes. L'équipe publie constamment des mises à jour, des tests et de nouvelles fonctionnalités pour ses utilisateurs. Face au défi de maintenir la vélocité tout en gérant la dette technique, l'équipe Android de TikTok s'est tournée vers Jetpack Compose.

L'équipe souhaitait itérer plus rapidement et de manière plus qualitative sur les exigences du produit. En utilisant Compose, l'équipe a cherché à améliorer l'efficacité de l'ingénierie en écrivant moins de code et en réduisant la charge cognitive, tout en obtenant de meilleures performances et une meilleure stabilité. 

Simplifier les interfaces utilisateur complexes pour accélérer la productivité des développeurs

Les pages TikTok sont souvent plus complexes qu'il n'y paraît, car elles contiennent de nombreuses exigences conditionnelles superposées. Cette complexité entraînait souvent des hiérarchies de vues difficiles à gérer, avec une structure sous-optimale et une imbrication excessive des vues, ce qui dégradait les performances en raison d'un nombre accru de passes de mesure.

Compose a sans frais une solution directe à ce problème structurel. 

De plus, la stratégie de mesure de Compose permet de réduire la double imposition, ce qui facilite l'optimisation des performances de mesure. 

Pour améliorer la productivité des développeurs, l'équipe centrale du système de conception de TikTok fournit une bibliothèque de composants aux équipes travaillant sur différentes fonctionnalités de l'application.  L'équipe a observé que le développement dans Compose est simple : l'utilisation de petits composables est très efficace, tandis que l'intégration de grands blocs d'UI avec une logique conditionnelle est à la fois simple et peu coûteuse.

Élaborer une stratégie de migration pour aller de l'avant

En adoptant stratégiquement Jetpack Compose, TikTok a pu maîtriser sa dette technique tout en continuant à se concentrer sur la création d'expériences de qualité pour ses utilisateurs. La capacité de Compose à gérer la logique conditionnelle de manière claire et à simplifier la composition a permis à l'équipe de réduire le temps de chargement des pages jusqu'à 78% sur les pages nouvelles ou entièrement réécrites. Cette amélioration était de 20 à 30% dans les cas les plus simples, et de 70 à 80% pour les réécritures complètes et les nouvelles fonctionnalités. Ils ont également pu réduire la taille de leur code de 58%, par rapport à la même fonctionnalité intégrée à Views. L'équipe a également partagé quelques enseignements :  

La stratégie globale de l'équipe TikTok consistait à migrer progressivement des parcours utilisateur spécifiques. Cela leur a permis de migrer, de confirmer les avantages mesurables, puis de passer à un plus grand nombre d'écrans. Ils ont commencé par utiliser Compose pour simplifier la structure globale de la fonctionnalité de code QR et ont constaté des améliorations. L'équipe a ensuite étendu la migration aux expériences de connexion et d'inscription. 

L'équipe a partagé d'autres enseignements :  

Lors de la vérification des performances pendant la migration, l'équipe TikTok a constaté que l'utilisation de nombreux petits ComposeViews pour remplacer des éléments à l'intérieur d'un seul ViewHolder entraînait une surcharge de composition. Ils ont obtenu de meilleurs résultats en étendant la migration pour utiliser une seule ComposeView pour l'ensemble du ViewHolder.

Lors de la migration d'un fragment à l'intérieur de ViewPager, qui comporte une logique de hauteur personnalisée et une logique conditionnelle pour masquer et afficher l'UI en fonction des tests, les performances n'ont pas été affectées. Dans ce cas, la migration du ViewPager vers Composable a été plus performante que la migration du Fragment. 

Jun Shen apprécie particulièrement le fait que Compose "réduise la quantité de code requise pour le développement de fonctionnalités, améliore la testabilité et accélère la livraison". L'équipe prévoit d'augmenter progressivement l'adoption de Compose, pour en faire son framework de référence à long terme. Jetpack Compose s'est avéré être une solution puissante pour améliorer à la fois l'expérience des développeurs et les métriques de production à grande échelle.

Premiers pas avec Jetpack Compose

Découvrez comment Jetpack Compose  peut aider votre équipe.