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 riesige Nutzerbasis und innovativen Funktionen bekannt ist. Das Team veröffentlicht regelmäßig Updates, Tests und neue Funktionen für die Nutzer. Das Android-Team von TikTok stand vor der Herausforderung, die Geschwindigkeit beizubehalten und gleichzeitig technische Schulden zu verwalten. Es entschied sich für Jetpack Compose.

Das Team wollte eine schnellere und qualitativ hochwertigere Iteration der Produktanforderungen ermöglichen. Durch die Verwendung von Compose wollte das Team die Effizienz der Entwicklung verbessern, indem weniger Code geschrieben und die kognitive Belastung reduziert wird. Gleichzeitig sollten Leistung und Stabilität verbessert werden. 

Komplexe Benutzeroberflächen optimieren, um die Produktivität von Entwicklern zu steigern

TikTok-Seiten sind oft komplexer, als sie scheinen, und enthalten zahlreiche verschachtelte bedingte Anforderungen. Diese Komplexität führte oft zu schwer zu verwaltenden, suboptimal strukturierten Ansichtshierarchien und übermäßigen Verschachtelungen von Ansichten, was aufgrund einer erhöhten Anzahl von Messdurchgängen zu Leistungseinbußen führte.

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

Außerdem hilft die Messstrategie von Compose, die Doppelbesteuerung zu reduzieren, sodass 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 Composables ist sehr effektiv, während die Einbindung großer UI-Blöcke mit bedingter Logik sowohl unkompliziert ist als auch nur minimalen Aufwand erfordert.

Mit strategischer Migration den Weg in die Zukunft ebnen

Durch die strategische Einführung von Jetpack Compose konnte TikTok die technische Schuld im Griff behalten und sich gleichzeitig darauf konzentrieren, seinen Nutzern ein großartiges Erlebnis zu bieten. Dank der Fähigkeit von Compose, bedingte Logik sauber zu verarbeiten und die Erstellung zu optimieren, konnte das Team die Seitenladezeit auf neuen oder vollständig neu geschriebenen Seiten um bis zu 78% reduzieren. Bei kleineren Projekten lag die Verbesserung bei 20–30 %, bei vollständigen Neuschreibungen und neuen Funktionen bei 70–80 %. Außerdem konnten sie die Codegröße im Vergleich zu derselben Funktion in Views um 58%reduzieren.  Das Team hat außerdem einige Erkenntnisse geteilt:  

Die Gesamtstrategie des TikTok-Teams bestand darin, bestimmte User Journeys schrittweise zu migrieren. So konnte das Unternehmen migrieren, messbare Vorteile bestätigen und dann auf weitere Bildschirme skalieren. Sie begannen mit der Verwendung von Compose, um die Gesamtstruktur der QR-Code-Funktion zu vereinfachen, und sahen die Verbesserungen. Später wurde die Migration auf die Anmelde- und Registrierungsfunktionen ausgeweitet. 

Das Team hat einige zusätzliche Erkenntnisse gewonnen:  

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. Bessere Ergebnisse wurden erzielt, indem die Migration auf eine einzige ComposeView für den gesamten ViewHolder ausgeweitet wurde.

Bei der Migration eines Fragments innerhalb von ViewPager, das eine benutzerdefinierte Höhenlogik und eine bedingte Logik zum Ausblenden und Einblenden der Benutzeroberfläche basierend auf Tests hat, wurde die Leistung nicht beeinträchtigt. In diesem Fall war die Migration des ViewPager zu Composable leistungsfähiger als die Migration des Fragments. 

Jun Shen gefällt besonders, dass Compose „die Menge an Code reduziert, die für die Entwicklung von Funktionen erforderlich ist, die Testbarkeit verbessert und die Bereitstellung beschleunigt“. Das Team plant, die Nutzung von Compose kontinuierlich zu steigern, um es langfristig zu seinem bevorzugten Framework zu machen. Jetpack Compose erwies sich als leistungsstarke Lösung, um sowohl die Entwicklererfahrung als auch die Produktionsmesswerte im großen Maßstab zu verbessern.

Erste Schritte mit Jetpack Compose

Weitere Informationen dazu, wie Jetpack Compose Ihrem Team helfen kann