Кросс-платформенная разработка для Android-разработчиков — Flutter или Compose?

Привет всем, меня зовут Го Шуйю, я являюсь сертифицированным специалистом Flutter (GDE) и руководителем проекта GSY на GitHub, такого как GSYVideoPlayer. Темой сегодняшнего выступления будет "Кросс-платформенная разработка для Android-разработчиков — Flutter или Compose?". Сегодняшний материал не будет слишком техническим, скорее он будет направлен на популяризацию этих технологий, особенно для тех, кто ещё недостаточно знаком с Flutter и Compose.

1. Текущее состояние Android-разработки и кросс-платформенной разработки

Давайте начнём с того, что происходит сейчас. Возможно, вы замечаете, что современные Android-разработчики уже не занимаются исключительно разработкой приложений для Android. Можно выделить две основные категории:

• Эмбеддед-разработка на основе Android, такая как разработка для телевизоров, часов, образовательных планшетов, систем видеонаблюдения и т.д., среди которых наиболее заметной является разработка для автомобильных информационно-развлекательных систем (IVI).
• Разработка в области front-end, которая охватывает работу с Android, iOS, веб-приложениями и мини-приложениями, связанными с пользовательским интерфейсом.Основные причины этого состояния заключаются в том, что открытость Android позволяет использовать её во всех отраслях, а также в том, что за последние годы стало намного проще создавать мобильные приложения благодаря развитию экосистемы.> Я помню, что в 2015 году моя мобильная команда работала над разработкой одного приложения, где было по 4–5 человек на Android и iOS соответственно, и мы часто работали сверхурочно. В этом проекте использовались множество сторонних открытых библиотек.

Сегодня же, благодаря совершенствованию официальной системы Jetpack за эти годы, большинство Android-разработчиков сосредоточены именно на этой системе, таких как Room, CameraX, Hilt, Navigation, Paging, WorkManager, Emoji2, DataStore, Media, Startup и других. Одним из самых значимых достижений Jetpack является Compose, который можно назвать "сверхновой" эпохи Jetpack.

Compose представляет собой новый инструмент для создания декларативных пользовательских интерфейсов для Android, предназначенный для упрощения и ускорения процесса разработки UI. Кроме того, благодаря open-source проекту compose-jb от JetBrains, Compose получил возможность работы в кросс-платформенной среде.

Здесь есть три ключевых момента:

• Compose — это инструмент для создания UI для Android;
• JetBrains предоставили open-source версию compose-jb для кросс-платформенной разработки;
• Compose использует подход декларативного программирования.С точки зрения разработки front-end, декларативное программирование является доминирующим направлением развития, такие технологии как React, Vue, SwiftUI, Flutter и многие другие используют этот подход. Например, последняя версия HarmonyOS 3.1 акцентирует внимание на переходе к декларативному программированию. Поэтому неважно, нравится вам это или нет, декларативное программирование стало основным трендом, хотя в ближайшее время оно может не полностью заменить XML-разметку в Android. Однако это явление указывает на общую тенденцию.Что касается кросс-платформенного программирования, то сегодня этот термин уже знаком всем, а различные кросс-платформенные фреймворки достигли высокого уровня зрелости. Однако для разработки Android-приложений Flutter и Jetpack Compose действительно выглядят уникально, так как они являются открытыми проектами компании Google и поддерживают кросс-платформенный подход. Это может вызвать путаницу среди некоторых разработчиков Android: какой выбрать?

Для ответа на этот вопрос давайте рассмотрим некоторые данные. В частности, вот сравнение ключевых слов для Flutter и Jetpack Compose на Google Trends, показывающее их популярность как глобально, так и в Китае:

Как видно из данных, популярность Flutter повышается стабильно по всему миру, но в Китае она демонстрирует значительные колебания, что свидетельствует о том, что многие разработчики всё ещё находятся в процессе принятия решения между Flutter и Jetpack Compose.Кроме того, стоит отметить, что Flutter был представлен давно, поэтому его текущий уровень популярности выше. Это также связано с увеличением спроса на кросс-платформенные решения, когда разработчики больше не ограничены одной платформой. Из данных можно заключить, что интерес к кросс-платформенным технологиям в Китае всегда был высоким.Хотя с момента выпуска Flutter постоянно вызывал споры, он всё же доказал свою ценность за эти годы. Мы будем рассматривать более подробные данные в других разделах.

Рассмотрим также данные Stack Overflow, где видно, что популярность как Flutter, так и Jetpack Compose продолжает расти. Недостаточное количество запросов относительно Jetpack Compose объясняется тем, что он был выпущен недавно. А если говорить о доле рынка Flutter, то она уже достаточно велика.

Обсуждая Flutter и Jetpack Compose, нельзя не упомянуть Dart и Kotlin соответственно. Данные Stack Overflow показывают, что хотя эти языки были выпущены некоторое время назад, их популярность начала стремительно расти с 2017 года. Почему именно тогда?

Этот факт напрямую связан с конференцией Google I/O 2017 года:

• Kotlin был открыт в 2012 году, а в 2017 году на конференции Google I/O официально стал первым языком для разработки Android.

• Dart был представлен в 2011 году, а в 2017 году Google I/O официально представил Flutter, где Dart является основным языком программирования.

Поэтому Kotlin, который ранее был мало известен, начал активно использоваться благодаря Android, аналогично Dart, который был почти заброшен, но благодаря Flutter получил второе дыхание. Похоже, что Google продемонстрировала отличные навыки управления в этой области.Давайте рассмотрим ещё одну статистику. Это данные о количестве запросов на слияние (PR) и звёзд (Star) для Kotlin и Dart на GitHub. Можно заметить, что точки начала роста совпадают с 2017 годом. Однако бурный рост Dart начался после выпуска первой версии Flutter. В целом, как Kotlin, так и Dart демонстрируют хороший рост, однако их основные применения всё ещё ограничены Android и Flutter соответственно.

Рассмотрим также исследование, проведенное за рубежом, которое показывает количество выступлений на тему Flutter и Compose на конференциях Droidcon. Хотя объём данных ограничен, можно видеть, что Flutter имеет стабильное количество тем каждый год с момента своего запуска, а Compose начал стремительно расти после выхода стабильной версии.

Наконец, GitHub также выпустил отчёт за 2022 год, содержащий некоторые интересные данные. Например, среди языков программирования с наибольшим ростом Kotlin занял десятое место. Кроме того, мобильная разработка остаётся одной из ключевых областей открытого программного обеспечения, где Kotlin, Dart, Flutter и Android являются важнейшими объектами.| | | | ------------------------------------------------------------ | ------------------------------------------------------------ |

Конечно, как было сказано выше, Dart и Kotlin до сих пор используются преимущественно в контексте Flutter и Android. По данным индекса популярности языков программирования TIOBE за ноябрь 2022 года, ни Dart, ни Kotlin пока не вошли в первую двадцатку этого рейтинга, который обновляется ежемесячно и служит хорошим ориентиром для оценки популярности языков программирования.

Не то чтобы другие области не могли использовать эти языки, например, Kotlin и Dart могут использоваться как серверные технологии. У меня были свои проекты с использованием backend, где я просто переиспользовал логику Kotlin с Android в серверной части. А Dart сам по себе через FFI (Foreign Function Interface) поддерживает работу с базами данных и может работать отдельно от Flutter как самостоятельная серверная технология. Об этом я уже рассказывал ранее, а сейчас количество библиотек FFI для работы с базами данных на Dart значительно увеличилось. Так что говорить, что они не поддерживаются, нельзя, просто пока их использование еще не так широко распространено.Давайте рассмотрим ещё одну статистику, предоставленную RedMonk в третьем квартале 2022 года (RedMonk 2022 Q3), где Kotlin занимает 17 место по популярности на GitHub и StackOverflow, а Dart — 19 место. Из этого можно сделать вывод, что эти два языка имеют хороший потенциал развития.

В заключение можно сказать: Android сделал Kotlin успешным, а Kotlin сделал Compose успешным; аналогично Flutter сделал Dart успешным.

Второй раздел: Что такое Compose для разработки Android

Переходим ко второму разделу, где мы обсудим, что такое Compose для разработки Android:

• Главное преимущество Compose для Android — это современный фреймворк для разработки UI. Compose предоставляет возможности декларативного программирования UI для Android, что является ключевой особенностью.
• Открытое API compose-jb от JetBrains позволяет расширять возможности разработки на других платформах, что представляет собой дополнительную ценность.

Таким образом, если вы продолжите разрабатывать приложения для Android, то освоение Compose становится обязательным навыком, поскольку он может стать основным способом разработки в будущем, хотя пока он ещё молод.

Считается молодым потому, что официально он был выпущен всего год назад. Официальная версия Jetpack Compose и compose-jb составляет 1.2, первый официальный выпуск состоялся в 2021 году, и за последний год было выпущено две большие версии. Кроме того, видно, что обновление compose-jb происходит после выпуска Jetpack Compose, поэтому Jetpack Compose является основой и ядром.

| | | | ------------------------------------------------------------ | ------------------------------------------------------------ |---

Известно, что в технических статьях о Flutter мы можем встретить множество статей от крупных компаний, но количество статей о Compose значительно меньше. Поэтому я могу привести примеры из приложений, установленных на моём телефоне.

Сейчас можно найти следующие шесть приложений, где используется Compose:

Однако важно отметить, что использование Jetpack Compose и использование библиотеки compose-jb — это две разные вещи. Я не знаю, используют ли вышеупомянутые продукты compose-jb, так как опыт работы с этой библиотекой в кросс-платформенной разработке пока ещё имеет свои недостатки.

Как новое независимое UI-фреймворк, Compose естественно отличается от старого подхода с использованием компонентов. Подобный декларативный способ размещения может потребовать некоторого времени для освоения со стороны разработчиков Android, поскольку он использует управление состоянием и связывание вместо методов типа view.xxxx.

Анализируя декомпилированный код, можно заметить, что компоненты Compose и native компоненты принадлежат к разным системам. Если вы посмотрите на скомпилированный код, то увидите, что компоненты, такие как BOX, реализуются через ComposerKt и BoxKt, а также другие фреймворки.

---

При этом после компиляции Compose не преобразуется в native Android View, а работает с помощью платформенного Canvas, что делает его похожим на Flutter. Можно сказать, что Compose представляет собой совершенно новый набор View.

Кроме того, стоит отметить, что хотя Compose представляет собой новые View, они могут корректно отображаться на устройствах Android вместе с границами макета.

Большинство кода внутри Compose может быть защищено путём переименования (обфускации), поэтому после активации этого процесса уровень сжатия кода становится очень высоким.

Разработка Compose основана на двух деревьях, виртуальном DOM-стиле SlotTable и концепциях React, что обеспечивает высокую производительность LayoutNode. Один из ключевых разработчиков Compose, Джим Спрош, ранее был одним из ключевых разработчиков React.

Это также является частью общего тренда развития front-end технологий. Независимо от того, являетесь ли вы разработчиком клиентских приложений или front-end разработчиком, ваши навыки должны быть применимы в различных областях.--- Еще раз рассмотрим compose-jb. Как показано на следующем рисунке, compose-jb отличается в многоплатформенной разработке. Сейчас Jetpack Compose реализует поддержку нескольких платформ через несколько модулей, поэтому Jetpack Compose и compose-jb имеют некоторые различия. В основе compose-jb лежит объединение compose-desktop, compose-web и compose-android. Особенно это касается веб-разработки, где требуется больше усилий для достижения уровня совместной работы кода, как в Flutter.

Как видно на приведённом выше рисунке, iOS уже находится в экспериментальной стадии. Поддержка androidx.compose.ui.main.defaultUIKitMain также находится в процессе подготовки к официальному выпуску. Различия в поддержке многоплатформенного подхода в compose-jb связаны с этим, особенно когда дело доходит до веб-кода.

import org.jetbrains.compose.web.dom.*
import org.jetbrains.compose.web.css.*

fun main() {
    var count: Int by mutableStateOf(0)

    renderComposable(rootElementId = "root") {
        Div({ style { padding(25.px) } }) {
            Button(attrs = {
                onClick { count -= 1 }
            }) {
                Text("-")
            }

            Span({ style { padding(15.px) } }) {
                Text("$count")
            }

            Button(attrs = {
                onClick { count += 1 }
            }) {
                Text("+")
            }
        }
    }
}

Кроме того, следует отметить выпуск версии 1.0 стабильной библиотеки Compose для Wear OS.

Еще одним важным моментом является то, что при использовании compose-jb вы можете столкнуться со такими понятиями, как Kotlin/JS, Kotlin/Native и KMM, что увеличивает затраты времени на обучение для разработчиков Android. Поэтому текущий уровень многоплатформенной разработки с помощью compose-jb еще находится на начальной стадии, а цель — обеспечить единый опыт разработки для всех платформ.

Проблема "разделения", о которой говорилось ранее, сейчас активно решается. Например, часть кода для desktop была перемещена в androidx, что указывает на то, что единая библиотека Compose может быть недалеко.Кроме того, Jetpack Compose теперь официально поддерживает зависимости для Compose через Gradle BOM (Bill of Materials), что позволяет указывать стабильные версии каждого модуля Compose.

На данный момент первая версия — это Compose версия октября 2022 года, а самая последняя вероятно будет 2022.11.00.

А что такое Gradle BOM? Вкратце можно сказать, что с его помощью больше нет необходимости вручную указывать версию каждой зависимости. Мы можем управлять всеми версиями библиотек Compose, просто указывая версию BOM, так как BOM содержит ссылки на стабильные версии различных модулей Compose, что позволяет им хорошо взаимодействовать друг с другом.

Конечно, говоря об этом, стоит отметить проблему, ограничивающую compose-jb: отсутствие сообщества плагинов.

Это действительно необходимое условие для работы в многоплатформенной среде: фронтенд использует npm, Flutter использует pub, вы можете найти нужные вам библиотеки на центральном сайте этих систем, проверить их популярность, версию, совместимость и использование, установить официальное признание и безопасность, а также получить рекомендации по трендам, какие платформы поддерживаются библиотеками и т.д., но в эпоху Maven эти возможности были слабыми. Это одна из главных задач, которую необходимо решить для дальнейшего развития compose-jb.Наконец, говоря о Compose, нельзя не упомянуть Android Studio: версии Compose и Android Studio имеют очень сильную зависимость, например:

1. Android Studio Arctic Fox (Белый Лис) начал поддерживать Compose preview, Interactive preview и Deploy to Device, а также Live Edit of literals и Layout Inspector.

2. Android Studio Bumblebee (Маленький Медведь) поддерживает Layout Inspector для проверки семантической информации в композиционной разметке, а также активирует Interactive preview по умолчанию, позволяющий взаимодействовать с разметкой во время превью, как будто она уже запущена на устройстве.

В режиме Preview interactive непосредственно в Android Studio можно запустить без использования эмулятора, что может вызывать некоторые ограничения: отсутствие доступа к сети, отсутствие доступа к файлам, некоторые контекстные API могут быть недоступны полностью.

Отдельно стоит отметить, что в настоящее время Compose не поддерживает Hot Reload, хотя полезность функции Apply Code в Android Studio очевидна для всех. Однако Compose поддерживает Live Edit of literals во время превью, что тоже является полезным инструментом.

3. Android Studio Chipmunk (Слоновая Кость) начал поддерживать анимацию animatedVisibility, которая теперь доступна для просмотра в режиме реального времени. Для использования этой функции требуется версия Compose 1.1.0 или выше.| | | | ------------------------------------------------------------ | ------------------------------------------------------------ |

4. Android Studio Dolphin (дельфин) поддерживает координацию анимации Compose. Если ваша анимация используется для предварительного просмотра компонентов, вы можете использовать предварительный просмотр анимации для одновременной проверки и координации всех анимаций, даже заморозки конкретных анимаций. Также поддерживается возможность проведения или отмены рефакторинга компонентов.

Наконец, если вас интересует вопрос, какие крупные компании используют compose-jb, то пока что я не нашёл значимых данных, но сообщается, что компания JetBrains уже внедрила Toolbox приложение с использованием compose-jb и выпустила его для использования.

3. Что такое Flutter для разработчиков Android?Давайте поговорим о том, что представляет собой Flutter для разработчиков Android. Если вы решите продолжать работать исключительно с Android, то Flutter может вам не представлять большой ценности, поскольку Flutter был создан внутри команды Chrome, поэтому он фактически никак не связан с Android. Однако, если вы заинтересованы в других платформах, Flutter является отличным выбором.Финальная версия Flutter была выпущена в 2018 году, после чего каждое следующее обновление происходило примерно каждые три месяца. Как видно на приведённой ниже диаграмме, скорость развития и обновлений Flutter очень высока, что свидетельствует о живом и активном Flutter-сообществе.

Если последняя версия всё ещё недостаточно убедительна, то недавние небольшие версионные выпуски также демонстрируют жизнеспособность сообщества Flutter, хотя это также указывает на трудности полной поддержки всех платформ, поскольку требуется решение многих проблем. Это связано с тем, что при работе с многоплатформенным подходом возникает больше вопросов, требующих совместимости, и именно поэтому в Flutter много "подводных камней".

Далее, если взглянуть на ежегодный отчёт GitHub за 2022 год, можно заметить, что Flutter занимает лидирующие позиции во всех открытых данных:

• В списке лучших проектов по количеству участников Flutter занимает третье место;
• По количеству новых участников, делающих первое вкладывание, Flutter занимает четвёртое место;
• По количеству участников каждого проекта Flutter занимает второе место;
• По процентному соотношению внешних участников Flutter занимает третье место.| | | | | | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |> Это демонстрирует высокую жизнеспособность Flutter, особенно активность сообщества. Каждый выпуск Flutter объединяет множество запросов на слияние (PR) от сообщества, что является причиной стремительного развития Flutter за последние годы, а также тому, почему Flutter так часто встречается в этом отчете GitHub.

Но сколько бы мы ни говорили, какие компании среди известных используют Flutter?

На следующем рисунке представлены приложения на моем телефоне, использующие Flutter, а также рост доли использования Flutter в области многоплатформенного программирования за последние три года. Можно видеть, что Flutter имеет значительное присутствие в этой области, и все эти данные были предоставлены для того, чтобы продемонстрировать одну простую идею: Flutter уже не считается малочисленным.

Baidu Netdisk, Zhuanzhuan, Aliyun Disk, Xianyu, WeChat, Juejin, Enterprise WeChat, Weibo, Bilibili Comics, Alibaba Cloud, UC Browser, Youku Video, DingTalk, 360 Camera, NetEase Mail, Tmall Genie, Lianjia, Meituan Zhaoban, Phoenix News, Tencent Classroom, Himalaya, Ctrip Travel, Ke.com, WPS, Study Strong, Vipshop, Tonghuashun| | | | ------------------------------------------------------------ | ------------------------------------------------------------ |Перейдём к самому Flutter, преимущества Flutter заключаются в том, что он использует единую базу кода (single codebase), которая действительно компилируется в нативный код различных платформ, а уникальность кросс-платформенного подхода Flutter заключается в том, что он не зависит от платформенных контрольных элементов, а все контролируемые элементы в конечном итоге рендерятся с помощью Skia через графический процессор платформы.

Контрольные элементы внутри Flutter практически не зависят от платформы, что является большим преимуществом при работе с кросс-платформенным приложением, так как эти элементы связаны только с фреймворком Flutter, то эффект, который вы получаете на Android, можно получить точно таким же образом на iOS, что значительно повышает эффективность разработки.

Однако это также увеличивает объемы работы по поддержанию фреймворка, поскольку элементы управления, такие как TextField и Text, должны быть совместимыми с мобильной и компьютерной операционной системой, чтобы обеспечивать работу с жестами и мышью. Это одна из причин, почему некоторые функции, такие как глобальное выделение (Global Selection), появились только в версии bk.3.

Flutter сталкивается со многими проблемами, особенно когда дело доходит до всё более усложняющихся вопросов рендеринга уровня ниже. Поэтому Flutter начал создание своего собственного движка рендеринга, потому что использование Skia уже не удовлетворяет возрастающему количеству ошибок и ограничениям производительности. Поэтому официальная команда начала разработку двигoкa рeнdepeнгa Impeller.Потому что сейчас каждое возникновение проблемы требует общения между командой Flutter и командой Skia, а затем ожидания решения, этот темп слишком медленный, и это видно даже из небольших обновлений версий, выпущенных ранее.> Основная цель создания Impeller — решение проблем, возникающих при выполнении Skia, позволяя Impeller выполнять компиляцию GLSL и MSL прямо в компиляторе, без необходимости использования SKSL, что повышает производительность и устойчивость во время выполнения. В настоящее время поддержка начинается с iOS, где используется оптимизация с использованием Metal, и если всё будет хорошо, она будет поддержана и на Android и Vulkan.

С этой точки зрения можно предположить, что Flutter столкнётся с аналогичными проблемами в случае с compose-jb, и если проект Impeller продвинется успешно, то его возможности могут не ограничиваться только Flutter, возможно, он сможет поддержать и compose-jb.

На самом деле в открытом проекте JetBrains есть проект под названием skiko. Skiko (сокращение от "Kotlin Skia") — это графическая библиотека, которая поддерживает реализацию для Kotlin/JVM, Kotlin/JS, Kotlin/Native и других.

Поэтому разработка собственного движка не кажется чем-то странным. По мере развития и углубления проекта многие проблемы уровня железа становятся препятствием для быстрого продвижения, что приводит к необходимости создания собственной версии. Например, переход Hermes в RN 0.7 как основной движок также демонстрирует подобную проблему. Разработка собственного уровня является необходимым этапом для ответственного открытого сообщества.Наконец, если говорить о том, какой самый большой смысл Flutter имеет для разработчиков Android, то это возможность создания приложений для других платформ. Через Flutter можно узнать и начать работать с другими платформами, а также получить навыки работы с большинством компонентов Compose заранее. Ниже представлен сравнительный анализ кода Compose и Flutter:

Именно поэтому после освоения Flutter разработчики Android оказываются недалеко от понимания Compose, и наоборот.

Здесь стоит отметить проекты для начинающих с Flutter и Compose от эксперта FlutterUnit и ComposeUnit. Код выше взят именно из этих проектов, где представлено множество примеров, особенно полезных для новичков.

В заключение

Цель этой презентации — показать, что уровень зрелости Compose и Flutter уже достаточно высокий. Когда ваш руководитель говорит вам, что Kotlin и Dart ещё недостаточно распространены, а Flutter и Compose слишком специфичны, вы можете предоставить ему некоторые факты и данные.Основные выводы:

• Основой Compose остаётся библиотека UI для Android, которую обязательно должны знать все разработчики Android. Что касается возможности использования compose-jb для кросс-платформенной разработки, то здесь ещё предстоит некоторый путь.
• Основой Flutter является более стабильная поддержка всех платформ, а также активное развитие сообщества. Особенно заметна его популярность среди разработчиков для рабочих станций. В настоящее время известно, что DingTalk, ByteDance и WeChat Enterprise уже используют Flutter для разработки рабочих станций. Соответственно, выбрав вариант, который совпадает с вашим подходом, вы сразу поймёте, какой выбор сделать, а независимо от того, какой выбор вы сделаете, это будет подготовкой для другого фреймворка, поэтому не стоит беспокоиться о том, что потеряете что-то важное. Увлечённые ребята могут уже начинать действовать!