Como usar o Remote Compose para criar plataformas interativas

Olá, pessoal.

Meu nome é Nicolas Roard, sou o líder técnico do projeto Remote Compose.

Sou John Hoford.

Sou desenvolvedor do Remote Compose.

E eu sou John Zoeller, e trabalho com relações com desenvolvedores no Wear OS.

Então, vamos começar.

Então, primeiro vou dar uma visão geral rápida de qual é exatamente o tipo de problema que estamos tentando resolver com o Remote Compose, certo?

Normalmente, quando você fala ou pensa sobre a interface no Android, você pensa nela como parte do seu aplicativo e do processo do aplicativo, certo?

Há muitos lugares em que você pode querer pegar sua interface, empacotá-la e enviá-la para outro lugar, como uma superfície remota.

Então, o que queremos dizer com superfície remota é algo parecido com esses exemplos, como estilos de relógio, widgets, até mesmo seu próprio app ou um app diferente, certo?

Todos esses são exemplos de superfícies remotas.

Então, em algum lugar, que pode ser seu app ou um servidor, alguém sabe o que enviar para essa superfície remota.

E…

E o alto-falante?

Entre os dois, há essencialmente uma distância.

E essa distância pode ser literalmente uma distância real, pode ser uma conexão de rede, certo?

Também pode ser apenas um limite de processo.

Você pode estar no mesmo dispositivo.

Mas, seja o que for, tem um custo.

A maneira mais simples de enviar essa interface é fazer uma captura de tela e enviá-la.

O problema é que não é muito rápido, certo?

Em vez disso, com o Remote Compose, enviamos um documento que representa essa interface.

E lembre-se: ser pequeno tem muitas vantagens.

É importante.

Vimos isso no primeiro pixel que você enviou, mas isso é verdade para qualquer tipo de atualização que você queira fazer nessa superfície, certo?

Você conseguiu a ida e volta.

Assim, você recebe algo nessa superfície remota, como um evento, um clique ou um toque.

Você precisa voltar para quem o criou para receber uma nova versão.

E isso não é bom.

Então, de várias maneiras, é isso que estamos tentando resolver com o Remote Compose.

Vimos que o documento foi enviado.

Além do documento, há algumas áreas que são muito importantes.

Uma é como você cria esse documento.

A segunda é como você joga.

Mencionei que estamos criando um documento.

Não estamos enviando uma cópia da tela nem um aplicativo.

Por isso, temos três maneiras diferentes de ajudar você a criar esse documento.

Uma é uma API Compose, a segunda é uma API Kotlin procedural, KMP, e a terceira é um formato JSON.

Todos eles emitem os mesmos bytes.

Por isso, oferecemos um conjunto de ferramentas para criar esses documentos e, com a API Compose, podemos aproveitar as ferramentas que já existem no Android Studio.

Por exemplo, é possível usar a visualização para ver em tempo real o que você está desenvolvendo, diretamente no ambiente de desenvolvimento integrado.

Mas também estamos trabalhando em novas ferramentas poderosas, como um inspetor de documentos.

Vamos dar uma olhada rápida no que é o documento.

É basicamente uma lista de operações codificadas em uma representação binária compacta, e essas operações descrevem uma interface do usuário independente que pode ser enviada para essa superfície remota.

Uma característica muito importante desses documentos é que eles são pequenos.

E, como vimos, o pequeno é bom.

Então, normalmente estamos falando de alguns kilobytes, certo?

Mas mesmo uma interface mais complexa com um layout muito adaptável, ainda estamos falando de alguns kilobytes, talvez dezenas, certo?

E empacotamos todos os recursos nesse documento.

Se você pensar bem, a única coisa que pode ocupar espaço no documento é o empacotamento de bitmaps.

Não se esqueça disso.

Afinal, é por isso que estamos enviando um documento, e não uma cópia da tela.

Quando falamos sobre ser pequeno e importante, não estamos falando apenas de comunicação.

É um caso extremo central da filosofia por trás do Compose Remoto.

Como vimos, isso obviamente afeta o tempo que leva para o primeiro pixel aparecer na tela, mas, ops, desculpe.

Isso também significa que podemos usar, com as mesmas capacidades da superfície, mais documentos do que o normal, certo, sem perder a eficiência.

E vamos aproveitar isso quando oferecermos suporte a widgets.

Os players em si também tendem a ser bem pequenos e têm poucas dependências.

E o fato de serem pequenos e terem poucas dependências significa que podemos ampliar o alcance para onde podemos reproduzir documentos do Remote Compose.

Isso é especialmente importante para plataformas restritas, como você vai ver.

Falei muito sobre o transporte e a distância, mas o Remote Compose não lida com o transporte em si.

Isso é com você.

O que fazemos é empacotar tudo isso em um buffer de bytes que você pode enviar com o método apropriado para a superfície remota.

Para widgets, nós ajudamos você, fornecemos um conector para você.

Mas, em geral, é útil lembrar que você é responsável pelo transporte.

E quando um player recebe esse documento, seja como for que você o enviou, ele pode extrair a lista de operações e convertê-las em comandos de desenho, em árvores de layout, expressões, e tudo isso junto pode criar uma experiência de usuário realmente rica.

Então, uma coisa que você precisa lembrar é que, ao dar a você o poder de decidir como quer transferir o documento, você pode reutilizar o Remote Compose como uma ferramenta em muitos cenários, alguns que talvez nem imaginemos, certo?

Depois que o documento é carregado por um player, ele é executado sozinho.

Essa é a ideia principal.

Queremos que o documento crie uma interface um tanto autônoma, que não precise voltar para quem a criou, certo?

E tudo isso junto, podemos oferecer suporte, você sabe, redimensionamento, rolagem, eventos de toque, você sabe, decidir mostrar ou ocultar componentes, animação, algum evento de toque e algum tratamento de toque, tudo pode ser feito no documento sem ter que voltar para o player.

E, às vezes, se você precisar voltar, desculpe, para a criação, é possível solicitar uma ação para dizer: "Por favor, me dê um novo documento".

Oferecemos três players oficiais, principalmente pelas bibliotecas do AndroidX no Remote Compose.

Um é um player do Compose, que pode ser usado no seu aplicativo do Compose.

Também temos um player de visualização, caso você ainda use o View.

Também temos uma implementação de RemoteViews que está sendo enviada na plataforma Android desde a API 36 e que permite criar widgets do Android em execução no acesso rápido usando o Remote Compose.

Também temos alguns players experimentais, se você tiver interesse, alguns em C++ executados no Skia, TypeScript e até mesmo no Compose Multiplatform.

A ideia é que a mesma tecnologia que você está usando pode ser usada para renderizar em várias plataformas e superfícies diferentes.

Em resumo, a distância que mencionei ainda existe, mas estamos tentando fazer com que ela só importe quando realmente for relevante.

Sim.

Vamos falar um pouco sobre os recursos que você terá em um documento do Remote Compose.

Na base, há um Canvas, que tem todos os recursos de um Canvas do Android.

Mas com algumas APIs adicionais.

Mas uma das coisas especiais é que todos os números de ponto flutuante que você tem nessa tela do Android podem ser substituídos por expressões.

Isso permite que você faça animações, como as que estão aqui, dimensionamento dinâmico e layouts flexíveis.

É possível fazer muitas coisas diferentes com ele.

Um pouco mais sobre expressões.

Você tem um conjunto avançado de operadores de matemática normal, trigonometria, acesso a matrizes e interpolação de spline.

E uma das coisas legais é que qualquer valor que mude pode ser animado, então você pode animar a mudança no estado de qualquer valor.

Neste desenho específico, cada pêndulo escolhe um tipo diferente de animação, e todas elas estão disponíveis no Remote Compose.

Além disso, temos os componentes básicos, o Compose e outras coisas que você já conhece.

Ele produz uma API muito familiar, com box, row, column e esse tipo de coisa.

Além disso, temos componentes adaptáveis.

Uma das vantagens disso é que, como você não está no controle do documento nesse momento, eles podem lidar com objetos que desaparecem, aparecem, vão embora e voltam devido ao redimensionamento etc., tudo sem voltar à origem do documento.

Além disso, temos a animação de componentes.

Todas as mudanças podem ser animadas. Se algo desaparecer, você pode animar isso.

E você pode criar suas próprias animações personalizadas.

Neste caso, você vê que alguns deles estão usando sombreadores, todo tipo de coisa.

Outra coisa que podemos fazer é interagir com o conteúdo, então não são apenas imagens bonitas.

Você pode clicar em itens, ter eventos de toque, rolagem e esse tipo de coisa.

A acessibilidade também é importante, então todas as APIs de acessibilidade estão lá.

Uma das coisas que você está vendo aqui é que estou criando um cronômetro completo com interfaces interessantes, e tudo isso está acontecendo no lado do player.

Está tudo no documento.

Tudo o que você vê, sem voltar ao servidor para isso.

Agora, se você o criou em um aplicativo, neste caso, as partes azuis são um aplicativo e as partes pretas são um documento do Remote Compose.

É possível interagir entre os dois.

Aqui, estou incrementando valores, e você pode ver que eles estão sendo recebidos pelo aplicativo, que chamamos de host. Também posso mover um controle deslizante, e isso vai mudar os valores dentro do documento.

Então, posso seguir as duas direções.

Vamos aprender a criar um desses documentos.

Existem três APIs: Compose, Kotlin e JSON.

A API Compose, você já sabe como é.

Ele tem algumas reviravoltas, e vamos falar sobre isso em detalhes.

A API Kotlin é muito procedural.

Você tem um comando no documento, então é uma relação de um para um.

O JSON é uma sintaxe JSON que pode ser convertida em Remote Compose.

Também é útil se você estiver trabalhando com um LLM, porque ele pode ler e gravar os documentos.

Então, vamos acessar o Compose e criar algo.

Nesse caso, você vai ver que é um elemento combinável e um elemento combinável remoto.

Temos uma tela, não uma tela, mas uma tela remota e modificadores remotos, mas os modificadores em si são os mesmos, as coisas que você conhece e adora.

Agora, todos os comandos dentro dele estão gerando comandos de documento do Remote Compose à medida que são executados.

Nesse caso, desenhando um círculo e adicionando alguns números de ponto flutuante e expressões que usam o tempo.

E quando eu ativo a animação, observe que essa é uma prévia em tempo real do Android Studio e que ela vai ser executada ao vivo para você.

Você vê essas expressões ali.

Vamos entender um pouco sobre o que é isso e como funciona.

À esquerda, você verá algo que se parece com uma planilha.

É uma tabela dos valores em números de ponto flutuante.

Ele também tem uma árvore de dependências, para que você saiba onde uma coisa se conecta à outra.

Sempre que algo muda, os dependentes são marcados como "sujos" para serem limpos e ajustados.

Durante a execução, ele limpa todas as dependências e avalia apenas as que mudam.

Portanto, é muito eficiente. Se um objeto, como o tamanho, mudar, essa dependência vai mudar e vai precisar refletir isso.

Isso torna a computação muito, muito eficiente, porque você não está indo de cima para baixo, e sim de forma muito eficiente.

Vamos expandir um pouco esse relógio para mostrar que podemos criar coisas reais, ou quase reais.

Neste caso, vamos adicionar algumas marcas de escala nas bordas, e você vai ver alguns loops "for", para que possa fazer um loop "for" local e correto.

Depois, adicionamos alguns ponteiros de horas e minutos, depois os segundos e, por fim, alguns botões diferentes para finalizar. Pronto, temos um relógio em tempo real.

Ele está mostrando o horário.

Outra coisa interessante é que você pode escrever a mesma coisa em JSON. Se estivesse em JSON, você poderia interagir facilmente com um LLM dizendo: "Mude o ponteiro dos minutos para verde", e ele entenderia o que você quer dizer.

Então, é muito bom desse jeito.

Ok.

Certo.

Espero que isso dê uma ideia dos recursos do Remote Compose.

Vou falar um pouco sobre o suporte ao desenvolvedor que temos para você, certo?

Mencionei que essas são principalmente bibliotecas do AndroidX, então tudo o que está no DAC, você sabe onde encontrar.

Você vai receber as versões mais recentes, a documentação e tudo mais.

Como de costume, John demonstrou o que podemos fazer no Android Studio.

Para mim, o mais legal é a visualização em tempo real, que acelera muito o tempo de desenvolvimento.

Também estamos trabalhando em uma especificação aberta pública para o formato, certo?

Não estamos tentando esconder nada, está tudo lá.

Você pode ver como ele funciona, como é criado e codificado.

Uma das coisas comuns que você usa nos seus aplicativos são os drawables vetoriais animados, e, você sabe, isso é muito conveniente.

E lembre-se do que eu mencionei sobre bitmaps.

Temos muito interesse em que você envie vetores, não bitmaps, certo?

Por isso, estamos criando algumas ferramentas para ajudar você a pegar um Lottie, por exemplo, ou possivelmente outro formato, e convertê-lo em um componente do RemoteCompose que pode ser usado no seu arquivo do RemoteCompose.

Mencionei anteriormente que também estamos trabalhando em outras ferramentas, especificamente em um inspetor em tempo real para os documentos, porque uma coisa é ter a experiência do desenvolvedor para criar, mas outra é poder inspecionar o resultado dessa criação.

No nosso caso, é um documento.

Aqui está uma prévia da ferramenta em que estamos trabalhando.

É um inspetor de documentos do RemoteCompose que permite inspecionar os documentos, como o nome diz, e aplicar várias ferramentas e visualizações úteis a eles.

Um bom exemplo é abrir um documento e executar as diferentes operações que estão nele, passo a passo, para tentar entender melhor como tudo se conecta.

Mas temos outras ferramentas.

Por exemplo, eu gosto muito deste, que visualiza imediatamente seu documento em diferentes densidades e tamanhos, para que você possa ver rapidamente se o que está criando vai se adaptar bem às diferentes mudanças de tamanho, por exemplo.

Uma das coisas mais recentes em que estamos trabalhando é um Layout Inspector completo, ou seja, o tipo de recurso de inspeção de layout que você já conhece no Android Studio, mas aplicado às operações e aos documentos.

E podemos ir ainda mais longe em termos de 3D.

Como mencionei antes, e espero que agora você esteja convencido, o tamanho pequeno é um recurso.

É importante.

Queremos documentos pequenos.

Isso ajuda todo mundo.

Faça isso.

Então, o que podemos fazer?

Vamos usar um exemplo comum de interface, certo?

Algo em que você tem várias linhas.

As linhas têm um nome, um pequeno gráfico e talvez um botão.

Bem comum.

O tamanho dessa interface já é bem pequeno.

Estamos falando de cerca de 25 kB, mas temos várias funcionalidades no RemoteCompose para ajudar você a reduzir ainda mais esse tamanho.

Vamos analisar cada uma delas.

A primeira coisa que fazemos, e essa é sem custo financeiro, é que, se você estiver enviando as mesmas strings, nós vamos perceber.

Podemos reduzir alguns bytes apontando para a mesma string.

Mas oferecemos mais recursos, como loops.

Aqui, usei essa operação de loop para desenhar meu pequeno gráfico, certo?

Isso economiza mais alguns bytes.

Também temos funções.

Então, você pode criar uma função, e aqui estou fazendo isso para esse gráfico novamente, e posso simplesmente chamar esse gráfico várias vezes.

E, novamente, isso vai me poupar alguns bytes.

E para o componente, temos modelos, certo?

Ideias semelhantes às das funções, mas mais para componentes, certo?

Assim, posso substituir todos esses componentes e linhas diferentes simplesmente invocando esse modelo com os parâmetros corretos, o que economiza muito no documento.

E a última coisa que oferecemos de forma nativa é a compactação do documento.

Em geral, é possível economizar cerca de metade do tamanho do documento dessa maneira.

Uma coisa interessante é que o cabeçalho do documento é um pouco especial.

Não compactamos o arquivo.

Isso é muito útil se você quiser analisar rapidamente uma tonelada de documentos sem precisar descompactá-los.

Em resumo, os documentos são pequenos, mas você pode deixá-los ainda menores.

Com esse pequeno exemplo, é possível ver como é fácil reduzir literalmente em uma ordem de magnitude, já que o tamanho é um recurso.

Falei sobre widgets e, especificamente, widgets de tela de início na plataforma Android.

Vamos falar um pouco sobre o que estamos fazendo e o que já está disponível.

A primeira coisa que podemos fazer é replicar um widget, como o relógio, usando apenas o RemoteCompose. Ele se comportaria da mesma forma, mas no RemoteCompose.

Mas podemos fazer mais, certo?

Então, se você quiser criar uma interface mais adaptável, com widgets que são redimensionados e animados corretamente, agora é possível, certo?

Porque temos as primitivas certas para fazer isso, ao contrário do que você poderia fazer com visualizações remotas.

Oferecemos muito mais flexibilidade e poder, essencialmente.

E, falando em poder, aqui está um exemplo rápido de coisas malucas que você pode fazer, certo?

Isso mostra um jogo completo em um widget.

E eu apontaria para o tamanho real desse widget.

Estamos falando de 4 KB.

Mencionei que o transporte não é algo que lidamos diretamente no Remote Compose.

No entanto, para widgets especificamente, fornecemos uma classe de conector de widget RemoteCompose que permite pegar um documento e enviá-lo ao acesso rápido com muita facilidade.

Dito isso, se você já tiver widgets, recomendamos que continue usando o Glance, porque a versão mais recente dele fornece automaticamente um back-end para emitir o Remote Compose na plataforma.

Agora, vamos falar sobre o Wear OS.

Obrigado, Nico.

E aí, pessoal?

Sou John Zoeller.

Estou aqui para falar sobre o Wear OS.

Eu escrevi umas 30 piadas para esta apresentação, mas contei todas para minha mãe, e ela disse que eu seria demitido se contasse alguma delas.

Então, vou pular essa parte e fazer apenas a apresentação.

Vamos falar sobre o Remote Compose e algumas das grandes vantagens dele no Wear OS.

Primeiro, vamos falar sobre o novo Monitor de Treino do Wear OS.

Usamos o Remote Compose para criar isso e sabemos que criar um monitor de treino completo e de alta qualidade é muito difícil para o Wear.

Isso leva algum tempo.

Então, fizemos isso por você e incluímos alguns recursos de treino modernos e muito legais, como métricas em tempo real e controle de mídia.

E, graças ao Remote Compose, conseguimos separar a interface de toda a execução, para que ela seja executada de forma muito eficiente e não consuma a bateria dos usuários.

Sem o Remote Compose, se fizéssemos isso apenas com o Compose normal, não seria possível atualizar as métricas em tempo real na tela a cada segundo.

Na verdade, levaria um minuto, porque você teria que ativar o relógio no modo ambiente só para mostrar uma métrica.

Essa é uma grande vantagem.

E, na verdade, isso é um GIF, acredite ou não.

Esta não é uma imagem.

Sei que ele ainda não se moveu, mas isso vai acontecer em cerca de 45 segundos, quando chegarmos à próxima atualização de métricas.

Mas essa é a vantagem do Remote Compose.

E sabe o que é melhor ainda?

O Wear Workout Tracker está disponível.

O app ASICS Runkeeper criou o novo aplicativo com ele, e você pode testar hoje mesmo seguindo este link e participando do teste Beta aberto.

Em seguida, temos os widgets do Wear OS.

Esse é outro ótimo exemplo do recurso Redigir Remotamente em ação.

Eles substituem a antiga biblioteca ProtoLayout Tiles, então não é mais necessário oferecer suporte a dois tipos diferentes de frameworks de IU para dispositivos distintos.

Você pode fazer tudo isso com o Remote Compose.

E, como fazem parte do Jetpack Glance, os widgets no Wear OS fazem parte do ecossistema Android unificado de widgets.

Como parte desse ecossistema, a interface dos widgets do RemoteCompose é totalmente dissociada de qualquer processo específico do app. Assim, eles podem ser serializados e renderizados com segurança em dispositivos Wear OS usando a mesma tecnologia do restante da pilha do Android.

O Remote Compose também traz gráficos modernos e layouts responsivos para widgets, tudo isso com muita eficiência e sem gastar muita bateria.

E, com o Wear OS 7, os fabricantes de hardware já estão adotando bandejas de rolagem vertical.

Este é o Samsung Galaxy Watch, e você pode ver como os widgets rolam verticalmente pelas bandejas aqui.

Se quiser saber mais sobre como migrar seu bloco para um widget, confira este link.

Em dispositivos mais antigos que usam carrosséis horizontais para blocos, os widgets serão mostrados automaticamente como um bloco em tela cheia.

Além disso, eles são totalmente compatíveis com versões anteriores do Wear OS 4.

Além disso, este link vai ensinar mais sobre a compatibilidade com versões anteriores.

E temos alguns outros parceiros que também já adotaram os widgets.

Dê uma olhada.

E é isso.

Sim, de volta para você, Nico.

Nossa equipe agradece.

Certo.

Isso é tudo sobre nossa conversa.

Analisamos alguns dos recursos do Remote Compose.

Há mais alguns que não mencionamos.

É um framework muito rico.

Recomendo que você consulte a documentação disponível e a que será lançada em breve.

Eu diria que nosso objetivo é criar um futuro em que você possa usar o Remote Compose para lidar com todas essas diferentes superfícies remotas.

E você viu alguns deles, como o Wear, widgets.

Mas ainda tem muito mais por vir.

Eu também diria que esse é um projeto em andamento.

Ele está em desenvolvimento ativo.

Desenvolvemos tudo isso de forma aberta.

Você pode ver o que estamos fazendo.

Mas eu diria que queremos muito ouvir os desenvolvedores, certo?

Estamos criando isso para você.

Se você tiver outras ideias ou sentir falta de algo, fale com a gente.

Ficaremos muito felizes em saber disso.

Para finalizar, toda a apresentação que você acabou de ver, obviamente, foi feita no Remote Compose, incluindo as animações.