TikTok ist eine globale Plattform für kurze Videos, die für ihre große Nutzerbasis und innovative 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 Ansichtshierarchien und übermäßigen Ansichtsnestungen, 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 Nutzung kleiner zusammensetzbarer Elemente ist sehr effektiv, während die Einbindung großer UI-Blöcke mit bedingter Logik unkompliziert ist und nur minimalen Aufwand erfordert.

Strategische Migration als Weg nach vorn

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 Nutzererlebnis 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 lag die Verbesserung bei 20–30% und bei vollständigen Neuschreibungen und neuen Funktionen bei 70–80 %. Außerdem konnte die Codegröße um 58%reduziert werden, wenn man sie mit derselben Funktion vergleicht, die in Ansichten erstellt wurde. Das Team hat außerdem einige 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 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 eine einzelne 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 des 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 erhöhen und es langfristig zum bevorzugten Framework zu machen. Jetpack Compose erwies sich als leistungsstarke Lösung, um sowohl die Entwicklererfahrung als auch die Produktionsmesswerte in großem Maßstab zu verbessern.

Erste Schritte mit Jetpack Compose

Weitere Informationen dazu, wie Jetpack Compose Ihrem Team helfen kann