Как использовать Remote Compose для интерактивных поверхностей

Здравствуйте!

Меня зовут Николя Роар, я технический руководитель проекта Remote Compose.

Меня зовут Джон Хофорд.

Я разработчик Remote Compose.

А я Джон Зёллер, и я занимаюсь связями с разработчиками в Wear OS.

Давайте начнем.

Итак, сначала я кратко расскажу о том, какую именно проблему мы пытаемся решить с помощью Remote Compose.

Обычно, когда вы говорите или думаете об интерфейсе на Android, вы думаете об интерфейсе как о части вашего приложения и процесса вашего приложения, верно?

Есть много разных мест, где иногда вы хотите взять свой пользовательский интерфейс, упаковать его и отправить куда-то ещё, например, на удалённую поверхность.

Под удаленной поверхностью мы понимаем что-то вроде этих примеров, например стили часов, виджеты, это может быть даже ваше собственное приложение или другое приложение, хорошо?

Все это примеры удаленных поверхностей.

Таким образом, где-то, где-то ещё, может быть, в вашем приложении, может быть, на сервере, где-то ещё знает, что отправить на эту удалённую поверхность.

И…

Что насчет колонки?

Между ними есть расстояние.

И это расстояние может быть буквально фактическим расстоянием, может быть сетевым подключением, верно?

Это также может быть просто граница процесса.

Вы можете использовать одно и то же устройство.

Но за все приходится платить.

Самое простое, что можно сделать, чтобы отправить интерфейс, – это сделать скриншот и отправить его.

Проблема в том, что это не очень быстро, верно?

Вместо этого Remote Compose отправляет документ, представляющий этот интерфейс.

И помните, что у маленьких команд есть свои плюсы.

Это важно.

Мы видели это на первом пикселе, который вы отправили, но на самом деле это верно для любого типа обновлений, которые вы хотите сделать на этой поверхности, верно?

Вы получили билет туда и обратно.

Вы получаете что-то на этой удаленной поверхности, например событие, клик, касание.

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

И это, это нехорошо.

Именно эту проблему мы и пытаемся решить с помощью Remote Compose.

Мы видели, как отправлялся документ.

Помимо документа, есть ещё пара важных областей.

Один из них — это то, как вы создаете этот документ.

А второй – как вы играете.

Я упомянул, что мы создаем документ.

Мы не отправляем копию экрана и не отправляем приложение.

Мы предлагаем три способа создать такой документ.

Первый – Compose API, второй – процедурный Kotlin API, KMP, а третий – формат JSON.

Все они выдают одни и те же байты.

Поэтому мы предоставляем набор инструментов для создания таких документов, а с помощью Compose API мы можем использовать существующие инструменты в Android Studio.

Например, вы можете использовать предварительный просмотр, чтобы увидеть, что вы разрабатываете, прямо в IDE.

Но мы также работаем над новыми мощными инструментами, такими как инспектор документов.

Давайте посмотрим, что это за документ.

По сути, это список операций, закодированных в компактном двоичном представлении, и эти операции описывают отдельный пользовательский интерфейс, который можно отправить на эту удаленную платформу.

Очень важная характеристика этих документов – они небольшие.

И, как мы видели, маленький – это хорошо.

То есть обычно речь идет о нескольких килобайтах, верно?

Но даже если у вас сложный интерфейс с адаптивным макетом, речь все равно идет о нескольких десятках килобайт, верно?

и упаковываем все объекты в этот документ.

Так что, если подумать, единственное, что действительно может занимать место в документе, это если вы начнете упаковывать растровые изображения.

Помните об этом.

Ведь именно поэтому мы отправляем документ, а не копию экрана.

Когда мы говорим о том, что быть маленьким важно, мы имеем в виду не только общение.

Это своего рода центральный угловой случай философии Remote Compose.

Как мы видели, это, очевидно, влияет на время, необходимое для получения первого пикселя на экране, но упс, извините.

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

И это то, что мы увидим, что мы воспользуемся этим, когда будем поддерживать виджеты.

Сами проигрыватели тоже обычно довольно маленькие и имеют очень мало зависимостей.

А тот факт, что они небольшие и имеют мало зависимостей, означает, что мы можем расширить охват до того места, где мы действительно можем воспроизводить документы Remote Compose.

И это особенно важно для платформ с ограниченными ресурсами, как вы увидите.

Я много говорил о транспорте и расстоянии, но Remote Compose сам по себе не имеет дела с транспортом.

Это зависит от вас.

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

Для виджетов мы предоставляем коннектор.

Но в целом полезно помнить, что вы отвечаете за транспорт.

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

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

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

В этом и заключается вся идея.

Мы хотим, чтобы документ создавал пользовательский интерфейс, который был бы в некоторой степени автономным, чтобы ему не приходилось возвращаться к тому, кто его создал, верно?

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

Иногда, если вам нужно вернуться к созданию, вы можете запросить действие, например "Создай новый документ".

Мы предлагаем три официальных проигрывателя, которые в основном доступны через библиотеки AndroidX в Remote Compose.

Один из них – проигрыватель Compose, который можно использовать в приложении Compose.

Если вы все ещё используете View, у нас есть проигрыватель и для него.

У нас также есть реализация RemoteViews, которая поставляется на платформе Android, начиная с API 36, и позволяет создавать виджеты Android, работающие на панели запуска, с помощью Remote Compose.

У нас также есть несколько экспериментальных проигрывателей, если вам интересно, некоторые C++ работают на Skia, TypeScript и даже Compose Multiplatform.

Идея в том, что одну и ту же технологию можно использовать для рендеринга на разных платформах.

Итак, подводя итог, можно сказать, что расстояние, о котором я говорил, по-прежнему имеет значение, но мы стараемся сделать так, чтобы оно имело значение только тогда, когда это действительно так.

Да.

Давайте поговорим о возможностях, которые вы получите в документе Remote Compose.

В основе лежит Canvas со всеми функциями Android Canvas.

но с несколькими дополнительными API.

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

Это позволяет создавать анимацию, как вы видите здесь, динамическое масштабирование, гибкие макеты.

С его помощью можно делать много разных вещей.

Ещё немного о выражениях.

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

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

На этом рисунке каждый маятник выбирает свой тип анимации, и все они доступны в Remote Compose.

Кроме того, у нас есть базовые компоненты, элементы Compose, то, что вы знаете.

Он создает очень знакомый API, box, row, column и тому подобное.

Но кроме этого, у нас есть адаптивные компоненты.

Одно из преимуществ такого подхода заключается в том, что, поскольку вы не контролируете документ в этот момент, эти объекты могут исчезать и появляться, уходить и возвращаться из-за изменения размера и т. д., и все это без возврата к источнику документа.

Кроме того, у нас есть анимация компонентов.

Все изменения можно анимировать, поэтому, если что-то исчезает, вы можете это анимировать.

Вы также можете создавать собственные анимации.

В данном случае, вы видите, что некоторые из них используют шейдеры и другие вещи.

Ещё одна возможность – взаимодействие с объектами.

Вы можете нажимать на элементы, использовать события касания, прокрутку и т. д.

Также важна доступность, поэтому все ваши API специальных возможностей находятся там.

Как видите, я создаю полноценный секундомер с интересным интерфейсом, и все это происходит на стороне проигрывателя.

Все это находится в документе.

Все, что вы видите, не возвращается на сервер.

Если вы создали его в приложении, то в этом случае синие части – это приложение, а черные – документ Remote Compose.

Вы можете взаимодействовать с ними обоими.

Здесь я увеличиваю значения, и вы видите, что они принимаются приложением, которое мы называем хостом, и я также могу перемещать ползунок, и это изменит значения внутри документа.

Так что я могу пойти в обоих направлениях.

Давайте разберемся, как создать такой документ.

На самом деле API три: Compose, Kotlin и JSON.

Compose API, вы уже знаете, что это такое.

В нем есть несколько нюансов, и мы подробно их рассмотрим.

Kotlin API – это процедурный API.

Вы как бы вводите одну команду в документе, так что это своего рода один к одному.

JSON – это синтаксис JSON, который можно преобразовать в Remote Compose с помощью конвертеров.

Это также полезно, если вы работаете с LLM, потому что они могут читать документы и писать документы.

Итак, давайте перейдем в Compose и что-нибудь создадим.

В этом случае вы увидите, что это composable-функция и удаленная composable-функция.

У нас есть холст, точнее, удаленный холст и удаленные модификаторы, но сами модификаторы такие же, как и те, которые вы знаете и любите.

Теперь все команды внутри него фактически генерируют удаленные команды Remote Compose document по мере их выполнения.

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

И когда я включаю анимацию, обратите внимание, что это предварительный просмотр в реальном времени из Android Studio, и он действительно будет работать для вас в реальном времени.

Вы видите эти выражения.

Давайте немного поговорим о том, что это такое и как это работает.

Слева вы увидите что-то вроде таблицы.

Это таблица значений с плавающей запятой.

И у него также есть дерево зависимостей, так что вы знаете, где одна вещь соединяется с другой.

Когда что-то меняется, зависимые элементы помечаются как грязные, чтобы их можно было очистить и скорректировать.

По мере выполнения он будет очищать все свои зависимости и оценивать только те, которые изменяются.

Это очень эффективно. Если, например, размер объекта изменится, то изменится и зависимость, и это должно быть отражено.

Это делает вычисления очень эффективными, потому что вы не идете сверху вниз, а действуете очень эффективно.

Давайте немного расширим эти часы, чтобы показать, что мы можем создавать реальные вещи, немного реальные вещи.

В этом случае мы добавим несколько делений по краям, и вы увидите несколько циклов for, так что вы можете использовать цикл for в локальном и правом.

Затем мы добавляем часовую и минутную стрелки, а потом переходим к секундам. Добавляем секунды, а затем завершаем работу парой разных кнопок, чтобы закончить, и у нас есть живые часы.

Они показывают время.

Интересно, что то же самое можно написать в формате JSON. В этом случае вы можете легко взаимодействовать с LLM, например сказать: "Сделай минутную стрелку зеленой", и модель поймет, что вы имеете в виду.

Это очень удобно.

Окей.

Справа.

Надеюсь, теперь вы понимаете, на что способен Remote Compose.

Давайте я немного расскажу о поддержке разработчиков.

Итак, я упомянул, что в основном это библиотеки AndroidX, поэтому все, что есть на DAC, вы знаете, где найти.

Вы получите доступ к последним версиям, документации и другим материалам.

Как обычно, Джон продемонстрировал, что мы можем сделать в Android Studio.

Самое классное, на мой взгляд, – это предпросмотр в реальном времени, который значительно ускоряет разработку.

Мы также работаем над общедоступной спецификацией формата.

Мы не пытаемся что-то скрыть.

Вы можете посмотреть, как он работает, как он на самом деле построен и закодирован.

Один из распространенных элементов, которые вы используете в своих приложениях, – это анимированные векторные изображения. И, знаете, это очень удобно.

И помните, что я говорил о растровых изображениях.

Мы очень заинтересованы в том, чтобы вы отправляли векторы, а не растровые изображения, верно?

Поэтому мы создаем несколько инструментов, которые помогут вам взять Lottie, например, возможно, другой формат, и преобразовать его в компонент RemoteCompose, который вы можете использовать в своем файле RemoteCompose.

Ранее я упоминал, что мы также работаем над дополнительными инструментами, в частности над инспектором документов, потому что одно дело – иметь опыт разработки, а другое – иметь возможность проверить результат этой разработки.

В нашем случае это документ.

Итак, вот краткий предварительный просмотр инструмента, над которым мы работаем.

Это инспектор документов RemoteCompose, который позволяет проверять документы, как следует из названия, и применять к ним несколько полезных инструментов и визуализаций.

Например, вы можете открыть документ и пошагово выполнить описанные в нем действия, чтобы лучше понять, как все устроено.

Но у нас есть дополнительные инструменты.

Например, мне очень нравится этот, который сразу визуализирует ваш документ в разных, знаете ли, плотностях и размерах, так что вы можете очень быстро увидеть, будет ли то, что вы создаете, хорошо адаптироваться к различным изменениям размеров, например.

Одна из последних вещей, над которыми мы также работаем, – это действительно полноценный инспектор макетов, то есть тип возможностей проверки макетов, к которым вы привыкли в Android Studio, но здесь он применяется к операциям и документам, верно?

Но мы можем пойти ещё дальше в плане 3D.

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

Это важно.

Документы должны быть небольшими.

Это помогает всем.

Пожалуйста, сделайте это.

Что же делать?

Давайте возьмем распространенный пример пользовательского интерфейса, верно?

Что-то, где у вас есть куча строк.

В самих строках есть название, небольшой график и, возможно, кнопка.

Обычное дело.

Размер этого интерфейса и так довольно мал.

Мы говорим о примерно 25 КБ, но у нас есть различные функции в RemoteCompose, которые помогут вам сделать его ещё меньше.

Давайте рассмотрим их.

Первое, что мы делаем, и это бесплатно, мы сделаем это за вас, если вы отправляете одни и те же строки, мы это заметим.

Мы можем сэкономить несколько байтов, указав на одну и ту же строку.

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

Итак, здесь я использовал эту операцию цикла, чтобы нарисовать свой маленький график, верно?

что позволяет сэкономить ещё несколько байт.

У нас также есть функции.

Итак, вы можете создать функцию, и здесь я снова делаю это для этого графика, а затем я могу просто вызвать этот график несколько раз.

И опять же, это сэкономит мне несколько байтов.

А для компонента у нас есть шаблоны, верно?

Похожие идеи, как и для функций, но больше для компонента, верно?

И поэтому я могу заменить все эти разные компоненты, все эти разные строки, просто вызвав этот шаблон с правильными параметрами, и это значительно экономит место в документе.

И последнее, что мы поддерживаем из коробки, – это сжатие документа.

Как правило, таким образом можно сэкономить около половины размера документа.

Интересно, что заголовок документа немного особенный.

Мы не сжимаем его.

Это очень удобно, если вы хотите быстро просмотреть множество документов, не распаковывая их.

Итак, документы небольшие, вы знаете, нестандартные, но вы также можете сделать их намного меньше.

И вы можете видеть на этом маленьком примере, как легко буквально уменьшить его на порядок, как мала эта функция.

Я говорил о виджетах и, в частности, о виджетах лаунчера на платформе Android.

Давайте немного поговорим о том, что мы делаем и что уже есть.

Итак, первое, что мы можем сделать, это воспроизвести существующий виджет, например эти часы, исключительно в RemoteCompose, и он будет вести себя по сути так же, только в RemoteCompose.

Но мы можем сделать больше, верно?

Если вы хотите сделать интерфейс более адаптивным, а виджеты – масштабируемыми и правильно анимированными, то теперь это возможно.

Потому что у нас есть правильные примитивы для этого, в отличие от того, что вы могли бы сделать с удаленными представлениями.

По сути, мы даем вам гораздо больше гибкости и возможностей.

И, говоря о мощности, вот краткий пример сумасшедших вещей, которые вы могли бы сделать, верно?

В виджете будет показана полная игра.

И я бы указал на фактический размер этого виджета.

Речь идет о 4 КБ.

Я упоминал, что транспорт – это не то, с чем мы напрямую имеем дело в Remote Compose.

Хотя специально для виджетов мы предоставляем класс коннектора RemoteCompose Widget, который позволяет очень легко взять документ и отправить его в лаунчер.

Однако если у вас уже есть виджеты, мы рекомендуем продолжать использовать Glance, поскольку последняя версия Glance автоматически предоставляет серверную часть для отправки Remote Compose на платформу.

А теперь поговорим о Wear OS.

Спасибо, Нико.

Всем привет!

Меня зовут Джон Зёллер.

Я хочу рассказать вам о Wear OS.

Я написал около 30 шуток для этой презентации, но рассказал их все маме, и она сказала, что меня уволят, если я расскажу хоть одну из них.

Поэтому я пропущу этот шаг и сразу перейду к презентации.

Давайте поговорим об удаленном Compose и его преимуществах для Wear OS.

Сначала мы поговорим о новом трекере тренировок для Wear OS.

Мы использовали Remote Compose, чтобы создать это приложение, и знаем, что создать полнофункциональный и качественный трекер тренировок для Wear очень сложно.

Это займет некоторое время.

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

А благодаря Remote Compose мы смогли отделить интерфейс от выполнения, поэтому он работает очень эффективно и не разряжает батарею.

Без Remote Compose, если бы мы делали это с помощью обычного Compose, мы бы не смогли обновлять текущие показатели на экране каждую секунду.

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

Это большое преимущество.

И, на самом деле, это GIF-файл, хотите верьте, хотите нет.

Это не картинка.

Я знаю, что он ещё не изменился и изменится примерно через 45 секунд, когда мы перейдем к следующему обновлению показателей.

Но в этом и заключается преимущество удаленного создания.

И знаете что?

Wear Workout Tracker доступно.

Например, на его основе создано приложение ASICS Runkeeper. Вы можете попробовать его прямо сейчас, перейдя по этой ссылке и присоединившись к открытому бета-тестированию.

Далее у нас виджеты Wear OS.

Это ещё один отличный пример удалённого создания в действии.

Они заменяют старую библиотеку ProtoLayout Tiles, поэтому вам больше не нужно поддерживать два разных типа фреймворков пользовательского интерфейса для разных устройств.

Все это можно сделать с помощью Remote Compose.

А поскольку они являются частью Jetpack Glance, виджеты в Wear OS являются частью единой экосистемы виджетов Android.

Интерфейс виджетов RemoteCompose полностью отделен от процессов приложений, поэтому их можно безопасно сериализовать и отрисовывать на устройствах Wear OS, используя ту же технологию, что и в остальной части стека Android.

Remote Compose также позволяет использовать в виджетах современную графику и адаптивные макеты, не расходуя при этом много энергии.

В Wear OS 7 производители устройств уже используют вертикальную прокрутку.

Это Samsung Galaxy Watch. Вы видите, как виджеты прокручиваются по вертикали.

Чтобы узнать больше о переносе карточки в виджет, перейдите по этой ссылке.

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

Кроме того, они полностью совместимы с Wear OS 4.

А по этой ссылке вы можете узнать больше об обратной совместимости.

У нас есть и другие партнеры, которые уже используют виджеты.

Вы можете посмотреть.

На этом у меня всё.

Да, Нико, передаю слово тебе.

Спасибо!

Теперь

На этом наш разговор завершен.

Мы рассмотрели некоторые возможности Remote Compose.

Есть ещё несколько, о которых мы не говорили.

Это очень богатый фреймворк.

Рекомендую вам ознакомиться с доступной документацией и следить за обновлениями.

Я бы сказал, что наша цель – построить будущее, в котором вы сможете использовать Remote Compose для работы со всеми этими удаленными поверхностями.

И вы видели некоторые из них, например, виджеты для Wear OS.

Но это ещё не всё.

Я бы также сказал, что это текущий проект.

Она находится в активной разработке.

Мы, как вы знаете, разрабатываем все это открыто.

Вы можете видеть, что мы делаем.

Но я бы сказал, что мы действительно хотим услышать мнение разработчиков, верно?

Мы работаем над этим.

Если у вас есть идеи или вы хотите что-то добавить, свяжитесь с нами.

Мы будем рады помочь.

В заключение хочу сказать, что вся презентация, которую вы только что видели, включая анимацию, была создана с помощью Remote Compose.