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

TikTok ist eine globale Plattform für Kurzvideos, die für ihre große Nutzerbasis und innovativen Funktionen bekannt ist. Das Team veröffentlicht ständig Updates, Tests und neue Funktionen für seine Nutzer. Angesichts der Herausforderung, das Tempo beizubehalten und gleichzeitig technische Schulden zu verwalten, wandte sich das Android-Team von TikTok an Jetpack Compose.

Das Team wollte die Produktanforderungen schneller und in höherer Qualität umsetzen. Durch die Nutzung von Compose wollte das Team die Effizienz der Entwicklung verbessern, indem es weniger Code schreibt und die kognitive Belastung reduziert. Gleichzeitig sollten Leistung und Stabilität verbessert werden.

Komplexe UI optimieren, um die Produktivität der Entwickler zu steigern

TikTok-Seiten sind oft komplexer als sie aussehen und enthalten zahlreiche mehrschichtige bedingte Anforderungen. Diese Komplexität führte häufig zu schwer zu wartenden, suboptimal strukturierten View-Hierarchien und übermäßigen View-Verschachtelungen, 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. 

Darüber hinaus trägt die Messstrategie von Compose dazu bei, die Doppelbesteuerung zu reduzieren, wodurch sich die Messleistung leichter optimieren lässt. 

Um die Produktivität der Entwickler zu verbessern, 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 zusammensetzbarer Funktionen ist sehr effektiv, während die Einbindung großer UI-Blöcke mit bedingter Logik sowohl unkompliziert ist als auch nur minimalen Aufwand erfordert.

Strategische Migration als Weg in die Zukunft

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 Fähigkeit von Compose, bedingte Logik sauber zu verarbeiten und die Komposition zu optimieren, konnte das Team die Ladezeit von Seiten um bis zu 78% reduzieren, wenn es sich um neue oder vollständig neu geschriebene Seiten handelte. Bei kleineren Fällen betrug diese Verbesserung 20–30% und bei vollständigen Überarbeitungen und neuen Funktionen 70–80 %. Außerdem konnte das Team die Codegröße um 58%reduzieren, verglichen mit derselben Funktion, die in Views erstellt wurde. Das Team hat noch einige weitere Erkenntnisse geteilt:  

Die Gesamtstrategie des TikTok-Teams bestand darin, bestimmte User Journeys schrittweise zu migrieren. So konnten sie migrieren, messbare Vorteile bestätigen und dann auf weitere Bildschirme skalieren. Sie begannen damit, Compose zu verwenden, um die Gesamtstruktur der QR-Code-Funktion zu vereinfachen, und stellten die Verbesserungen fest. Später erweiterte das Team die Migration auf die Anmelde- und Registrierungsprozesse. 

Das Team hat noch einige weitere 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 Kompositionsaufwand führte. Bessere Ergebnisse wurden erzielt, indem die Migration so erweitert wurde, dass ein einzelner ComposeView für den gesamten ViewHolder verwendet wurde.

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

Jun Shen gefällt besonders, dass Compose „die für die Funktionsentwicklung erforderliche Code-Menge reduziert, die Testbarkeit verbessert und die Bereitstellung beschleunigt“. Das Team plant, die Einführung von Compose stetig zu steigern und es langfristig zum bevorzugten Framework zu machen. Jetpack Compose erwies sich als leistungsstarke Lösung, um sowohl die Entwicklererfahrung als auch die Produktionskennzahlen in großem Maßstab zu verbessern.

Erste Schritte mit Jetpack Compose

Weitere Informationen dazu, wie Jetpack Compose Ihrem Team helfen kann