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

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

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

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

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

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

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

Для повышения производительности разработчиков центральная команда Design System компании 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

Learn more about how Jetpack Compose can help your team.