Potenzia le piattaforme interattive con Remote Compose

Ciao,

Mi chiamo Nicolas Roard e sono il responsabile tecnico del progetto Remote Compose.

Sono John Hoford.

Sono uno sviluppatore di Remote Compose.

Sono John Zoeller e mi occupo di Developer Relations su Wear OS.

Molto bene, cominciamo.

Per prima cosa, ti darò una rapida panoramica del tipo di problema che stiamo cercando di risolvere con Remote Compose.

In genere, quando si parla o si pensa alla UI su Android, si pensa alla UI come parte dell'applicazione e del processo dell'applicazione, giusto?

Esistono molti luoghi diversi in cui a volte vuoi prendere la tua UI, pacchettizzarla e inviarla altrove, ad esempio a una superficie remota.

Quindi, per piattaforma remota intendiamo praticamente questi esempi, come stili di quadranti, widget, potrebbe essere anche la tua app o un'altra app, ok?

Quindi, tutti questi sono essenzialmente esempi di superfici remote.

Quindi, da qualche parte, altrove, potrebbe essere la tua app, potrebbe essere un server, da qualche parte si sa cosa inviare a quella superficie remota.

E…

E il mio speaker?

Tra questi due elementi c'è essenzialmente una distanza.

E questa distanza può essere letteralmente una distanza effettiva, potrebbe essere una connessione di rete, giusto?

Potrebbe anche essere solo un limite di processo.

Potresti utilizzare lo stesso dispositivo.

Ma qualunque cosa sia, ha un costo.

E la cosa più semplice che potresti pensare di fare con quella UI e di inviarla è semplicemente fare una copia dello schermo, giusto, e inviarla.

Il problema è che non è molto veloce, giusto?

Con Remote Compose, invece, inviamo un documento che rappresenta l'UI.

Tieni presente che essere piccoli offre molti vantaggi.

È importante.

L'abbiamo visto sul primo Pixel che hai inviato, ma in realtà vale per qualsiasi tipo di aggiornamento che vuoi fare su quella superficie, giusto?

Hai completato il percorso di andata e ritorno.

In questo modo, ricevi un evento, un clic o un tocco su quella superficie remota.

Devi rivolgerti a chi l'ha creato per ottenere una nuova versione.

E questo non va bene.

Quindi, per molti versi, è questo che stiamo cercando di risolvere con Remote Compose.

Abbiamo visto l'invio del documento.

Oltre al documento, ci sono un paio di aree molto importanti.

Il primo è il modo in cui crei il documento.

La seconda è come si gioca.

Ho detto che stiamo creando un documento.

Non inviamo una copia dello schermo né un'applicazione.

Abbiamo tre modi diversi per aiutarti a creare questo documento.

Uno è un'API Compose, due è un'API Kotlin procedurale, KMP, e tre è un formato JSON.

Tutti emettono gli stessi byte.

Per questo forniamo un insieme di strumenti per creare questi documenti e, con l'API Compose, possiamo sfruttare gli strumenti esistenti in Android Studio.

Ad esempio, puoi utilizzare l'anteprima per vedere dal vivo ciò che stai sviluppando, direttamente nell'IDE.

Tuttavia, stiamo anche lavorando ad alcuni nuovi strumenti efficaci, come un controllo dei documenti.

Diamo una rapida occhiata al documento.

Si tratta fondamentalmente di un elenco di operazioni codificate in una rappresentazione binaria compatta, che descrivono un'interfaccia utente autonoma che può essere inviata alla superficie remota.

Una caratteristica molto importante di questi documenti è che sono di piccole dimensioni.

E come abbiamo visto, piccolo è bello.

In genere si tratta di pochi kilobyte, giusto?

Ma anche per una UI più complessa con un layout molto adattabile, parliamo comunque di poche decine di kilobyte, giusto?

Inoltre, inseriamo tutti gli asset in quel documento.

Quindi, se ci pensi, l'unica cosa che può davvero occupare spazio nel documento sono le bitmap.

Tienilo a mente.

Dopotutto, questo è l'unico motivo per cui inviamo un documento e non una copia della schermata.

Quando parliamo di essere piccoli e di quanto sia importante, non si tratta solo di comunicazione.

È un caso limite centrale della filosofia alla base di Remote Compose.

Come abbiamo visto, ha ovviamente un impatto sul tempo necessario per visualizzare il primo pixel sullo schermo, ma ops, scusa.

Significa anche che possiamo utilizzare, con le stesse capacità della superficie, più documenti rispetto a quanto faremmo altrimenti, pur rimanendo efficienti.

Questo è un aspetto che sfrutteremo quando supporteremo i widget.

Anche i player stessi tendono a essere piuttosto piccoli e con pochissime dipendenze.

Inoltre, il fatto che siano piccoli e abbiano poche dipendenze ci consente di estendere la portata dei documenti di Remote Compose.

Questo è particolarmente importante per le piattaforme con vincoli, come vedrai.

Ho parlato molto del trasporto e della distanza, ma Remote Compose di per sé non si occupa del trasporto.

Dipende da te.

Quello che facciamo è raggruppare tutto questo in un buffer di byte che puoi inviare con il metodo appropriato alla superficie remota.

Per i widget, ti aiutiamo noi, fornendoti un connettore.

In generale, però, è utile tenere presente che sei tu a occuparti del trasporto.

Una volta che un player riceve il documento, indipendentemente da come lo hai inviato, può estrarre l'elenco delle operazioni e convertirle in comandi di disegno, alberi di layout, espressioni e tutto questo insieme può creare un'esperienza utente davvero ricca.

Quindi, una cosa da tenere a mente è che, dandoti la possibilità di decidere come trasferire il documento, puoi riutilizzare Remote Compose come strumento in molti scenari, alcuni dei quali potremmo non aver nemmeno pensato, giusto?

Una volta caricato da un player, il documento viene eseguito autonomamente.

Questo è il concetto di base.

Vogliamo che il documento crei una UI in qualche modo autonoma, che non debba tornare a chi l'ha creata, giusto?

E tutto questo insieme, possiamo supportare, ad esempio, il ridimensionamento, lo scorrimento, gli eventi touch, ad esempio, decidere di mostrare o nascondere i componenti, l'animazione, alcuni eventi touch e alcune gestioni dei tocchi, tutto può essere fatto nel documento senza dover tornare al player.

E a volte, se devi tornare indietro, scusa, alla creazione, puoi effettivamente richiedere un'azione per dire: "Per favore, dammi un nuovo documento".

Forniamo tre player ufficiali, principalmente tramite le librerie AndroidX in Remote Compose.

Uno è un player Compose, quindi puoi utilizzarlo nella tua applicazione Compose.

Abbiamo anche un player View, se utilizzi ancora View.

Inoltre, abbiamo un'implementazione di RemoteViews disponibile nella piattaforma Android a partire dall'API 36, che ti consente di creare widget Android in esecuzione su Avvio app utilizzando Remote Compose.

Se ti interessa, abbiamo anche alcuni player sperimentali, alcuni C++ in esecuzione su Skia, TypeScript e persino Compose Multiplatform.

Quindi, l'idea è che la stessa tecnologia che stai utilizzando può essere essenzialmente utilizzata per il rendering su molte piattaforme e superfici diverse.

In sintesi, la distanza di cui ho parlato esiste ancora, ma stiamo cercando di fare in modo che sia importante solo quando lo è davvero.

Sì.

Parliamo un po' delle funzionalità che avrai a disposizione in un documento di Remote Compose.

Quindi, alla base, c'è un Canvas, con tutte le funzionalità di un Canvas Android.

ma con alcune API aggiuntive.

Ma una delle cose speciali è che tutti i valori float che hai in quel Canvas Android possono essere sostituiti da espressioni.

In questo modo puoi creare animazioni, come vedi qui, scalabilità dinamica e layout flessibili.

Può essere utilizzato per molte cose diverse.

Qualche informazione in più sulle espressioni.

Hai a disposizione un ricco insieme di operatori, dalla matematica normale alla trigonometria, all'accesso agli array e all'interpolazione spline.

Una delle cose interessanti è che qualsiasi valore che cambia può essere animato, quindi puoi animare la modifica dello stato di qualsiasi valore.

In questo particolare disegno che vedi qui, ogni pendolo sceglie un tipo diverso di animazione e tutte sono disponibili in Remote Compose.

Inoltre, abbiamo i componenti di base, gli elementi di Compose, cose che conosci.

Produce un'API molto familiare, con caselle, righe, colonne e così via.

Inoltre, abbiamo componenti adattivi.

Uno dei vantaggi è che, poiché non hai il controllo del documento in quel momento, questi possono gestire la scomparsa, la comparsa e la scomparsa degli oggetti, il ritorno a causa del ridimensionamento e così via, il tutto senza tornare alla fonte del documento.

Inoltre, abbiamo l'animazione dei componenti.

Tutte le modifiche possono essere animate, quindi se un elemento scompare, puoi animarlo.

Inoltre, puoi scrivere le tue animazioni personalizzate.

In questo caso, alcuni utilizzano shader e altri elementi.

Un'altra cosa che siamo in grado di fare è l'interazione, quindi non si tratta solo di belle immagini.

Puoi fare clic sugli elementi, avere eventi touch, scorrimento e così via.

Anche l'accessibilità è importante, quindi sono presenti tutte le API per l'accessibilità.

Una delle cose che vedi qui è che sto creando un cronometro completo con UI interessanti e tutto questo avviene sul lato del player.

È tutto nel documento.

Tutto ciò che vedi, senza dover tornare al server.

Se invece l'hai creata all'interno di un'applicazione, in questo caso le parti blu sono un'applicazione e le parti nere sono un documento Remote Compose.

Puoi effettivamente interagire tra i due.

Qui sto incrementando i valori e li vedete ricevuti dall'applicazione, quello che chiamiamo host, e posso anche spostare un cursore per modificare i valori all'interno del documento.

Quindi, posso andare in entrambe le direzioni.

Vediamo come creare uno di questi documenti.

In realtà esistono tre API: Compose, Kotlin e JSON.

L'API Compose, sai già di cosa si tratta.

Ha alcune particolarità che esamineremo in dettaglio.

L'API Kotlin è molto procedurale.

C'è un comando nel documento, quindi è una relazione uno a uno.

Il file JSON è una sintassi JSON che puoi convertire in Remote Compose con i nostri convertitori.

È utile anche se lavori con un LLM, perché è in grado di leggere e scrivere i documenti.

Quindi, andiamo in Compose e creiamo qualcosa.

In questo caso, vedrai che si tratta di un composable e di un composable remoto.

Abbiamo un canva… non un canvas, ma un canvas remoto e modificatori remoti, ma i modificatori stessi sono più o meno gli stessi, quelli che conosci e ami.

Ora, tutti i comandi al suo interno generano effettivamente comandi di documento di Remote Compose di comando remoto man mano che vengono eseguiti.

In questo caso, disegnando un cerchio e poi aggiungendo alcuni float ed espressioni che utilizzano il tempo.

E quando lo attivo nell'animazione, nota che si tratta di un'anteprima live di Android Studio e che verrà eseguita in tempo reale.

Puoi vedere queste espressioni qui.

Vediamo un po' di cosa si tratta e come funziona.

A sinistra, vedrai una sorta di foglio di lavoro.

È una tabella dei valori in numeri con virgola mobile.

Inoltre, ha un albero delle dipendenze, così sai dove un elemento si connette a un altro.

Ogni volta che qualcosa cambia, i suoi elementi dipendenti vengono contrassegnati come "dirty" per essere ripuliti e modificati.

Durante l'esecuzione, ripulirà tutte le dipendenze e valuterà solo quelle che cambiano.

Quindi, è molto efficiente e, nel caso in cui, ad esempio, un oggetto cambi di dimensione, la dipendenza cambia e deve riflettere la modifica.

Questo rende il calcolo molto, molto efficiente, perché non si va dall'alto verso il basso, ma in modo molto efficiente.

Quindi, espandiamo un po' l'orologio per mostrare che possiamo creare cose reali, o quasi.

In questo caso, aggiungeremo dei segni di graduazione sui bordi e vedrai alcuni cicli for, in modo da poter eseguire un ciclo for in locale e a destra.

Poi aggiungiamo alcune lancette delle ore e dei minuti, quindi passiamo ai secondi, aggiungiamo i secondi e infine un paio di pulsanti diversi per completare il tutto e abbiamo un orologio funzionante.

In realtà, mostra l'ora.

Un altro aspetto interessante è che puoi scrivere la stessa cosa in JSON e, se fosse in JSON, puoi interagire facilmente con un LLM dicendo: "Cambia la lancetta dei minuti in verde" e l'LLM capirebbe cosa intendi.

Quindi è molto comodo.

Ok.

Infatti,

Spero che questo ti dia un'idea delle funzionalità di Remote Compose.

Parliamo un po' dell'assistenza per gli sviluppatori che offriamo.

Come ho detto, si tratta principalmente di librerie AndroidX, quindi tutto ciò che si trova su DAC, sai dove trovarlo.

Riceverai le ultime release, la documentazione e tutto il resto.

Come al solito, John ci ha mostrato cosa possiamo fare in Android Studio.

La cosa più interessante per me è l'anteprima in tempo reale, che accelera davvero i tempi di sviluppo.

Stiamo anche lavorando a una vera e propria specifica aperta pubblica per il formato, giusto?

Non stiamo cercando di avere qualcosa di completamente nascosto, è lì.

Puoi vedere come funziona, come viene effettivamente creato e codificato.

Una delle cose più comuni che utilizzi nelle tue applicazioni sono i drawable vettoriali animati e, come sai, sono molto comodi.

E ricorda cosa ho detto sulle bitmap.

Ci interessa molto che tu invii vettori e non bitmap, giusto?

Per questo motivo, stiamo creando un paio di strumenti per aiutarti a prendere un Lottie, ad esempio, o un altro formato, e convertirlo in un componente RemoteCompose che puoi utilizzare nel tuo file RemoteCompose.

Come ho accennato in precedenza, stiamo lavorando anche su altri strumenti, in particolare su un inspector in tempo reale per i documenti, perché un conto è avere l'esperienza di sviluppo per creare, un altro è poter ispezionare il risultato di questa creazione.

Nel nostro caso, si tratta di un documento.

Ecco una rapida anteprima dello strumento su cui stiamo lavorando.

Si tratta di un inspector di documenti RemoteCompose che, come dice il nome, consente di ispezionare i documenti e di applicare diversi strumenti e visualizzazioni utili.

Un buon esempio è la possibilità di aprire un documento ed eseguire le diverse operazioni al suo interno passo dopo passo per cercare di capire meglio come tutto si collega.

Ma abbiamo strumenti aggiuntivi.

Ad esempio, mi piace molto questo, che visualizza immediatamente il documento in diverse densità e dimensioni, in modo da poter vedere molto rapidamente se ciò che stai creando si adatterà bene alle diverse modifiche delle dimensioni, ad esempio.

Una delle ultime cose su cui stiamo lavorando è anche un Layout Inspector completo, ovvero il tipo di funzionalità di ispezione del layout a cui siete abituati in Android Studio, ma qui applicato alle operazioni e ai documenti, giusto?

E possiamo andare ancora oltre in termini di 3D.

Come ho già detto, e spero di averti convinto, le dimensioni ridotte sono una caratteristica.

È importante.

Vogliamo davvero documenti di piccole dimensioni.

È utile per tutti.

Fallo.

Cosa possiamo fare?

Prendiamo un esempio comune di UI, ok?

Qualcosa in cui hai un gruppo di righe.

Le righe stesse, come vedi, hanno un nome, un piccolo grafico e forse un pulsante.

Abbastanza tipico.

Le dimensioni di questa UI sono già piuttosto ridotte.

Stiamo parlando di circa 25 kB, ma RemoteCompose offre varie funzionalità per aiutarti a ridurre ulteriormente le dimensioni.

Esaminiamoli.

La prima cosa che facciamo, e questa è senza costi, la faremo per te, se invii le stesse stringhe, lo notiamo.

Possiamo risparmiare alcuni byte puntando alla stessa stringa.

Ma noi forniamo più elementi, come i loop.

In questo caso, ho utilizzato questa operazione di loop per disegnare il mio piccolo grafico, giusto?

In questo modo, si risparmiano altri byte.

Abbiamo anche le funzioni.

Quindi, potresti creare una funzione, come sto facendo qui per quel grafico, e poi chiamare semplicemente quel grafico più volte.

Anche in questo caso, risparmierò alcuni byte.

Per i componenti abbiamo i modelli, giusto?

Idee simili a quelle per le funzioni, ma più per i componenti, giusto?

In questo modo, posso sostituire tutti i diversi componenti e tutte le diverse righe semplicemente richiamando il template con i parametri corretti, risparmiando molto spazio nel documento.

Infine, supportiamo anche la compressione del documento.

In genere, in questo modo puoi risparmiare circa la metà delle dimensioni del documento.

Un aspetto interessante è che l'intestazione del documento è un po' speciale.

Non lo comprimiamo.

Questa funzionalità è molto utile se vuoi esaminare rapidamente una grande quantità di documenti senza doverli decomprimere.

In conclusione, i documenti sono piccoli, per impostazione predefinita, ma puoi renderli ancora più piccoli.

Come puoi vedere da questo piccolo esempio, è molto facile ridurre letteralmente di un ordine di grandezza, dato che la dimensione è una caratteristica.

Ho parlato dei widget e, in particolare, dei widget di Avvio app nella piattaforma Android.

Quindi, vediamo un po' cosa stiamo facendo e cosa è già disponibile.

Quindi, la prima cosa che possiamo fare è replicare un widget esistente, come l'orologio, esclusivamente in RemoteCompose, e si comporterebbe essenzialmente allo stesso modo, solo in RemoteCompose.

Ma possiamo fare di più, giusto?

Quindi, se vuoi creare una UI più adattiva, con widget che si ridimensionano e si animano correttamente, ora puoi farlo.

Questo perché abbiamo le primitive giuste per farlo, a differenza di ciò che potresti fare con le visualizzazioni remote.

In sostanza, ti offriamo molta più flessibilità e potenza.

E a proposito di potenza, ecco un rapido esempio di cose pazzesche che potresti fare, giusto?

In questo modo puoi vedere una partita completa in un widget.

E indicherei le dimensioni effettive del widget.

Stiamo parlando di 4 kB.

Ho accennato al fatto che il trasporto non è un aspetto di cui ci occupiamo direttamente in Remote Compose.

Tuttavia, per i widget in particolare, forniamo una classe di connettore RemoteCompose Widget che ti consente di prendere un documento e inviarlo al programma di avvio molto facilmente.

Detto questo, se hai già dei widget, ti invitiamo a continuare a utilizzare Glance, perché l'ultima versione di Glance fornisce automaticamente un backend per emettere Remote Compose sulla piattaforma.

E ora, parliamo di Wear OS.

Grazie, Nico.

Ciao a tutti!

Sono John Zoeller.

Sono qui per parlarti di Wear OS.

Ho scritto circa 30 battute per questa presentazione, ma le ho raccontate tutte a mia madre e mi ha detto che mi avrebbero licenziato se ne avessi raccontata una.

Quindi, salterò questa parte e farò direttamente la presentazione.

Parliamo di Remote Compose e di alcuni dei suoi grandi vantaggi su Wear OS.

Innanzitutto, parleremo del nuovo tracker di allenamento di Wear OS.

Per creare questa app abbiamo utilizzato Remote Compose e sappiamo che creare un tracker di allenamento completo e di alta qualità è davvero difficile per Wear.

Richiede un po' di tempo.

Quindi, l'abbiamo fatto noi per te e abbiamo incluso alcune nuove funzionalità di allenamento moderne, come le metriche live e la possibilità di controllare i contenuti multimediali.

E grazie a Remote Compose, siamo riusciti a separare la UI da tutta l'esecuzione, in modo che possa funzionare in modo molto efficiente e non consumare le batterie degli utenti.

Senza Remote Compose, se lo facessimo con il normale Compose, non saremmo in grado di aggiornare le metriche live sullo schermo ogni secondo.

In realtà ci vorrebbe un minuto, perché dovresti riattivare lo smartwatch in modalità Ambient solo per mostrare una metrica.

Questo è un grande vantaggio.

E, che ci crediate o no, questa è una GIF.

Questa non è un'immagine.

So che non si è ancora spostato e lo farà tra circa 45 secondi, quando arriveremo al prossimo aggiornamento delle metriche.

Ma questo è il vantaggio di Remote Compose.

E indovina un po'?

In realtà, Wear Workout Tracker è disponibile.

L'app ASICS Runkeeper ha creato la sua nuova applicazione con questo strumento e puoi provarla oggi stesso seguendo questo link e partecipando al beta test aperto.

A seguire, abbiamo i widget di Wear OS.

Questo è un altro ottimo esempio di Remote Compose in azione.

Queste sostituiscono la vecchia libreria ProtoLayout Tiles, quindi non è più necessario supportare due diversi tipi di framework UI per dispositivi diversi.

Puoi fare tutto questo con Remote Compose.

Inoltre, poiché fanno parte di Jetpack Glance, i widget su Wear OS fanno parte dell'ecosistema Android unificato dei widget.

Come parte di questo ecosistema, la UI dei widget RemoteCompose è completamente disaccoppiata da qualsiasi processo specifico dell'app, quindi può essere serializzata e visualizzata in sicurezza sui dispositivi Wear OS utilizzando la stessa tecnologia del resto dello stack Android.

Remote Compose offre anche grafica moderna e layout adattabili ai widget, il tutto con un'elevata efficienza e un consumo ridotto della batteria.

Con Wear OS 7, i produttori di hardware stanno già adottando i riquadri a scorrimento verticale.

Questo è il Samsung Galaxy Watch e puoi vedere come i widget scorrono verticalmente attraverso i riquadri.

Se vuoi saperne di più sulla migrazione della tua scheda a un widget, puoi consultare questo link.

Sui dispositivi meno recenti che utilizzano i caroselli orizzontali per i riquadri, i widget verranno visualizzati automaticamente come riquadri a schermo intero.

Inoltre, sono completamente compatibili con le versioni precedenti di Wear OS 4.

Inoltre, questo link ti fornirà ulteriori informazioni sulla compatibilità con le versioni precedenti.

Abbiamo anche altri partner che hanno già adottato i widget.

Puoi dare un'occhiata.

Questo è tutto per me.

Sì, a te Nico.

Grazie.

Okay.

Questo è tutto per quanto riguarda il nostro discorso.

Abbiamo esaminato alcune delle funzionalità di Remote Compose.

Ce ne sono altri di cui non abbiamo parlato.

È un framework molto ricco.

Ti invito a dare un'occhiata alla documentazione disponibile e a quella futura.

Direi che il nostro obiettivo è davvero quello di costruire un futuro in cui sia possibile utilizzare Remote Compose per gestire tutte queste diverse piattaforme remote.

E ne hai visti alcuni, giusto, come Wear, i widget.

Ma c'è ancora molto altro in arrivo.

Direi anche che si tratta di un progetto in corso.

È in fase di sviluppo attivo.

Sviluppiamo tutto questo in modo aperto.

Puoi vedere cosa stiamo facendo.

Ma, direi, vogliamo davvero sentire gli sviluppatori, giusto?

Stiamo creando questa funzionalità per te.

Quindi, se hai altre idee o se ti manca qualcosa, contattaci.

Saremo più che felici di ricevere il tuo feedback.

Vorrei concludere con questo: l'intera presentazione che avete appena visto, ovviamente, è stata realizzata in Remote Compose, animazioni incluse.