Jetpack Compose — это набор инструментов для построения современных UI (пользовательских интерфейсов) в Android‑приложениях. Компания Google анонсировала Jetpack Compose в 2019 году, а уже в марте 2021 года выкатила бета‑версию фреймворка.

Стабильный Jetpack Compose 1.0, который мы ждали почти 2 года, вышел 28 июля 2021 года. К этому моменту мы в GO Digital уже были подкованы в знаниях библиотеки и активно тестировали разработку UI с помощью фреймворка (без XML‑файлов) в текущих проектах. Об одном из таких кейсов расскажем ниже.

Зачем нужен Jetpack Compose

С внедрением Jetpack Compose стало проще работать над UI для Android. Простые API помогают создавать приятные глазу интерфейсы. Количество кода уменьшается в среднем на 30%. Скорость разработки тоже сокращается, происходит оптимизация UI благодаря мощным фичам: Composable Preview, Editor Actions, Layout inspector, Iterative code development, Animations.

Про язык программирования Kotlin

Jetpack Compose выстроен на базе языка программирования Kotlin от компании JetBrains. Kotlin особенно популярен в мобильной разработке и дает весомые преимущества для Compose. Например, мы пишем data class для использования в стейтах, дефолт-значение – в методах, extension functions – чтобы расширять функциональность.

Про декларативный подход

В основе технологии Jetpack Compose – декларативный подход. Мы уже упомянули, что разработка происходит без xml-layouts (макетов). Этот факт и характеризует декларативный UI. То есть вместо перечисления последовательности действий, мы прямым текстом описываем, каким должен быть элемент интерфейса. После этого платформа выполняет действие с учетом контекста и дефолтных значений.

Про рабочую среду Android Studio

Jetpack Compose существует на базе рабочей среды Android Studio. На платформе реализован функционал специально для библиотеки Compose.

Android Studio предлагает множество новых функций персонально для Jetpack Compose. Она использует подход code‑first. Это позволяет повысить продуктивность разработчика, не требуя выбирать между редактором кода и интерфейсом дизайна.

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

Достоинства и недостатки Jetpack Compose

Достоинства:

1. Декларативный UI: Jetpack Compose использует декларативный синтаксис, который легко читать и понимать. Это напрямую влияет на скорость и качество разработки.

2. Прост в освоении: фреймворк имеет низкий порог вхождения, потому что упрощает разработку пользовательских интерфейсов и помогает сократить объем кода.

3. Тестирование UI: Jetpack Compose облегчает написание тестов пользовательского интерфейса на Kotlin. За счет этого жизнь программиста становится проще. Он может убедиться, что интерфейс работает корректно и без ошибок.

4. Интерактивный UI: Jetpack Compose обеспечивает обновления в режиме реального времени при взаимодействии пользователя с интерфейсом. Таким образом, приложение выглядит более привлекательно в глазах юзера и его пользовательский опыт улучшается.

5. Повторное использование: с помощью Jetpack Compose можно создавать многократно используемые компоненты UI, а затем использовать их на нескольких экранах и даже в разных приложениях. Это особенно важно при создании сложных пользовательских интерфейсов.

6. Типобезопасность: Jetpack Compose построен на базе языка Kotlin, который обеспечивает строгую типизацию и помогает выявлять ошибки на этапе компиляции, а не во время выполнения программы. Это благоприятно сказывается на стабильности и надежности приложений.

7. Простая отладка: Jetpack Compose поставляется с набором инструментов отладки, которые могут помочь разработчикам быстро идентифицировать и исправить проблемы в своем коде пользовательского интерфейса

8. Гибкость: Jetpack Compose предлагает множество возможностей для проектирования UI. Программисты могут легко настраивать макеты, добавлять анимации и кастомизировать внешний вид приложения, не прибегая к написанию большого количества кода.

9. Симпатии сообщества: Jetpack Compose – это относительно новый тулкит, но он уже получил много внимания среди разработчиков Android. Специалисты вносят свой вклад в развитие фреймворка, сообщество растет, а значит, инструмент может рассчитывать на поддержку и ресурсы.

Недостатки:

1. Поддерживает только Kotlin. Это может быть недостатком для разработчиков, которые уже уверенно владеют другими языками программирования, например, Java, C++ или Swift. Они могут не захотеть вкладывать время и силы в изучение нового языка. Это также может быть проблемой для команд разработчиков с разными языковыми предпочтениями или уровнями навыков. Кроме того, не все сторонние библиотеки или инструменты, которые разработчики пожелают использовать в своих проектах, могут быть написаны на Kotlin. Поэтому возникают проблемы совместимости или дополнительная работа, необходимая для их интеграции с Jetpack Compose.

2. Проблемы с отрисовкой UI‑компонентов. Во время рендеринга могут возникать лаги и задержки. Это связано с тем, что Compose предназначен для динамического рендеринга представлений, в отличие от традиционного подхода с использованием предварительно нарисованных XML‑макетов. Это означает, что процесс рендеринга может занять больше времени, особенно при работе с анимацией. Однако проблемы с производительностью часто можно смягчить, оптимизировав расположение UI‑компонентов и минимизировав количество рекомпозиций, происходящих в процессе рендеринга.

3. Миграция. Если у вас есть готовое приложение на XML-макетах, то переход на Jetpack Compose может потребовать больших изменений кода. А это займет время.

Кейс: чат приложения банка

Задача – интеграция Chatwoot в мобильное приложение банка с помощью Jetpack Compose. Какие ожидания от чата?

• визуальная привлекательность,

• легкость навигации и отзывчивость,

• интуитивная понятность и удобство.

В этом проекте мы использовали фреймворк Jetpack Compose. Создавали компоненты UI в виде функций текущего состояния. Это означает, что изменения state автоматически вызывают обновление пользовательского интерфейса. Такой подход упростил управление UI-состоянием, поскольку мы могли определить в одном месте state и компоненты интерфейса, которые на него опираются. Мы применили MVI-паттерн, чтобы управлять стейтами.

Для управления UI-состоянием чата создали класс данных, который содержит информацию для отображения пользовательского интерфейса чата. Например, сообщения пользователя, ответы чат-бота. Затем мы определили компоненты UI для чата в виде функций этого класса данных. Скажем, история чата может отображаться в виде списка сообщений, который генерируется на основе содержимого класса данных.

Когда пользователь взаимодействует с чатом, например, отправляет сообщение, стейт обновляется. Jetpack Compose автоматически вызывает обновление компонентов UI, которые зависят от обновленного состояния. Поэтому история чата обновляется, чтобы включить сообщение пользователя. Это упростило нашу задачу по управлению UI-состояниями и обеспечению актуальности и отзывчивости.

В цифрах вышло следующее:

• 5 тысяч строк кода,

• 15 UI-компонентов нашей дизайн-системы.

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

Перспективы развития технологии

1. Более широкое распространение. Jetpack Compose – все еще относительно новый продукт. По мере того, как все больше разработчиков знакомятся с ним, мы можем ожидать популяризации инструмента. Это приведет к росту сообщества последователей, которые могут внести вклад в разработку платформы и создавать более надежные и многофункциональные приложения.

2. Улучшенная производительность. По мере развития платформы мы можем ожидать улучшения производительности. Это сделает ее еще более эффективной и быстрой, чем сейчас. Google постоянно работает над оптимизацией фреймворка, чтобы сократить время рендеринга и повысить общую производительность.

3. Лучшая интеграция с существующими библиотеками. Jetpack Compose создан для хорошей работы с существующими библиотеками и платформами Android такими, как компоненты архитектуры Android, Kotlin и Material Design. По мере развития фреймворка можно ожидать лучшей интеграции с другими библиотеками, что еще больше упростит разработчикам создание привлекательных и производительных приложений.

4. Больше виджетов и компонентов. Пока Jetpack Compose имеет ограниченное количество виджетов и компонентов по сравнению с макетами Android XML. Но ждем, что это изменится по мере развития фреймворка и в него будет добавлено больше возможностей.

5. Кроссплатформенность. Благодаря Compose Multiplatform разработка интерфейсов десктопных и веб-приложений становится быстрее, проще за счет использования общего кода в Android-, веб- и десктопном вариантах. В будущем также ожидаем реализации поддержки iOS в полном объеме.

В 2023 году Jetpack Compose актуален в Android-разработке. Инструмент полезен и при написании новых приложений, и при рефакторинге существующих. Он позволяет создавать динамические и интерактивные интерфейсы с меньшим количеством кода и ошибок. Compose облегчает настройку, тематическое оформление и тестирование компонентов UI. Поэтому Android-разработчикам стоит изучить фреймворк.