Как Jetpack Compose помог TikTok уменьшить размер кода на 58% и повысить производительность приложения при добавлении новых функций

TikTok – это глобальная платформа для коротких видео, известная своей огромной пользовательской базой и инновационными функциями. Команда постоянно выпускает обновления, эксперименты и новые функции для своих пользователей. Чтобы поддерживать скорость разработки и при этом справляться с техническим долгом, команда TikTok Android решила использовать Jetpack Compose.

Команда хотела ускорить и улучшить итерацию требований к продукту. Используя Compose, команда стремилась повысить эффективность разработки, сократив объем кода и снизив когнитивную нагрузку, а также улучшить производительность и стабильность. 

Оптимизация сложного интерфейса для повышения продуктивности разработчиков

Страницы TikTok часто сложнее, чем кажутся, и содержат множество многоуровневых условных требований. Такая сложность часто приводила к трудно поддерживаемым, неоптимально структурированным иерархиям View и чрезмерной вложенности View, что вызывало снижение производительности из-за увеличения количества проходов измерения.

Compose предложил прямое решение этой структурной проблемы. 

Кроме того, стратегия измерения Compose помогает снизить двойное налогообложение, что упрощает оптимизацию производительности. 

Чтобы повысить продуктивность разработчиков, центральная команда TikTok по системам проектирования предоставляет библиотеку компонентов для команд, работающих над различными функциями приложения. Команда заметила, что разработка в Compose проста; использование небольших компонуемых объектов очень эффективно, а включение больших блоков пользовательского интерфейса с условной логикой является простым и требует минимальных накладных расходов.

Стратегический переход на новые технологии

Благодаря стратегическому внедрению Jetpack Compose TikTok удалось справиться с техническим долгом и продолжить создавать отличные продукты для пользователей. Благодаря тому, что Compose позволяет легко обрабатывать условную логику и упрощает создание интерфейса, команде удалось сократить время загрузки новых или полностью переписанных страниц на 78 %  В небольших проектах этот показатель составил 20–30 %, а при полной переработке кода и добавлении новых функций – 70–80 %. Кроме того, разработчикам удалось сократить размер кода на 58% по сравнению с аналогичной функцией, созданной в Views. Вот ещё несколько выводов, к которым пришла команда:  

Общая стратегия команды TikTok заключалась в постепенном переносе определенных путей пользователей. Это позволило им выполнить перенос, подтвердить измеримые преимущества, а затем масштабировать решение на большее количество экранов. Сначала они использовали Compose, чтобы упростить общую структуру функции QR-кода, и увидели улучшения. Позже команда расширила миграцию на страницы входа и регистрации. 

Вот ещё несколько выводов, к которым пришла команда:  

Проверяя производительность во время миграции, команда TikTok обнаружила, что использование множества небольших ComposeView для замены элементов внутри одного ViewHolder приводило к дополнительным затратам на компоновку. Они добились лучших результатов, расширив миграцию и используя один ComposeView для всего ViewHolder.

При переносе фрагмента в ViewPager, у которого есть собственная логика высоты и условная логика для скрытия и показа интерфейса на основе экспериментов, производительность не пострадала. В этом случае перенос ViewPager в Composable-функцию показал лучшие результаты, чем перенос фрагмента. 

Джуну Шену очень нравится, что Compose "сокращает объем кода, необходимого для разработки функций, улучшает тестируемость и ускоряет доставку". Команда планирует постепенно увеличивать внедрение Compose, делая его предпочтительным фреймворком в долгосрочной перспективе. Jetpack Compose оказался мощным решением, которое позволило улучшить как опыт разработчиков, так и производственные показатели в масштабе.

Начало работы с Jetpack Compose

Узнайте больше о том, как Jetpack Compose  может помочь вашей команде.