TikTok zmniejsza rozmiar kodu o 58% i poprawia wydajność aplikacji w przypadku nowych funkcji dzięki Jetpack Compose

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 iteracje wymagań dotyczących produktów. Korzystając z Compose, zespół chciał zwiększyć wydajność inżynieryjną, pisząc mniej kodu i zmniejszając obciążenie poznawcze, a także poprawić wydajność i stabilność. 

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

Strony TikTok są często bardziej złożone, niż mogłoby się wydawać, i zawierają wiele warstwowych wymagań warunkowych. Ta złożoność często prowadziła do trudnych w utrzymaniu, nieoptymalnie skonstruowanych hierarchii widoków i nadmiernego zagnieżdżania widoków, co powodowało spadek wydajności z powodu zwiększonej liczby przebiegów pomiaru.

Compose oferuje bezpośrednie rozwiązanie tego problemu strukturalnego. 

Co więcej, strategia pomiaru Compose pomaga zmniejszyć 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. Korzystanie z 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ł ograniczyć dług techniczny, a jednocześnie nadal skupiać się na tworzeniu atrakcyjnych funkcji dla użytkowników. Dzięki możliwości czystego obsługiwania logiki warunkowej i upraszczania kompozycji zespół skrócił czas ładowania nowych lub całkowicie przepisanych stron nawet o 78%. W przypadku mniejszych zmian wzrost wyniósł 20–30%, a w przypadku pełnych zmian i nowych funkcji – 70–80%. W porównaniu z tą samą funkcją w widokach zmniejszyli rozmiar kodu o 58%.  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 związane z kompozycją. 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 ViewPager, 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 migracja ViewPagera do komponentu kompozycyjnego dała lepsze wyniki niż migracja 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.