TikTok verringert 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 große Nutzerbasis und innovativen Funktionen bekannt ist. Das Team veröffentlicht regelmäßig Updates, Tests und neue Funktionen für seine Nutzer. Das Android-Team von TikTok stand vor der Herausforderung, die Geschwindigkeit beizubehalten und gleichzeitig technische Schulden zu verwalten. Daher wandte es sich an 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 Produktivität von Entwicklern 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 sowohl unkompliziert ist als auch nur einen minimalen Overhead verursacht.

Strategische Migration als Grundlage für die Zukunft

Durch die strategische Einführung von Jetpack Compose konnte TikTok die technischen Schulden im Griff behalten und sich gleichzeitig weiterhin auf die Entwicklung einer hervorragenden Nutzererfahrung konzentrieren. Dank der Fähigkeit 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. Diese Verbesserung lag bei kleineren Anfragen zwischen 20 und 30% und bei vollständigen Überarbeitungen und neuen Funktionen zwischen 70 und 80 %. Außerdem konnten sie die Größe ihres Codes um 58%reduzieren, verglichen mit derselben 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 hat die Migration später auf die Anmelde- und Registrierungsfunktionen ausgeweitet. 

Das Team hat einige zusätzliche Erkenntnisse geteilt:  

Bei der Leistungsprüfung 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-Aufwand 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, die Nutzung von Compose stetig zu steigern 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