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. Confrontée au défi de maintenir sa vitesse tout en gérant sa dette technique, l'équipe Android de TikTok s'est tournée vers Jetpack Compose.

L'équipe souhaitait permettre une itération plus rapide et de meilleure qualité des exigences produit. En tirant parti de 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 améliorant les performances et la stabilité. 

Rationaliser 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 à maintenir, structurées de manière 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 constaté 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'interface utilisateur avec une logique conditionnelle est à la fois simple et peu coûteuse.

Préparer l'avenir grâce à une migration stratégique

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 propre et à rationaliser la composition a permis à l'équipe de réduire jusqu'à 78 % le temps de chargement des pages nouvelles ou entièrement réécrites. Cette amélioration était de 20 à 30 % dans les cas plus petits et de 70 à 80 % pour les réécritures complètes et les nouvelles fonctionnalités. L'équipe a également pu réduire la taille de son code de 58 %, par rapport à la même fonctionnalité créée dans 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 lui a permis de migrer, de confirmer les avantages mesurables, puis de passer à davantage d'écrans. L'équipe a commencé par utiliser Compose pour simplifier la structure globale de la fonctionnalité de code QR et a constaté les améliorations. Elle a ensuite étendu la migration aux expériences de connexion et d'inscription. 

L'équipe a partagé quelques enseignements supplémentaires :

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 dans un seul ViewHolder entraînait une surcharge de composition. Elle a obtenu de meilleurs résultats en étendant la migration pour utiliser un seul ComposeView pour l'ensemble du ViewHolder.

Lors de la migration d'un fragment dans ViewPager, qui comporte une logique de hauteur personnalisée et une logique conditionnelle pour masquer et afficher l'interface utilisateur en fonction des tests, les performances n'ont pas été affectées. Dans ce cas, la migration de 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 préféré à 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.