TikTok reduziert mit Jetpack Compose die Code-Größe um 58% und verbessert die App-Leistung für neue Funktionen

TikTok ist eine globale Plattform für Kurzvideos, die für ihre riesige Nutzerbasis und innovativen Funktionen bekannt ist. Das Team veröffentlicht ständig Updates, Tests und neue Funktionen für seine Nutzer. Das Android-Team von TikTok stand vor der Herausforderung, die Entwicklungsgeschwindigkeit beizubehalten und gleichzeitig die technische Schuld zu verringern. Daher entschied es sich für Jetpack Compose.

Das Team wollte eine schnellere und qualitativ hochwertigere Iteration der Produktanforderungen ermöglichen. Durch die Nutzung von Compose wollte das Team die Entwicklungseffizienz verbessern, indem es weniger Code schreibt und die kognitive Belastung reduziert. Gleichzeitig sollte die Leistung und Stabilität verbessert werden. 

Komplexe Benutzeroberfläche optimieren, um die Entwicklerproduktivität zu steigern

TikTok-Seiten sind oft komplexer, als es scheint, und enthalten zahlreiche geschichtete bedingte Anforderungen. Diese Komplexität führte oft zu schwer zu wartenden, suboptimal strukturierten View-Hierarchien und übermäßigem View-Nesting, was aufgrund einer erhöhten Anzahl von Messdurchläufen zu Leistungseinbußen führte.

Compose bot eine direkte Lösung für dieses strukturelle Problem. 

Außerdem trägt die Messstrategie von Compose dazu bei, die Doppelbesteuerung zu reduzieren, sodass sich die Leistung leichter optimieren lässt. 

Um die Produktivität der Entwickler zu steigern, stellt das zentrale Designsystem-Team von TikTok eine Komponentenbibliothek für Teams bereit, die an verschiedenen App-Funktionen arbeiten. Das Team stellte fest, dass die Entwicklung in Compose einfach ist. Die Verwendung kleiner Composables ist sehr effektiv, während die Einbindung großer UI-Blöcke mit bedingter Logik unkompliziert ist und nur einen minimalen Overhead verursacht.

Durch strategische Migration den Weg nach vorn gestalten

Durch die strategische Einführung von Jetpack Compose konnte TikTok die technischen Schulden im Griff behalten und sich gleichzeitig weiterhin darauf konzentrieren, seinen Nutzern ein optimales Erlebnis zu bieten. Dank der Möglichkeit von Compose, bedingte Logik sauber zu verarbeiten und die Komposition zu optimieren, konnte das Team die Seitenladezeit auf neuen oder vollständig neu geschriebenen Seiten um bis zu 78% reduzieren. Bei kleineren Anfragen lag die Verbesserung bei 20–30 %, bei vollständigen Überarbeitungen und neuen Funktionen bei 70–80 %. Außerdem konnten sie die Größe ihres Codes um 58%reduzieren im Vergleich zur selben Funktion,die in Views erstellt wurde. Das Team hat außerdem einige Erkenntnisse geteilt:  

Die allgemeine Strategie des TikTok-Teams bestand darin, bestimmte User Journeys schrittweise zu migrieren. So konnten sie die Migration durchführen, messbare Vorteile bestätigen und dann auf weitere Bildschirme ausweiten. Sie begannen mit Compose, um die Gesamtstruktur der QR‑Code-Funktion zu vereinfachen, und stellten Verbesserungen fest. Das Team erweiterte die Migration später auf die Anmelde- und Registrierungsfunktionen. 

Das Team hat einige zusätzliche Erkenntnisse geteilt:  

Bei der Überprüfung der Leistung während der Migration stellte das TikTok-Team fest, dass die Verwendung vieler kleiner ComposeViews zum Ersetzen von Elementen in einem einzelnen ViewHolder zu einem Kompositions-Overhead führte. Sie erzielten bessere Ergebnisse, indem sie die Migration so erweiterten, dass für den gesamten ViewHolder ein einzelnes ComposeView verwendet wurde.

Bei der Migration eines Fragments in ViewPager, das eine benutzerdefinierte Höhenlogik und eine bedingte Logik zum Ein- und Ausblenden der Benutzeroberfläche basierend auf Tests enthält, wurde die Leistung nicht beeinträchtigt. In diesem Fall war die Migration des ViewPager zu Composable besser als die Migration des Fragments. 

Jun Shen schätzt an Compose, dass „die für die Entwicklung von Funktionen erforderliche Menge an Code reduziert wird, die Testbarkeit verbessert wird und die Bereitstellung beschleunigt wird“. Das Team plant, Compose nach und nach einzuführen und es langfristig zum bevorzugten Framework zu machen. Jetpack Compose erwies sich als leistungsstarke Lösung, um sowohl die Entwicklerfreundlichkeit als auch die Produktionsmesswerte zu verbessern.

Erste Schritte mit Jetpack Compose

Weitere Informationen dazu, wie Jetpack Compose Ihrem Team helfen kann