Cómo potenciar las plataformas interactivas con Remote Compose

Hola a todos.

Me llamo Nicolas Roard y soy el líder técnico del proyecto Remote Compose.

Soy John Hoford.

Soy desarrollador de Remote Compose.

Y yo soy John Zoeller, y me encargo de las relaciones con desarrolladores en Wear OS.

Comencemos.

Primero, les daré una descripción general rápida de qué tipo de problema intentamos resolver con Remote Compose.

Por lo general, cuando se habla o se piensa en la IU en Android, se piensa en ella como parte de la aplicación y del proceso de la aplicación, ¿verdad?

Hay muchos lugares diferentes donde, a veces, quieres tomar tu IU, empaquetarla y enviarla a otro lugar, como a una superficie remota.

Entonces, cuando hablamos de superficie remota, nos referimos a esos ejemplos, como estilos de reloj, widgets, incluso podría ser tu propia app o una diferente, ¿de acuerdo?

Por lo tanto, todos esos son, en esencia, ejemplos de plataformas remotas.

Por lo tanto, en algún lugar, en otro lugar, podría ser tu app, podría ser un servidor, en otro lugar sabe qué enviar a esa superficie remota.

Y…

¿Qué pasa con mi bocina?

Entre esos dos, hay esencialmente una distancia.

Y esa distancia puede ser literalmente una distancia real, podría ser una conexión de red, ¿verdad?

También podría ser solo un límite de proceso.

Podrías estar en el mismo dispositivo.

Pero sea lo que sea, tiene un costo.

Y lo más sencillo que se te podría ocurrir para tomar esa IU y enviarla es simplemente tomar una copia de la pantalla, ¿verdad?, y enviarla.

El problema con eso es que no es muy rápido, ¿verdad?

En cambio, lo que hacemos con Remote Compose es enviar un documento que represente esa IU.

Y ten en cuenta que ser pequeño tiene muchas ventajas.

Es importante.

Lo vimos en el primer píxel que enviaste, pero, en realidad, esto se aplica a cualquier tipo de actualización que quieras hacer en esa superficie, ¿verdad?

Tienes el viaje de ida y vuelta.

Por lo tanto, obtienes algo en esa superficie remota, como un evento, un clic o un toque.

Debes volver a la persona que lo creó para obtener una versión nueva.

Y eso no es bueno.

En muchos sentidos, eso es lo que intentamos resolver con Remote Compose.

Vimos que se envió el documento.

Además del documento, hay un par de áreas que son muy importantes.

Una es cómo creas ese documento.

Y la segunda es cómo lo juegas.

Mencioné que estamos creando un documento.

No enviamos una copia de la pantalla ni una aplicación.

Por lo tanto, tenemos tres formas diferentes de ayudarte a crear ese documento.

Uno es una API de Compose, dos es una API de Kotlin de procedimiento, KMP, y tres es un formato JSON.

Todos emiten los mismos bytes.

Por lo tanto, proporcionamos un conjunto de herramientas para crear esos documentos y, con la API de Compose, podemos aprovechar las herramientas existentes en Android Studio.

Por ejemplo, puedes usar la vista previa para ver en vivo lo que estás desarrollando, directamente en el IDE.

Pero también estamos trabajando en algunas herramientas nuevas y potentes, como un inspector de documentos.

Veamos rápidamente de qué se trata el documento.

Básicamente, es una lista de operaciones codificadas en una representación binaria compacta, y esas operaciones describen una interfaz de usuario independiente que se puede enviar a esa superficie remota.

Por lo tanto, una característica muy importante de esos documentos es que son pequeños.

Y, como vimos, lo pequeño es bueno.

Por lo general, hablamos de unos pocos kilobytes, ¿verdad?

Pero incluso una IU más compleja con un diseño muy adaptable, todavía estamos hablando de unos pocos tal vez decenas de kilobytes, ¿verdad?

Y empaquetamos todos los recursos en ese documento.

Si lo piensas, lo único que puede ocupar espacio en el documento es si comienzas a empaquetar mapas de bits.

Tenlo en cuenta.

Después de todo, este es el motivo por el que enviamos un documento y no una copia de pantalla.

Cuando hablamos de ser pequeños y de que eso es importante, no se trata solo de la comunicación.

Es un caso límite central de la filosofía detrás de Remote Compose.

Como vimos, obviamente tiene un impacto en el tiempo que tarda en aparecer el primer píxel en la pantalla, pero, uy, lo siento.

También significa que podemos usar, en capacidades iguales de la superficie, más documentos que de otra manera, ¿verdad?, sin dejar de ser eficientes.

Y eso es algo que veremos que aprovechamos cuando admitimos widgets.

Los reproductores en sí también suelen ser bastante pequeños y tienen muy pocas dependencias.

Y el hecho de que sean pequeños y tengan pocas dependencias significa que podemos extender el alcance hasta donde podemos reproducir documentos de Remote Compose.

Y eso es especialmente importante para las plataformas restringidas, como verás.

Hablé mucho sobre el transporte y la distancia, pero Remote Compose por sí solo no se ocupa del transporte.

Eso depende de ti.

Lo que hacemos es empaquetar todo eso en, ya sabes, un búfer de bytes que luego puedes enviar con el método adecuado a la superficie remota.

En el caso de los widgets, te ayudamos y te proporcionamos un conector.

Pero, en general, es útil tener en cuenta que tú estás a cargo del transporte.

Y una vez que un reproductor recibe ese documento, sin importar cómo lo hayas enviado, puede extraer la lista de operaciones y convertirlas en comandos de dibujo, en árboles de diseño, expresiones, y todo eso junto puede crear una experiencia del usuario realmente enriquecida.

Por lo tanto, una cosa que debes tener en cuenta es que, al darte el poder de decidir cómo quieres transferir el documento, puedes reutilizar Remote Compose como una herramienta en muchas situaciones, algunas que tal vez ni siquiera se nos ocurran, ¿verdad?

Una vez que un reproductor carga el documento, este se ejecuta por sí solo.

Y esa es la idea general.

Queremos que el documento cree una IU que sea un poco autónoma, que no tenga que volver a quien la creó, ¿verdad?

Y todo eso junto, podemos admitir, ya sabes, cambiar el tamaño, desplazarse, eventos táctiles, ya sabes, decidir mostrar u ocultar componentes, animación, algún evento táctil y algún manejo táctil, todo se puede hacer en el documento sin tener que volver al reproductor.

Y, a veces, si necesitas volver, perdón, a la creación, puedes solicitar una acción para decir: "Por favor, dame un documento nuevo".

Proporcionamos tres reproductores oficiales, principalmente a través de las bibliotecas de AndroidX en Remote Compose.

Uno es un reproductor de Compose, por lo que puedes usarlo en tu aplicación de Compose.

También tenemos un reproductor de View si aún usas View.

También tenemos una implementación de RemoteViews que se incluye en la plataforma de Android desde la API 36 y que te permite crear widgets de Android que se ejecutan en el selector con Remote Compose.

También tenemos algunos reproductores experimentales si te interesa, algunos de C++ que se ejecutan en Skia, TypeScript y hasta Compose Multiplatform.

Por lo tanto, la idea es que la misma tecnología que usas se pueda utilizar, básicamente, para renderizar en muchas plataformas y superficies diferentes.

En resumen, la distancia de la que hablé sigue existiendo, pero intentamos que solo importe cuando realmente sea necesario.

Sí.

Hablemos un poco sobre las funciones que obtendrás en un documento de Remote Compose.

En su base, hay un Canvas, y tiene todas las funciones de un Canvas de Android.

Pero con algunas APIs adicionales.

Pero una de las cosas especiales es que todos los valores de punto flotante que tienes en ese lienzo de Android se pueden reemplazar por expresiones.

Esto te permite realizar animaciones, como ves aquí, escalamiento dinámico y diseños flexibles.

Se pueden hacer muchas cosas diferentes con él.

Un poco más sobre las expresiones.

Tienes un amplio conjunto de operadores de matemáticas normales, trigonometría, acceso a arrays e interpolación de splines.

Y uno de los aspectos más interesantes es que cualquier valor que cambie se puede animar, por lo que puedes animar el cambio en el estado de cualquier valor.

En este dibujo en particular que ves aquí, cada péndulo elige un tipo diferente de animación, y todas están disponibles en Remote Compose.

Además, tenemos los componentes básicos, elementos de Compose, cosas que ya conoces.

Produce una API muy familiar, Box, Row, Column, ese tipo de cosas.

Pero, además, tenemos componentes adaptables.

Una de las ventajas de esto es que, como no tienes el control de tu documento en ese momento, estos pueden controlar los objetos que desaparecen, aparecen, se van y vuelven debido al cambio de tamaño, etc., todo sin volver a la fuente del documento.

Además, tenemos la animación de componentes.

Todos los cambios se pueden animar, por lo que, si algo desaparece, puedes animarlo.

Y puedes escribir tus propias animaciones personalizadas.

En este caso, puedes ver que algunos usan sombreadores y todo tipo de cosas.

Otra de las cosas que podemos hacer es interactuar mientras estamos allí, por lo que no se trata solo de imágenes bonitas.

Puedes hacer clic en elementos, tener eventos táctiles, desplazarte, etcétera.

También es importante la accesibilidad, por lo que todas tus APIs de accesibilidad están allí.

Una de las cosas que ves aquí es que estoy creando un cronómetro completo con IU interesantes, y todo esto sucede en el lado del reproductor.

Todo está en el documento.

Todo lo que ves, no hay que volver al servidor para esto.

Ahora, si lo creaste dentro de una aplicación, en este caso, las partes azules son una aplicación y las partes negras son un documento de Remote Compose.

De hecho, puedes interactuar entre ambos.

Aquí, estoy incrementando los valores y puedes ver que la aplicación, lo que llamamos el host, los recibe. También puedo mover un control deslizante y cambiará los valores dentro del documento.

Por lo tanto, puedo ir en ambas direcciones para eso.

Así que veamos cómo crear uno de estos documentos.

En realidad, hay tres APIs: Compose, Kotlin y JSON.

La API de Compose, ya sabes cómo es.

Tiene algunos giros y los analizaremos en detalle.

La API de Kotlin es muy procedimental.

En el documento, hay un comando, por lo que es una relación uno a uno.

El JSON es una sintaxis de JSON que puedes usar. Tenemos convertidores que lo transformarán en Remote Compose.

También es útil si trabajas con un LLM, ya que puede leer y escribir los documentos.

Así que, de hecho, vayamos a Compose y compilemos algo.

En este caso, verás que es un elemento componible y un elemento componible remoto.

Tenemos un lienzo, no un lienzo, sino un lienzo remoto y modificadores remotos, pero los modificadores en sí son los mismos, los que conoces y te encantan.

Ahora, todos los comandos que contiene generan comandos de Remote Compose a medida que se ejecutan.

En este caso, dibujando un círculo y, luego, agregando algunos números de punto flotante y expresiones que usen el tiempo.

Y cuando la activo en la animación, fíjate que esta es una vista previa en vivo de Android Studio y, de hecho, se ejecutará en vivo para ti.

Puedes ver esas expresiones allí.

Veamos un poco de qué se trata y cómo funciona.

A la izquierda, verás que hay una especie de hoja de cálculo.

Es una tabla de los valores en números de punto flotante.

También tiene un árbol de dependencias, por lo que sabes dónde se conecta una cosa con otra.

Cada vez que algo cambia, sus dependientes se marcan como sucios para limpiarse y ajustarse.

Y, a medida que se ejecuta, limpiará todas sus dependencias y solo evaluará las que cambien.

Por lo tanto, es muy eficiente y, en un caso en el que, por ejemplo, cambia el tamaño de un objeto, esa dependencia cambia y debe reflejarlo.

Esto hace que sea una forma de procesamiento muy, muy eficiente, porque no vas de arriba abajo, sino que vas de forma muy eficiente.

Así que, expandamos un poco ese reloj para mostrar que podemos construir cosas reales, cosas un poco reales.

En este caso, lo que haremos es agregar algunas marcas de graduación en los bordes, y verás algunos bucles for, de modo que puedas, de alguna manera, realizar un bucle for en él de forma local y correcta.

Luego, agregamos algunas manecillas de horas y minutos, y, luego, pasamos a los seg-- agregamos segundos, luego lo completamos con un par de botones diferentes solo para terminarlo, y tenemos un reloj en vivo.

De hecho, muestra la hora.

Lo otro interesante es que puedes escribir lo mismo en JSON y, si estuviera en JSON, podrías interactuar fácilmente con un LLM diciendo: "Cambia la manecilla de los minutos a verde", y entendería lo que quieres decir.

Así que es muy agradable de esa manera.

Bien.

Así es.

Esperamos que esto te dé una idea de las capacidades de Remote Compose.

Permíteme hablar un poco sobre la asistencia para desarrolladores que tenemos para ti.

Como mencioné, se trata principalmente de bibliotecas de AndroidX, por lo que todo lo que está en DAC, ya sabes dónde encontrarlo.

Obtendrás las versiones más recientes, la documentación y todo eso.

Como de costumbre, vimos a John demostrar lo que podemos hacer en Android Studio.

Creo que lo más genial para mí es la vista previa en vivo, que realmente acelera el tiempo de desarrollo.

También estamos trabajando en una especie de especificación abierta pública real para el formato, ¿verdad?

No intentamos ocultar nada, está ahí afuera.

Puedes ver cómo funciona, cómo se compila y cómo se codifica.

Uno de los elementos comunes que usas en tus aplicaciones son los elementos de diseño vectoriales animados y, como sabes, son muy convenientes.

Y recuerda lo que mencioné sobre los mapas de bits.

Nos interesa mucho que envíes vectores y no mapas de bits, ¿verdad?

Por lo tanto, estamos creando un par de herramientas para ayudarte a tomar un Lottie, por ejemplo, posiblemente otro formato, y convertirlo en un componente de RemoteCompose que puedas usar en tu archivo de RemoteCompose.

Mencioné antes que también estamos trabajando en herramientas adicionales y, específicamente, en un inspector en vivo para los documentos, porque una cosa es tener la experiencia de desarrollador para crear, pero otra es poder inspeccionar el resultado de esa creación.

En nuestro caso, es un documento.

Aquí tienes un adelanto de la herramienta en la que estamos trabajando.

Es un inspector de documentos de RemoteCompose que te permite inspeccionar los documentos, como su nombre lo indica, y aplicar varias herramientas y visualizaciones útiles.

Un buen ejemplo es que puedes abrir un documento y ejecutar las diferentes operaciones que se encuentran en él paso a paso para intentar comprender mejor cómo se relaciona todo.

Pero tenemos herramientas adicionales.

Por ejemplo, me gusta mucho esta, que visualiza de inmediato tu documento en diferentes densidades y tamaños, para que puedas ver muy rápido si lo que estás creando se adaptará bien a los diferentes cambios de tamaño, por ejemplo.

Uno de los últimos aspectos en los que también estamos trabajando es un inspector de diseño muy completo, es decir, el tipo de funciones de inspección de diseño a las que estás acostumbrado en Android Studio, pero, en este caso, aplicadas a las operaciones y a los documentos, ¿verdad?

Y podemos ir aún más lejos en términos de 3D.

Como mencioné antes, y espero que ya te haya convencido, el tamaño pequeño es una característica.

Es importante.

Realmente queremos documentos pequeños.

Esto ayuda a todos.

Hazlo.

¿Qué podemos hacer para solucionarlo?

Veamos un ejemplo común de IU.

Algo en lo que tengas un montón de filas.

Las filas en sí, ya sabes, tienen un nombre, un pequeño gráfico y, tal vez, un botón.

Bastante típico.

El tamaño de esa IU ya es bastante pequeño.

Estamos hablando de alrededor de 25 kB, pero tenemos varias funciones en RemoteCompose para ayudarte a reducirlo aún más.

Veámoslas.

Lo primero que hacemos, y esto es gratis, lo haremos por ti, si envías las mismas cadenas, lo notamos.

Podemos ahorrar algunos bytes si apuntamos a la misma cadena.

Pero proporcionamos más elementos, como bucles.

Aquí, usé esta operación de bucle para dibujar mi pequeño gráfico, ¿verdad?

Esto ahorra algunos bytes más.

También tenemos funciones.

Por lo tanto, podrías crear una función, y aquí, lo haré para ese gráfico de nuevo, y luego puedo simplemente llamar a ese gráfico varias veces.

Y, de nuevo, eso me ahorrará algunos bytes.

Y para el componente, tenemos plantillas, ¿verdad?

Son ideas similares a las de las funciones, pero más para los componentes, ¿verdad?

Por lo tanto, puedo reemplazar todos esos componentes y filas diferentes simplemente invocando esa plantilla con los parámetros correctos, lo que ahorra mucho espacio en el documento.

Por último, también admitimos la compresión del documento de forma predeterminada.

En general, puedes esperar ahorrar aproximadamente la mitad del tamaño del documento de esta manera.

Un aspecto interesante es que el encabezado del documento es un poco especial.

No lo comprimimos.

Esto es muy útil si quieres revisar rápidamente una gran cantidad de documentos sin tener que descomprimirlos.

En resumen, los documentos son pequeños, ya sabes, listos para usar, pero también puedes hacerlos mucho más pequeños.

Y puedes ver, con este pequeño ejemplo, lo fácil que es reducirlo literalmente en un orden de magnitud, ya que pequeño es un atributo.

Hablé sobre los widgets y, específicamente, sobre los widgets de selector en la plataforma de Android.

Así que hablemos un poco sobre lo que estamos haciendo y lo que ya existe.

Lo primero que podemos hacer es replicar un widget existente, como ese reloj, solo en RemoteCompose, y se comportaría de la misma manera, solo que en RemoteCompose.

Pero podemos hacer más, ¿verdad?

Por lo tanto, si quieres crear una IU más adaptable, con widgets que cambien de tamaño y se animen correctamente, ahora puedes hacerlo, ¿verdad?

Porque tenemos las primitivas adecuadas para hacerlo, a diferencia de lo que podrías hacer con las vistas remotas.

En esencia, te brindamos mucha más flexibilidad y poder.

Y hablando de poder, aquí hay un ejemplo rápido de cosas locas que podrías hacer, ¿verdad?

Esto te muestra un juego completo en un widget.

Y señalaría el tamaño real de ese widget.

Estamos hablando de 4 KB.

Mencioné que el transporte no es algo que manejemos directamente en Remote Compose.

Sin embargo, para los widgets específicamente, proporcionamos una clase de conector RemoteCompose Widget que te permite tomar un documento y enviarlo al selector con mucha facilidad.

Dicho esto, si ya tienes widgets, te recomendamos que sigas usando Glance, ya que la versión más reciente de Glance proporciona automáticamente un backend para emitir Remote Compose en la plataforma.

Ahora, hablemos de Wear OS.

Gracias, Nico.

¿Cómo están?

Soy John Zoeller.

Estoy aquí para hablarles sobre Wear OS.

Escribí como 30 chistes para esta presentación, pero se los conté todos a mi mamá y me dijo que me despedirían si decía alguno de ellos.

Así que omitiré eso y, en su lugar, solo haré la presentación.

Hablemos de Remote Compose y de algunas de sus grandes ventajas en Wear OS.

Primero, hablaremos sobre el nuevo monitor de actividad física de Wear OS.

Usamos Remote Compose para compilar esto y sabemos que compilar un monitor de actividad física completo y de alta calidad es muy difícil para Wear.

Esto lleva un tiempo.

Por lo tanto, lo hicimos por ti y, además, incluimos algunas funciones de entrenamiento modernas y muy útiles, como las métricas en tiempo real y la capacidad de controlar el contenido multimedia.

Y gracias a Remote Compose, pudimos desacoplar la IU de toda la ejecución, por lo que puede ejecutarse de manera muy eficiente y ayuda a no agotar las baterías de los usuarios.

Sin Remote Compose, si hiciéramos esto solo con Compose normal, no podríamos tener métricas en tiempo real que se actualicen en la pantalla segundo a segundo.

En realidad, tardaría un minuto, ya que tendrías que activar el reloj en modo ambiente solo para mostrar una métrica.

Por lo tanto, esta es una gran ventaja.

Y, de hecho, lo creas o no, esto es un GIF.

No es una foto.

Sé que aún no se movió, pero lo hará en unos 45 segundos, cuando lleguemos a la próxima actualización de métricas.

Pero esa es la ventaja de Remote Compose.

Y adivina qué…

En realidad, Wear Workout Tracker está disponible.

La app de ASICS Runkeeper creó su nueva aplicación con ella, y puedes probarla hoy mismo siguiendo este vínculo y uniéndote a su prueba beta abierta.

A continuación, tenemos los widgets de Wear OS.

Este es otro gran ejemplo de Remote Compose en acción.

Estas reemplazan la antigua biblioteca de tarjetas de ProtoLayout, por lo que ya no necesitas admitir dos tipos diferentes de frameworks de IU para diferentes dispositivos.

Puedes hacerlo todo con Remote Compose.

Y, como forman parte de Jetpack Glance, los widgets de Wear OS forman parte del ecosistema unificado de widgets de Android.

Muy bien, y como parte de este ecosistema, la IU de los widgets de RemoteCompose está completamente desacoplada de cualquier proceso específico de la app, por lo que se pueden serializar y renderizar de forma segura en dispositivos Wear OS con la misma tecnología que el resto de la pila de Android.

Remote Compose también ofrece gráficos modernos y diseños responsivos para los widgets, y todo esto con un gran rendimiento y un bajo consumo de batería.

Y con Wear OS 7, los fabricantes de hardware ya están adoptando bandejas de desplazamiento vertical.

Este es el Samsung Galaxy Watch, y puedes ver cómo los widgets se desplazan verticalmente por las bandejas.

Si quieres obtener más información para migrar tu tarjeta a un widget, consulta este vínculo.

En los dispositivos más antiguos que dependen de los carruseles horizontales para las tarjetas, los widgets se mostrarán automáticamente como una tarjeta de pantalla completa.

Además, son totalmente retrocompatibles con Wear OS 4.

Además, este vínculo te enseñará más sobre esa retrocompatibilidad.

También tenemos otros socios que ya adoptaron los widgets.

Puedes echar un vistazo.

Eso es todo por mi parte.

Sí, volvemos contigo, Nico.

Gracias.

Bien.

Con esto, concluimos nuestra charla.

Revisamos algunas de las funciones de Remote Compose.

Hay algunas más de las que no hablamos.

Es un marco de trabajo muy completo.

Te recomiendo que consultes la documentación disponible y la que se publicará próximamente.

Diría que nuestro objetivo es crear un futuro en el que realmente se pueda usar Remote Compose para abordar todas esas diferentes plataformas remotas.

Y viste algunos de ellos, ¿verdad?, como Wear, widgets.

Pero hay mucho más por venir.

También diría que este es un proyecto en curso.

Está en desarrollo activo.

Como saben, desarrollamos todo eso de forma abierta.

Puedes ver lo que estamos haciendo.

Pero, diría que, realmente queremos escuchar a los desarrolladores, ¿verdad?

Estamos creando eso para ti.

Por lo tanto, si tienes ideas adicionales o cosas que te faltan, comunícate con nosotros.

Nos complace recibir tus comentarios.

Terminaré con esto: toda la presentación que acaban de ver, obviamente, se hizo en Remote Compose, incluidas las animaciones.