Optimiser les surfaces interactives avec Remote Compose

Bonjour,

Je m'appelle Nicolas Roard et je suis responsable technique du projet Remote Compose.

Je m'appelle John Hoford.

Je suis développeur pour Remote Compose.

Je m'appelle John Zoeller et je suis responsable des relations avec les développeurs pour Wear OS.

Bien, commençons.

Je vais d'abord vous présenter rapidement le type de problème que nous essayons de résoudre avec Remote Compose.

En général, quand on parle ou qu'on pense à l'UI sur Android, on la considère comme faisant partie de l'application et de son processus, n'est-ce pas ?

Il existe de nombreux cas où vous pouvez vouloir prendre votre UI, la packager et l'envoyer ailleurs, par exemple vers une surface distante.

Par "surface distante", nous entendons des éléments tels que les cadrans, les widgets, voire votre propre application ou une autre application.

Tous ces éléments sont des exemples de surfaces distantes.

Ainsi, un autre élément (votre application, un serveur ou autre) sait ce qu'il doit envoyer à cette surface distante.

Et…

Qu'en est-il de mon enceinte ?

Entre ces deux éléments, il y a essentiellement une distance.

Cette distance peut être une distance physique ou une connexion réseau.

Il peut également s'agir d'une limite de processus.

Vous pouvez utiliser le même appareil.

Mais quoi qu'il en soit, cela a un coût.

La chose la plus simple à laquelle vous pourriez penser pour prendre cette UI et l'envoyer est de faire une capture d'écran et de l'envoyer.

Le problème, c'est que ce n'est pas très rapide, n'est-ce pas ?

Avec Remote Compose, nous envoyons un document représentant cette UI.

Et gardez cela à l'esprit : être petit présente de nombreux avantages.

C'est important.

Nous l'avons vu sur le premier pixel que vous avez envoyé, mais cela s'applique en fait à tout type de mise à jour que vous souhaitez effectuer sur cette surface, n'est-ce pas ?

Vous avez choisi l'aller-retour.

Vous obtenez ainsi un événement, un clic ou un toucher sur cette surface distante.

Vous devez vous adresser à la personne qui l'a créé pour obtenir une nouvelle version.

Et ça, ce n'est pas bon.

C'est donc ce que nous essayons de résoudre avec Remote Compose.

Nous avons donc vu le document être envoyé.

À côté du document, il y a deux zones très importantes.

La première est la façon dont vous créez ce document.

La seconde est la façon dont vous y jouez.

J'ai mentionné que nous créions un document.

Nous n'envoyons pas de copie d'écran ni d'application.

Nous vous proposons donc trois façons de créer ce document.

La première est une API Compose, la deuxième est une API Kotlin procédurale (KMP) et la troisième est un format JSON.

Ils émettent tous les mêmes octets.

Nous fournissons donc un ensemble d'outils pour créer ces documents. Avec l'API Compose, nous pouvons exploiter les outils existants dans Android Studio.

Par exemple, vous pouvez utiliser l'aperçu pour voir en direct ce que vous développez, directement dans l'IDE.

Mais nous travaillons également sur de nouveaux outils puissants, comme un inspecteur de documents.

Voyons rapidement ce qu'est ce document.

Il s'agit fondamentalement d'une liste d'opérations encodées dans une représentation binaire compacte, et ces opérations décrivent une interface utilisateur autonome qui peut être envoyée à cette surface distante.

Une caractéristique très importante de ces documents est qu'ils sont petits.

Et comme nous l'avons vu, plus la valeur est petite, mieux c'est.

En général, on parle de quelques kilo-octets.

Mais même pour une UI plus complexe avec une mise en page très adaptative, on parle de quelques dizaines de kilo-octets, n'est-ce pas ?

Nous regroupons tous les éléments dans ce document.

En y réfléchissant, la seule chose qui peut vraiment prendre de la place dans le document, ce sont les bitmaps que vous intégrez.

Gardez bien cela à l'esprit.

Après tout, c'est la raison pour laquelle nous envoyons un document et non une capture d'écran.

Quand nous parlons de l'importance d'être petit, il ne s'agit pas seulement de la communication.

C'est un cas limite central de la philosophie de Remote Compose.

Comme nous l'avons vu, cela a évidemment un impact sur le temps nécessaire pour afficher le premier pixel à l'écran, mais… oups, désolé.

Cela signifie également que nous pouvons utiliser, à capacités égales de la surface, plus de documents que nous ne le ferions autrement, tout en restant efficaces.

Nous verrons que nous en tirons parti lorsque nous prenons en charge les widgets.

Les lecteurs eux-mêmes ont tendance à être assez petits et à avoir très peu de dépendances.

Comme ils sont petits et qu'ils ont peu de dépendances, nous pouvons étendre la portée de la lecture des documents Remote Compose.

C'est particulièrement important pour les plates-formes limitées, comme vous le verrez.

J'ai beaucoup parlé du transport et de la distance, mais Remote Compose ne gère pas vraiment le transport en lui-même.

C'est à vous de décider.

Nous empaquetons tout cela dans un tampon d'octets que vous pouvez ensuite envoyer à la surface distante avec la méthode appropriée.

Pour les widgets, nous vous aidons en vous fournissant un connecteur.

Mais en général, il est utile de garder à l'esprit que vous êtes responsable du transport.

Une fois que le lecteur a reçu ce document, la méthode d'envoi peut extraire la liste des opérations et les convertir en commandes de dessin, en arborescences de mise en page et en expressions. Tout cela permet de créer une expérience utilisateur vraiment riche.

En vous donnant le pouvoir de décider comment vous souhaitez transférer le document, vous pouvez réutiliser Remote Compose comme outil dans de nombreux scénarios, dont certains auxquels nous ne pensons peut-être même pas.

Une fois le document chargé par un lecteur, il s'exécute de lui-même.

C'est un peu l'idée.

Nous voulons que le document crée une UI quelque peu autonome, qui n'ait pas à revenir vers son créateur, n'est-ce pas ?

Et tout cela ensemble, nous pouvons prendre en charge, vous savez, le redimensionnement, le défilement, les événements tactiles, vous savez, décider d'afficher ou de masquer des composants, l'animation, certains événements tactiles et une certaine gestion tactile, tout cela peut être fait dans le document sans avoir à revenir au lecteur.

Et parfois, si vous devez revenir en arrière, désolé, à la création, vous pouvez demander une action pour dire "Veuillez me donner un nouveau document".

Nous fournissons trois lecteurs officiels, principalement via les bibliothèques AndroidX dans Remote Compose.

L'un est un lecteur Compose, que vous pouvez utiliser dans votre application Compose.

Nous proposons également un lecteur View si vous utilisez encore View.

Nous proposons également une implémentation de RemoteViews, disponible sur la plate-forme Android depuis l'API 36, qui vous permet de créer des widgets Android s'exécutant sur le lanceur d'applications à l'aide de Remote Compose.

Nous avons également des lecteurs expérimentaux si vous êtes intéressé, certains en C++ s'exécutant sur Skia, TypeScript et même Compose Multiplatform.

L'idée est donc que la même technologie que vous utilisez peut être utilisée pour afficher du contenu sur de nombreuses surfaces et plates-formes différentes.

En résumé, la distance dont je parlais est toujours là, mais nous essayons de faire en sorte qu'elle n'ait d'importance que lorsqu'elle en a vraiment.

Oui.

Voyons rapidement les fonctionnalités disponibles dans un document Remote Compose.

À la base, il y a un Canvas, qui possède toutes les fonctionnalités d'un Canvas Android.

Mais avec quelques API supplémentaires.

Mais l'une des particularités est que tous les floats que vous avez dans ce canevas Android peuvent être remplacés par des expressions.

Cela vous permet de créer des animations, comme vous le voyez ici, une mise à l'échelle dynamique et des mises en page flexibles.

Il permet de faire beaucoup de choses différentes.

En savoir plus sur les expressions.

Vous disposez d'un ensemble complet d'opérateurs mathématiques standards, de fonctions trigonométriques, d'accès aux tableaux et d'interpolation spline.

L'un des avantages est que toute valeur qui change peut être animée. Vous pouvez donc animer le changement d'état de n'importe quelle valeur.

Dans ce dessin, chaque pendule choisit un type d'animation différent, et tous sont disponibles dans Remote Compose.

En plus de cela, nous avons les composants de base, les éléments Compose, des choses que vous connaissez.

Elle produit une API très familière, avec des éléments tels que Box, Row, Column, etc.

En plus de cela, nous avons des composants adaptatifs.

L'un des avantages est que, comme vous ne contrôlez pas votre document à ce stade, ces éléments peuvent gérer la disparition, l'apparition, la disparition et le retour d'objets en raison d'un redimensionnement, etc., sans revenir à la source du document.

En plus de cela, nous avons l'animation des composants.

Toutes les modifications peuvent être animées. Ainsi, si un élément disparaît, vous pouvez l'animer.

Vous pouvez également écrire vos propres animations personnalisées.

Dans ce cas, vous pouvez voir que certains d'entre eux utilisent des nuanceurs, toutes sortes de choses.

Nous pouvons également interagir avec les images, et pas seulement les regarder.

Vous pouvez cliquer sur des éléments, avoir des événements tactiles, faire défiler l'écran, etc.

L'accessibilité est également importante. Toutes vos API d'accessibilité sont donc disponibles.

Comme vous pouvez le voir, je crée un chronomètre complet avec des interfaces utilisateur intéressantes, et tout cela se passe du côté du lecteur.

Tout est dans le document.

Tout ce que vous voyez, sans avoir à revenir au serveur.

Si vous l'avez créé dans une application, les parties bleues représentent l'application et les parties noires représentent un document Remote Compose.

Vous pouvez interagir entre les deux.

Ici, j'incrémente des valeurs, et vous les voyez être reçues par l'application, ce que nous appelons l'hôte. Je peux également déplacer un curseur, ce qui modifiera les valeurs dans le document.

Je peux donc aller dans les deux sens.

Voyons maintenant comment créer l'un de ces documents.

Il existe en réalité trois API : Compose, Kotlin et JSON.

Vous connaissez déjà un peu l'API Compose.

Il comporte quelques subtilités que nous allons examiner en détail.

L'API Kotlin est très procédurale.

Il s'agit d'une commande dans le document, donc d'une relation un à un.

Le JSON est une syntaxe JSON que vous pouvez convertir en Remote Compose à l'aide de nos convertisseurs.

Il est également utile si vous travaillez avec un LLM, car il peut lire et écrire les documents.

Passons maintenant à Compose et créons quelque chose.

Dans ce cas, vous verrez qu'il s'agit d'un composable et d'un composable distant.

Nous avons un canva... pas un canevas, mais un canevas distant et des modificateurs distants, mais les modificateurs eux-mêmes sont un peu les mêmes, ceux que vous connaissez et appréciez.

Toutes les commandes qu'il contient génèrent des commandes de document Remote Compose au fur et à mesure de leur exécution.

Dans ce cas, en dessinant un cercle, puis en ajoutant des nombres à virgule flottante et des expressions utilisant le temps.

Lorsque je l'active dans l'animation, vous pouvez voir qu'il s'agit d'un aperçu en direct d'Android Studio et qu'il s'exécute en direct.

Vous voyez ces expressions ici.

Voyons un peu de quoi il s'agit et comment cela fonctionne.

À gauche, vous verrez une sorte de feuille de calcul.

Il s'agit d'un tableau des valeurs en nombres à virgule flottante.

Il dispose également d'une arborescence de dépendances, ce qui vous permet de savoir où un élément est connecté à un autre.

Chaque fois qu'un élément change, ses dépendances sont marquées comme "dirty" (modifiées) pour être nettoyées et ajustées.

Lors de l'exécution, il nettoie toutes leurs dépendances et n'évalue que celles qui changent.

C'est donc très efficace. Par exemple, si la taille d'un objet change, cette dépendance change et doit refléter ce changement.

C'est une méthode de calcul très efficace, car vous allez de haut en bas, et vous le faites de manière très efficace.

Développons un peu cette horloge pour montrer que nous pouvons créer des choses réelles, ou presque.

Dans ce cas, nous allons ajouter des graduations sur les bords. Vous verrez des boucles "for", ce qui vous permettra de créer une boucle "for" locale.

Ensuite, nous ajoutons des aiguilles pour les heures et les minutes, puis nous ajoutons les secondes, et nous terminons avec quelques boutons différents pour finaliser le tout. Nous obtenons ainsi une horloge en temps réel.

Vous voyez, l'heure s'affiche.

Autre point intéressant : vous pouvez écrire la même chose en JSON. Si c'était en JSON, vous pourriez facilement interagir avec un LLM en disant "Change la couleur de l'aiguille des minutes en vert", et il comprendrait ce que vous voulez dire.

C'est donc très pratique.

OK.

C'est vrai.

J'espère que cela vous donne une idée des capacités de Remote Compose.

Laissez-moi vous présenter brièvement l'assistance aux développeurs que nous proposons.

Comme je l'ai mentionné, il s'agit principalement de bibliothèques AndroidX. Vous savez donc où trouver tout ce qui se trouve sur DAC.

Vous y trouverez les dernières versions, la documentation et bien plus encore.

Comme d'habitude, John nous a montré ce que nous pouvons faire dans Android Studio.

Pour moi, le plus intéressant est l'aperçu en direct, qui accélère vraiment le temps de développement.

Nous travaillons également sur une spécification ouverte publique pour le format.

Nous n'essayons pas de cacher complètement quelque chose, c'est là.

Vous pouvez voir comment il fonctionne, comment il est construit et encodé.

Les drawables vectoriels animés sont l'un des éléments les plus courants que vous utilisez dans vos applications, et ils sont très pratiques.

Et rappelez-vous ce que j'ai dit à propos des bitmaps.

Nous sommes très intéressés par l'envoi de vecteurs et non de bitmaps, n'est-ce pas ?

Nous développons donc des outils pour vous aider à prendre un fichier Lottie, par exemple, ou éventuellement un autre format, et à le convertir en composant RemoteCompose que vous pouvez utiliser dans votre fichier RemoteCompose.

Comme je l'ai mentionné précédemment, nous travaillons également sur d'autres outils, et plus particulièrement sur un inspecteur de documents en direct, car l'expérience de développement pour créer est une chose, mais pouvoir inspecter le résultat de cette création en est une autre.

Dans notre cas, il s'agit d'un document.

Voici un aperçu de l'outil sur lequel nous travaillons.

Il s'agit d'un inspecteur de documents RemoteCompose qui vous permet d'inspecter les documents, comme son nom l'indique, et d'y appliquer plusieurs outils et visualisations utiles.

Par exemple, vous pouvez ouvrir un document et exécuter les différentes opérations qu'il contient, étape par étape, pour mieux comprendre comment tout s'articule.

Mais nous disposons d'outils supplémentaires.

Par exemple, j'aime beaucoup celui-ci, qui permet de visualiser immédiatement votre document dans différentes densités et tailles. Vous pouvez ainsi voir très rapidement si ce que vous créez s'adaptera bien aux différents changements de taille, par exemple.

L'un des derniers projets sur lesquels nous travaillons est un outil d'inspection de la mise en page complet, qui offre le type de fonctionnalités d'inspection de la mise en page auxquelles vous êtes habitué dans Android Studio, mais appliqué ici aux opérations et aux documents.

Et nous pouvons aller encore plus loin en termes de 3D.

Comme je l'ai déjà mentionné, et j'espère vous en avoir convaincu, la petite taille est un avantage.

C'est important.

Nous voulons vraiment de petits documents.

Cela aide tout le monde.

Veuillez le faire.

Alors, que pouvons-nous faire ?

Prenons un exemple courant d'UI.

Un ensemble de données contenant un grand nombre de lignes.

Les lignes elles-mêmes contiennent un nom, un petit graphique et peut-être un bouton.

C'est assez classique.

La taille de cette UI est déjà assez petite.

Nous parlons d'environ 25 Ko, mais RemoteCompose propose différentes fonctionnalités pour vous aider à réduire encore davantage cette taille.

Passons-les en revue.

La première chose que nous faisons, et c'est sans frais, nous le ferons pour vous, si vous envoyez les mêmes chaînes, nous le remarquons.

Nous pouvons économiser quelques octets en pointant vers la même chaîne.

Mais nous fournissons d'autres éléments, comme des boucles.

Ici, j'ai utilisé cette opération de boucle pour dessiner mon petit graphique.

Cela permet d'économiser quelques octets supplémentaires.

Nous avons également des fonctions.

Vous pouvez donc créer une fonction (ici, je le fais à nouveau pour ce graphique), puis l'appeler simplement plusieurs fois.

Là encore, cela me permettra d'économiser quelques octets.

Et pour les composants, nous avons des modèles, n'est-ce pas ?

Les idées sont similaires à celles des fonctions, mais elles s'appliquent davantage aux composants, n'est-ce pas ?

Je peux donc remplacer tous ces différents composants, toutes ces différentes lignes, en appelant simplement ce modèle avec les bons paramètres, ce qui permet de réduire considérablement la taille du document.

Enfin, nous prenons également en charge la compression du document.

En général, vous pouvez vous attendre à économiser environ la moitié de la taille du document de cette manière.

L'en-tête du document est un peu particulier.

Nous ne la compressons pas.

C'est très pratique si vous souhaitez parcourir rapidement une multitude de documents sans avoir à les décompresser.

En résumé, les documents sont petits par défaut, mais vous pouvez les rendre encore plus petits.

Comme vous pouvez le voir dans ce petit exemple, il est très facile de réduire littéralement la taille d'un ordre de grandeur, car la taille est une caractéristique.

J'ai parlé des widgets, et plus particulièrement des widgets de lanceur d'applications sur la plate-forme Android.

Voyons un peu ce que nous faisons et ce qui existe déjà.

La première chose à faire est de répliquer un widget existant, comme cette horloge, uniquement dans RemoteCompose. Il se comporterait essentiellement de la même manière, mais dans RemoteCompose.

Mais on peut faire encore mieux, n'est-ce pas ?

Si vous voulez créer une UI plus adaptative, avec des widgets qui se redimensionnent et s'animent correctement, c'est désormais possible.

En effet, nous disposons des primitives appropriées pour cela, contrairement à ce que vous pourriez faire avec RemoteViews.

En gros, nous vous offrons beaucoup plus de flexibilité et de puissance.

En parlant de puissance, voici un exemple rapide de ce que vous pouvez faire.

Cela vous montre un jeu complet dans un widget.

Je pointerais vers la taille réelle de ce widget.

Nous parlons ici de 4 Ko.

J'ai mentionné que le transport n'est pas quelque chose que nous gérons directement dans Remote Compose.

Cependant, pour les widgets en particulier, nous fournissons une classe de connecteur de widget RemoteCompose qui vous permet de prendre très facilement un document et de l'envoyer au lanceur d'applications.

Cela dit, si vous avez déjà des widgets, nous vous encourageons à continuer d'utiliser Glance, car la dernière version de Glance fournit automatiquement un backend pour émettre Remote Compose sur la plate-forme.

Parlons maintenant de Wear OS.

Merci, Nico.

Salut tout le monde !

Je m'appelle John Zoeller.

Je suis ici pour vous parler de Wear OS.

J'ai écrit une trentaine de blagues pour cette présentation, mais je les ai toutes racontées à ma mère, et elle m'a dit que je serais licencié si j'en racontais une seule.

Je vais donc passer cette étape et me contenter de la présentation.

Parlons maintenant de Remote Compose et de ses avantages sur Wear OS.

Tout d'abord, nous allons parler du nouveau suivi des entraînements Wear OS.

Nous avons utilisé Remote Compose pour créer cette application, et nous savons qu'il est très difficile de créer un outil de suivi d'entraînement complet et de haute qualité pour Wear.

Cela prend un certain temps.

Nous l'avons donc fait pour vous, et nous avons inclus de nouvelles fonctionnalités d'entraînement modernes, comme les statistiques en direct et la possibilité de contrôler les contenus multimédias.

Grâce à Remote Compose, nous avons pu dissocier l'UI de l'exécution. Elle peut donc s'exécuter de manière très efficace et ne décharge pas la batterie des utilisateurs.

Sans Remote Compose, si nous utilisions simplement Compose, nous ne pourrions pas actualiser les statistiques en direct sur l'écran toutes les secondes.

En réalité, cela prendrait une minute, car vous devriez réactiver la montre en mode ambiant juste pour afficher une métrique.

C'est donc un avantage considérable.

Et, croyez-le ou non, il s'agit en fait d'un GIF.

Ceci n'est pas une image.

Je sais qu'il n'a pas encore bougé, et qu'il bougera dans environ 45 secondes, lorsque nous passerons à la prochaine mise à jour des métriques.

Mais c'est l'avantage de Remote Compose.

Et devinez quoi ?

Wear Workout Tracker est déjà disponible.

L'application ASICS Runkeeper a été créée avec cette nouvelle API. Vous pouvez l'essayer dès aujourd'hui en suivant ce lien et en rejoignant le test bêta ouvert.

Passons maintenant aux widgets Wear OS.

Voici un autre exemple de Remote Compose en action.

Elles remplacent l'ancienne bibliothèque ProtoLayout Tiles. Vous n'avez donc plus besoin de prendre en charge deux types de frameworks d'UI différents pour différents appareils.

Vous pouvez tout faire avec Remote Compose.

Et comme ils font partie de Jetpack Glance, les widgets sur Wear OS font partie de l'écosystème Android unifié de widgets.

Dans cet écosystème, l'UI des widgets RemoteCompose est complètement dissociée de tout processus d'application spécifique. Ils peuvent donc être sérialisés et affichés en toute sécurité sur les appareils Wear OS à l'aide de la même technologie que le reste de la pile Android.

Remote Compose apporte également des graphismes modernes et des mises en page responsives aux widgets, tout en étant très efficace et en préservant votre batterie.

Avec Wear OS 7, les fabricants de matériel adoptent déjà les tiroirs à défilement vertical.

Voici la Samsung Galaxy Watch. Vous pouvez voir comment les widgets défilent verticalement dans les panneaux.

Pour en savoir plus sur la migration de votre carte vers un widget, consultez ce lien.

Sur les appareils plus anciens qui utilisent des carrousels horizontaux pour les tuiles, les widgets s'afficheront automatiquement sous forme de tuile plein écran.

De plus, ils sont entièrement rétrocompatibles avec Wear OS 4.

Ce lien vous permettra également d'en savoir plus sur la rétrocompatibilité.

D'autres partenaires ont également déjà adopté les widgets.

Vous pouvez y jeter un coup d'œil.

C'est tout pour moi.

Oui, à toi Nico.

Merci.

Très bien.

Voilà qui conclut notre présentation.

Nous avons examiné certaines des fonctionnalités de Remote Compose.

Il y en a d'autres dont nous n'avons pas parlé.

C'est un framework très riche.

Je vous encourage à consulter la documentation disponible et celle à venir.

Notre objectif est de créer un avenir où vous pourrez utiliser Remote Compose pour gérer toutes ces différentes surfaces distantes.

Vous en avez vu quelques-unes, comme les widgets Wear.

Mais il y a encore beaucoup de choses à venir.

Je dirais également qu'il s'agit d'un projet en cours.

Il est en cours de développement.

Nous développons tout cela de manière ouverte.

Vous pouvez voir ce que nous faisons.

Mais je dirais que nous voulons vraiment entendre l'avis des développeurs, n'est-ce pas ?

Nous sommes en train de créer cela pour vous.

Si vous avez d'autres idées ou si vous pensez qu'il manque des éléments, n'hésitez pas à nous en faire part.

Nous sommes ravis de l'apprendre.

Pour finir, sachez que l'intégralité de la présentation que vous venez de voir a été réalisée dans Remote Compose, animations comprises.