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

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

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

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

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

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

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

Прокладывая путь вперед посредством стратегической миграции.

By strategically adopting Jetpack Compose, TikTok was able to stay on top of technical debt, while also continuing to focus on creating great experiences for their users. The ability of Compose to handle conditional logic cleanly and streamline composition allowed the team to achieve up to a 78% reduction in page loading time on new or fully rewritten pages. This improvement was 20–30% in smaller cases, and 70–80% for full rewrites and new features. They also were able to reduce their code size by 58% ,   по сравнению с аналогичной функцией, встроенной в Views. Команда также поделилась несколькими выводами:

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

Команда поделилась некоторыми дополнительными выводами:

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

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

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

Начните работу с Jetpack Compose

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