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, a jednocześnie zarządzać długiem technicznym, sięgnął po Jetpack Compose.

Zespół chciał umożliwić szybsze i lepsze iteracje wymagań dotyczących produktu. 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 ze względu na zwiększoną liczbę przebiegów pomiaru.

Compose oferuje 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. 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 doskonałych wrażeń dla użytkowników. Dzięki możliwości czystego obsługiwania logiki warunkowej i upraszczania kompozycji przez Compose 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%. Udało im się też zmniejszyć rozmiar kodu o 58% w porównaniu z tą samą funkcją 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 odkrył, że używanie wielu małych ComposeView do zastępowania elementów w jednym ViewHolder powodowało obciążenie kompozycji. Lepsze wyniki udało się uzyskać dzięki rozszerzeniu migracji, tak aby w całym obiekcie ViewHolder używać jednego elementu ComposeView.

Podczas przenoszenia fragmentu w usłudze ViewPager, która 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 komponentu kompozycyjnego dało lepsze wyniki niż przeniesienie fragmentu. 

Jun Shen bardzo podoba się, że Compose „zmniejsza ilość kodu wymaganego do tworzenia funkcji, poprawia testowanie 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.