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

TikTok to globalna platforma krótkich filmów znana z ogromnej bazy użytkowników i innowacyjnych funkcji. Zespół stale udostępnia użytkownikom aktualizacje, eksperymenty i nowe funkcje. W obliczu wyzwania związanego z utrzymaniem tempa prac przy jednoczesnym zarządzaniu długiem technicznym zespół TikTok na Androida zwrócił się do Jetpack Compose.

Zespół chciał umożliwić szybsze i lepsze iterowanie wymagań dotyczących produktu. Dzięki Compose zespół chciał zwiększyć wydajność inżynierów, pisząc mniej kodu i zmniejszając obciążenie poznawcze, a także poprawić wydajność i stabilność. 

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

Strony TikTok są często bardziej złożone, niż się wydaje, ponieważ zawierają wiele warstwowych wymagań warunkowych. Ta złożoność często powodowała, że hierarchie widoków były trudne w utrzymaniu, nieoptymalnie skonstruowane i nadmiernie zagnieżdżone, co powodowało spadek wydajności ze względu na zwiększoną liczbę przejść pomiarowych.

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

Ponadto strategia pomiaru Compose pomaga zmniejszyć podwójne opodatkowanie, co ułatwia optymalizację wydajności pomiaru. 

Aby zwiększyć produktywność programistów, główny 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 elementów kompozycyjnych jest bardzo skuteczne, a włączanie dużych bloków interfejsu z logiką warunkową jest proste i ma minimalny narzut.

Wytyczanie drogi do przodu dzięki strategicznej migracji

Dzięki strategicznemu wdrożeniu Jetpack Compose TikTok mógł utrzymać dług techniczny pod kontrolą, a jednocześnie nadal koncentrować się na tworzeniu doskonałych wrażeń dla użytkowników. Możliwość czystego obsługiwania logiki warunkowej i usprawniania kompozycji przez Compose pozwoliła zespołowi skrócić czas wczytywania strony nawet o 78% w przypadku nowych lub całkowicie przepisanych stron. W mniejszych przypadkach poprawa ta wynosiła 20–30%, a w przypadku całkowitego przepisania i nowych funkcji – 70–80%. W porównaniu z tą samą funkcją utworzoną w widokach udało się też zmniejszyć rozmiar kodu o 58%, . Zespół podzielił się też kilkoma wnioskami:  

Ogólną strategią zespołu TikTok było stopniowe przenoszenie konkretnych ścieżek użytkownika. Dzięki temu zespół mógł przeprowadzić migrację, potwierdzić wymierne korzyści, a następnie skalować ją na więcej ekranów. Zespół zaczął od używania Compose do uproszczenia ogólnej struktury funkcji kodu QR i zauważył poprawę. Następnie zespół rozszerzył migrację na logowanie i rejestrację. 

Zespół podzielił się też kilkoma dodatkowymi wnioskami:  

Podczas sprawdzania wydajności w trakcie migracji zespół TikTok stwierdził, że używanie wielu małych ComposeViews do zastępowania elementów w jednym ViewHolder powodowało narzut kompozycji. Lepsze wyniki uzyskano dzięki rozszerzeniu migracji na używanie jednego ComposeView dla całego ViewHolder.

Podczas przenoszenia fragmentu wewnątrz 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 przeniesienie ViewPager do Composable 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ł się preferowanym frameworkiem. Jetpack Compose okazał się skutecznym rozwiązaniem, które pozwala zwiększyć zarówno wygodę programistów, jak i wskaźniki 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.