Google переписала пользовательский интерфейс Play Store с помощью Jetpack Compose, сократив код до 50% и ускорив рендеринг
Jetpack Compose — это то, как Google хочет, чтобы разработчики Android создавали пользовательские интерфейсы приложений в будущем. Сегодня Google подробно рассказала, как Play Store использовал Jetpack Compose для переписывания своего пользовательского интерфейса.
В 2020 году Google решила обновить весь технологический стек витрины Play Store, поскольку «существующий код был старше 10 лет и накопил огромное количество технического долга за бесчисленные выпуски платформы Android и обновления функций».
Мы разработали многолетний план по обновлению всего в магазине, от сетевого уровня до рендеринга пикселей. В рамках этого мы также хотели внедрить современный декларативный фреймворк пользовательского интерфейса, который бы соответствовал нашим целям продукта в отношении интерактивности и удобства для пользователя.
Рассмотрев варианты, компания остановилась на Jetpack Compose, который тогда еще находился на стадии pre-Alpha и не достиг бы стабильной версии 1.0 до июля 2021 года.
Что касается продуктивности разработчиков — над приложением работают «сотни инженеров», и команда Google Play обнаружила, что «написание пользовательского интерфейса требует гораздо меньше кода, иногда до 50%» благодаря природе декларативного UI фреймворка. Например, таблица рейтингов в списках приложений сократилась с примерно 350 строк Java и 55 строк XML до примерно 210 строк Kotlin. Еще одним преимуществом является то, что стало проще добавлять анимации и другие функции движения, такие как кольцо загрузки/обновления вокруг значков приложений.
Производительность была другим важным аспектом:
В результате внедрения базовых профилей Play Store отметил сокращение времени начального рендеринга страницы результатов поиска на 40%. Это колоссальный результат!
При создании часто используемых компонентов пользовательского интерфейса в Play Store, которые часто применялись в ситуациях прокрутки, мы обнаружили, что ненужные перекомпозиции приводили к пропущенным кадрам и, как следствие, к рывкам. Мы также разработали модификатор для легкого обнаружения этих перекомпозиций в наших отладочных настройках. Применив эти методы к нашим компонентам пользовательского интерфейса, мы смогли уменьшить рывки на 10-15%.
Отметив «значительное улучшение качества и состояния кода», Google использует Jetpack Compose уже более года для написания кода пользовательского интерфейса, при этом «все новые функции Play Store строятся на основе этого фреймворка».
