Konsep dan arsitektur Remote Compose

Remote Compose adalah library Jetpack yang memungkinkan Anda membangun UI dengan API bergaya Compose di aplikasi dan menampilkannya dalam proses sistem, seperti Widget Aplikasi atau Widget Wear OS. Aplikasi Anda merekam UI sebagai dokumen ringkas, dan pemutar dalam proses host merendernya serta menangani interaksi, perubahan status, dan animasi secara lokal, tanpa memanggil kembali ke aplikasi Anda.

Panduan ini menjelaskan arsitektur Remote Compose dan perbedaannya dengan Jetpack Compose standar. Panduan ini berfokus pada pembuatan UI dengan komponen.

Kasus penggunaan Compose Jarak Jauh

Remote Compose dapat digunakan di platform apa pun dengan pemutar pendukung. Di Android, Glance mendukung widget Aplikasi dan widget Wear OS.

Cara kerja: Arsitektur tiga blok

Perbedaan arsitektur mendasar antara Remote Compose dan Jetpack Compose standar terletak pada pemisahan definisi UI dari eksekusi di tiga blok tingkat tinggi:

• Membuat dokumen: Aplikasi Anda menjalankan fungsi @RemoteComposable untuk merekam dokumen: deskripsi UI yang ringkas dan diserialisasi, termasuk tata letak, status jarak jauh, dan tindakannya. Saat data berubah, aplikasi Anda dapat mencatat dan mengirim dokumen baru.
• Mengirim dokumen ke host jarak jauh: Aplikasi Anda meneruskan dokumen ke host, proses yang menampilkannya, seperti peluncur atau Wear OS.
• Memutar dokumen: Pemutar Remote Compose di host merender dokumen dan menangani tata letak, input, perubahan status UX, dan animasi secara lokal, tanpa memanggil kembali ke aplikasi Anda.

Arsitektur ini memberikan manfaat utama yang secara langsung mengurangi latensi:

• Ukuran dokumen kecil: Snapshot dokumen yang diserialisasi tetap ringkas dan ringan.
• Mengurangi perjalanan bolak-balik: Karena pemutar host jarak jauh menangani interaksi dan perubahan status secara lokal, komunikasi bolak-balik ke aplikasi atau server dapat diminimalkan.

Analogi halaman web/HTML: Remote Compose berfungsi mirip dengan penayangan halaman web. Server aplikasi membuat dan mengirim struktur HTML/dokumen satu kali, dan host browser merendernya serta menangani interaksi secara lokal tanpa terus-menerus mengkueri backend.

Komponen

Remote Compose menyediakan komponen UI tingkat tinggi untuk menyusun tata letak. Gunakan komponen Remote Compose dan RemoteModifier, bukan komponen Compose standar yang setara. Komponen ini mencakup container tata letak dasar serta komponen adaptif yang dirancang khusus untuk menangani ukuran layar dinamis:

• Komponen tata letak dasar: Elemen tata letak umum seperti Compose, seperti RemoteBox, RemoteRow, dan RemoteColumn.
• Komponen tata letak adaptif: Komponen khusus seperti RemoteFitBox, RemoteCollapsibleRow, dan RemoteCollapsibleColumn yang dirancang untuk beradaptasi dengan rapi di seluruh platform jarak jauh.
• Tema Desain Material: Penerapan tema berfungsi dengan cara yang sama untuk widget Wear OS, dengan hierarki warna dan tipografi yang disediakan oleh RemoteMaterialTheme. Hal ini memungkinkan branding dan implementasi sistem desain yang konsisten di seluruh aplikasi dan widget Anda.

Gambar kustom dengan RemoteCanvas

Untuk grafis kustom dan animasi berbasis waktu, gunakan RemoteCanvas, yang merekam perintah gambar yang dijalankan pemutar di host. Panduan ini berfokus pada membangun UI dengan komponen.

Perbedaan utama

Tinjau konsep inti berikut untuk memahami cara Remote Compose mengelola status, logika, dan tindakan.

Referensi status simbolis

Di Compose standar, penampung status menyimpan nilai aktif yang dapat dibaca dalam memori aplikasi lokal yang diubah oleh kode aplikasi (lambda) saat terjadi sesuatu. Di Remote Compose, deklarasi status bertindak sebagai referensi simbolis. Alih-alih menyimpan nilai aktif dalam memori aplikasi lokal, mereka mendeklarasikan binding yang dikelola dan diperbarui oleh pemutar jarak jauh secara lokal saat runtime. Perhatikan pertimbangan berikut saat mendeklarasikan status di Remote Compose:

• Gunakan fungsi factory Remote Compose untuk mendeklarasikan status seperti rememberMutableRemoteInt, rememberMutableRemoteFloat, atau rememberMutableRemoteString.
• Kode aplikasi Anda tidak dapat memeriksa atau membaca nilai variabel status jarak jauh secara langsung selama komposisi.
• Pemutar menyimpan dan memperbarui nilai ini secara lokal saat pengguna berinteraksi dengan dokumen.

Status jarak jauh versus alur kontrol Kotlin

Kode Kotlin Anda hanya berjalan saat aplikasi membuat dokumen. Pernyataan Kotlin seperti if, when, dan for dapat membentuk dokumen berdasarkan nilai yang diketahui pada saat itu, seperti mengulangi baris untuk setiap item dalam daftar, tetapi tidak dapat bereaksi terhadap status jarak jauh yang berubah nanti. Perhatikan hal-hal berikut saat menggunakan Remote Compose:

• Logika percabangan: Peralihan UI dinamis dilakukan menggunakan RemoteStateLayout dengan memetakan status ke slot RemoteComposable yang berbeda.
• Evaluasi teks: Hindari interpolasi string Kotlin standar ("$remoteValue"), yang hanya dievaluasi saat dokumen dibuat. Sebagai gantinya, teruskan RemoteString ke RemoteText.

Penataan gaya dinamis menggunakan RemoteModifier

Penataan gaya dinamis di host tidak menjalankan ulang komposisi; sebagai gantinya, variabel status jarak jauh diteruskan langsung ke pengubah, seperti RemoteModifier.background(remoteColor).

Konteks sistem jarak jauh

Penyedia CompositionLocal seperti LocalConfiguration atau LocalDensity hanya mencerminkan lingkungan aplikasi lokal pada saat dokumen direkam. Permukaan ini tidak diupdate secara dinamis di host jarak jauh saat permukaan diubah ukurannya, diubah status tampilannya, atau seiring waktu. Sebagai gantinya, gunakan nilai yang di-resolve pemutar pada host saat runtime, seperti ukuran komponen saat ini, RemoteConfiguration atauRemoteDensity.

Tindakan deklaratif

Di Compose standar, pengendali klik adalah lambda yang berjalan di aplikasi Anda. Host tidak dapat menjalankan kode aplikasi Anda, jadi di Remote Compose, Anda harus melampirkan tindakan, misalnya dengan RemoteModifier.clickable(action). Tindakan dapat memperbarui status jarak jauh secara langsung di host dengan valueChange, atau menyerahkan ke aplikasi atau host dengan pendingIntentAction atau hostAction. Untuk menjalankan beberapa tindakan dari satu klik, gunakan combinedAction.

Perbandingan paradigma tingkat tinggi

Domain fitur	Jetpack Compose Standar	Remote Compose
Peristiwa klik dan sentuh	Lambda sinkron dalam proses	Objek Action yang diserialisasi secara deklaratif
Logika bersyarat	Alur kontrol if dan when di Kotlin	if/when Kotlin standar berfungsi normal untuk status statis yang diketahui saat membuat dokumen. Percabangan dinamis menggunakan RemoteStateLayout (untuk hierarki UI).
Loop alur kontrol	Loop for dan while Kotlin standar	Loop Kotlin standar (repeat, for, forEach) hanya berjalan saat dokumen dibuat. Tidak dapat melakukan loop pada status jarak jauh di host
Host eksekusi	Proses aplikasi	Peluncur (AppWidget), widget Wear OS, atau faktor bentuk apa pun dengan pemutar pendukung
Siklus proses proses	Proses harus tetap aktif untuk merekomposisi & merender	Proses mencatat dokumen snapshot UI; mesin Pemutar Jarak Jauh mengurai hierarki komponen, melacak mutasi status, dan menggambar ulang secara lokal tanpa memanggil kembali ke aplikasi.
Efek samping	Siklus proses coroutine (LaunchedEffect)	Tidak tersedia di host. Komposisi berjalan di aplikasi Anda untuk membuat dokumen, sehingga efek coroutine tidak dapat mendorong UI jarak jauh, kecuali jika integrasi membuat komposisi tetap terbuka.
Paradigma status	Nilai status memori lokal	Fungsi factory (rememberMutableRemoteInt(), rememberNamedRemoteColor()) yang menampilkan referensi status simbolis, bukan nilai mentah.