Mercari сокращает 355 тысяч строк кода с помощью Jetpack Compose

В 2020 году команда Mercari запустила большую инициативу по обновлению технической инфраструктуры своего приложения. На тот момент кодовой базе приложения уже было семь лет и она за это время не претерпела никаких серьезных архитектурных обновлений. Это влияло на способность команды разрабатывать новые фичи и выпускать своевременные обновления приложения. Чтобы решить эту техническую проблему, компания Mercari приступила к реализации инициативы GroundUP — полной переработке своего приложения на всех платформах, включая Android.

Целью было создание полностью модернизированного приложения с масштабируемым дизайном. В процессе модернизации приложения разработчики Mercari обратились к Jetpack Compose, современному декларативному инструментарию Android для создания нативного пользовательского интерфейса. В ходе оценки команда поняла, что переписывание на Jetpack Compose поможет очистить кодовую базу и получить больше контроля над тем, как выглядит приложение.

Переписывание с меньшим количеством кода

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

С помощью библиотек Jetpack команда Mercari удалила весь устаревший код во время переписывания, что значительно сократило кодовую базу и сделало ее более удобной для разработчиков. «Практически, это то же самое приложение с гораздо меньшим количеством кода», — говорит Аллан Конда, руководитель технологического направления Android в Mercari. «Переписанное приложение содержит примерно на 355 000 строк кода меньше, что примерно на 69% меньше, чем было раньше».

Взаимодействие с View в качестве раннего последователя

Когда команда Mercari только начинала свою инициативу GroundUP, Jetpack Compose был доступен только в предварительной версии для разработчиков. Они хотели, чтобы приложение было полностью написано на Jetpack Compose из-за его нового декларативного подхода к созданию пользовательского интерфейса. Однако, поскольку он был еще настолько новым, они столкнулись с необходимостью решения уникальных проблем с использованием обоих наборов инструментов.

Например, на экране размещения объявления Mercari пользователям предлагается ввести подробную информацию о товаре, который они хотят выставить на продажу. Затем пользователи должны были иметь возможность выбирать фотографии из галереи своего устройства и переставлять их на этом экране с помощью жеста перетаскивания. API жестов в Jetpack Compose на тот момент не было доступно, поэтому команда воспользовалась преимуществами AndroidView в Compose, чтобы легко интегрировать представления, которые обрабатывают жесты на экране формы объявления. Это обеспечило стабильное, но временное решение для реализации жестов перетаскивания, пока эта функция не стала доступна в Jetpack Compose.

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

Jetpack Compose значительно усовершенствовался с момента первоначального принятия Mercari, и большинству Android-разработчиков больше не нужно беспокоиться о необходимости взаимодействия с обоими наборами инструментов, поскольку приложения для Android теперь могут быть полностью написаны на Compose.

Улучшение и мониторинг производительности с Compose

Используя Compose, команда Mercari автоматизировала создание базового профиля (baseline profile) для каждого стабильного релиза приложения и обнаружила, что это очень полезно. Главный экран отображает кадры в 2 раза быстрее при использовании базового профиля Compose по умолчанию по сравнению с отсутствием базового профиля. Если предоставить кастомный профиль, то при скроллинге пользователи Mercari получают дополнительное улучшение — до 20% быстрее по сравнению с базовым профилем по умолчанию.

Команда также написала автоматизированные тесты производительности на основе основных сценариев приложения с помощью Android Macrobenchmark. «Используя Android Macrobenchmark, мы можем автоматически тестировать запуск, скроллинг и время загрузки экрана», — говорит Аллан. «В настоящее время эти тесты охватывают шесть основных сценариев, таких как результаты поиска и просмотр элементов».

Кроме того, разработчики Mercari интегрировали Firebase Performance Monitoring, инструмент мониторинга производительности приложений в режиме реального времени, в пользовательский код для расчета производительности прокрутки на экранах Compose. С помощью Firebase Performance Monitoring команда Mercari обнаружила проблему производительности на экране результатов поиска. Используя Android Profiler для точного определения проблемы, разработчики Mercari обнаружили низкую частоту кадров при прокрутке результатов поиска. Это вылилось в то, что количество медленных экземпляров рендеринга сократилось примерно на 23.6%.

Команда Mercari решила эту проблему с частотой кадров с помощью рекомендаций Google по оптимизации производительности Compose и стабильности Compose. Разработчики Mercari заставили приложение пропускать Composable и увеличили неиспользуемые состояния на экране результатов поиска, что значительно улучшило частоту кадров.

Больше возможностей с Jetpack Compose

С меньшим количеством кода, который нужно поддерживать, разработчикам Mercari гораздо проще тестировать и внедрять фичи. «У нас есть масса экспериментов, которые мы наконец-то сможем провести с помощью наших обновленных платформ. Наши пользователи могут ожидать, что новые функции будут появляться в приложении Mercari все быстрее», — сказал Аллан.

Разработчики Mercari с нетерпением ждут дальнейшего развития приложения с помощью Animation API. С помощью Compose стало намного проще анимировать компоненты, что может привести к огромным улучшениям в пользовательском интерфейсе Android».

Источник