TikTok to globalna platforma z krótkimi filmami, która jest znana z ogromnej bazy użytkowników i innowacyjnych funkcji. Zespół stale udostępnia użytkownikom aktualizacje, eksperymenty i nowe funkcje. Zespół TikTok na Androida, który musiał utrzymać tempo rozwoju, jednocześnie zarządzając długiem technicznym, sięgnął po Jetpack Compose.

Zespół chciał umożliwić szybsze i lepsze iterowanie wymagań dotyczących produktu. Korzystając z Compose, zespół dążył do zwiększenia wydajności inżynieryjnej poprzez pisanie mniejszej ilości kodu i zmniejszenie obciążenia poznawczego, a także do osiągnięcia lepszej wydajności i stabilności. 

Upraszczanie złożonego interfejsu, aby zwiększyć produktywność programistów

Strony TikTok są często bardziej złożone, niż się wydaje, i zawierają wiele warstwowych wymagań warunkowych. Ta złożoność często powodowała trudne w utrzymaniu, nieoptymalnie skonstruowane hierarchie widoków i nadmierne zagnieżdżanie widoków, co prowadziło do pogorszenia wydajności z powodu zwiększonej liczby przebiegów pomiaru.

Compose oferowało bezpośrednie rozwiązanie tego problemu strukturalnego. 

Co więcej, strategia pomiarowa platformy Compose pomaga ograniczyć podwójne opodatkowanie, co ułatwia optymalizację skuteczności pomiarów. 

Aby zwiększyć produktywność deweloperów, centralny zespół ds. systemu projektowania TikTok udostępnia bibliotekę komponentów zespołom pracującym nad różnymi funkcjami aplikacji. Zespół zauważył, że tworzenie aplikacji w Compose jest proste. Wykorzystywanie małych komponentów jest bardzo skuteczne, a włączanie dużych bloków interfejsu z logiką warunkową jest proste i ma minimalny narzut.

Budowanie przyszłości dzięki strategicznej migracji

Dzięki strategicznemu wdrożeniu Jetpack Compose TikTok zdołał utrzymać kontrolę nad długiem technicznym, a jednocześnie nadal koncentrować się na tworzeniu atrakcyjnych funkcji dla użytkowników. Możliwość przejrzystego obsługiwania logiki warunkowej i upraszczania kompozycji przez Compose pozwoliła zespołowi skrócić czas ładowania stron nawet o 78% w przypadku nowych lub całkowicie przepisanych stron. W mniej złożonych przypadkach poprawa wynosiła 20–30%, a w przypadku całkowicie przepisanych stron i nowych funkcji – 70–80%. Zespół zdołał też zmniejszyć rozmiar kodu o 58% w porównaniu z tą samą funkcją zbudowaną w widokach. Zespół podzielił się też kilkoma wnioskami:  

Ogólna strategia zespołu TikToka polegała na stopniowym przenoszeniu określonych ścieżek użytkowników. Dzięki temu mogli przeprowadzić migrację, potwierdzić mierzalne korzyści, a następnie rozszerzyć ją na większą liczbę ekranów. Zaczęli od używania Compose, aby uprościć ogólną strukturę funkcji kodu QR, i zauważyli poprawę. Zespół rozszerzył później migrację na procesy logowania i rejestracji. 

Zespół podzielił się dodatkowymi wnioskami:  

Podczas sprawdzania wydajności w trakcie migracji zespół TikTok stwierdził, że używanie wielu małych ComposeView do zastępowania elementów w jednym ViewHolder powodowało obciążenie kompozycji. Dzięki rozszerzeniu migracji i użyciu jednego elementu ComposeView dla całego elementu ViewHolder firma osiągnęła lepsze wyniki.

Podczas przenoszenia fragmentu w ViewPagerze, który ma niestandardową logikę wysokości i logikę warunkową do ukrywania i wyświetlania interfejsu na podstawie eksperymentów, wydajność nie uległa zmianie. W tym przypadku przeniesienie ViewPagera do funkcji kompozycyjnej dało lepsze wyniki niż przeniesienie fragmentu. 

Jun Shen bardzo podoba się, że Compose „zmniejsza ilość kodu wymaganego do tworzenia funkcji, poprawia testowalność i przyspiesza dostarczanie”. Zespół planuje stopniowo zwiększać wykorzystanie Compose, aby w dłuższej perspektywie stało się ono preferowanym frameworkiem. Jetpack Compose okazał się skutecznym rozwiązaniem, które pozwoliło im poprawić zarówno komfort pracy deweloperów, jak i statystyki produkcyjne na dużą skalę.

Pierwsze kroki z Jetpack Compose

Dowiedz się więcej o tym, jak Jetpack Compose  może pomóc Twojemu zespołowi.