Belajar Jetpack Compose - Konsep Dasar & Arsitektur Compose

#Pendahuluan

Episode 1 menjelaskan mengapa Compose lahir. Sekarang kalian perlu memahami cara kerjanya: apa itu composable function, bagaimana recomposition berjalan, bagaimana struktur composition tree terbentuk, dan bagaimana piksel akhirnya muncul di layar.

Konsep di episode ini adalah bahasa bersama yang akan dipakai di seluruh series. Kalau episode ini terasa berat, wajar — tapi tahan dulu, karena materi berikutnya akan terus merujuk ke istilah seperti composition, state, dan slot.

Episode 2 ini menyusun fondasi: composable functions, recomposition, composition tree dan slots, pipeline rendering, serta posisi Compose di dalam Android framework.

#Composable Function: UI Sebagai Fungsi

#Rule Dasar

Fondasi Compose adalah composable function — fungsi Kotlin berannotasi @Composable. Fungsi ini menghasilkan UI berdasarkan parameternya dan bisa dipanggil dalam konteks komposisi saja. Compose merakit fungsi-fungsi ini menjadi pohon UI yang menggambarkan layar.

Composable function

@Composable
fun KartuPengguna(nama: String, aktif: Boolean) {
    Card {
        Row {
            Text(nama)
            if (aktif) {
                Text("online")
            }
        }
    }
}

if (aktif) di dalam composable adalah kontrol alur yang valid — Compose memproses cabang hanya ketika diperlukan. Karena UI hanyalah fungsi dari input, hasilnya selalu dapat diprediksi. Untuk memastikan project terkompilasi dengan benar setelah menulis composable, jalankan ./gradlew :app:compileDebugKotlin di terminal.

#Positional Memoization

Compose mengingat hasil setiap composable berdasarkan parameter dan posisinya di tree. Mekanisme ini disebut positional memoization: selama input tidak berubah, Compose melewatkan fungsi itu saat recomposition. Inilah alasan urutan pemanggilan composable tidak boleh berubah antar panggilan.

#Recomposition: Bagaimana Compose Mengupdate UI

#State-driven Update

Compose bekerja dengan model state-driven. Ketika sebuah state berubah, Compose menjalankan ulang composable yang membaca state tersebut. Proses ini disebut recomposition, dan Compose memakai smart skipping — hanya fungsi yang benar-benar membaca state yang berubah yang di-recompute.

State dan recomposition

@Composable
fun Penghitung() {
    var jumlah by remember { mutableStateOf(0) }
 
    Button(onClick = { jumlah++ }) {
        Text("Ditekan $jumlah kali")
    }
}

remember { mutableStateOf(0) } menyimpan nilai yang bertahan antar recomposition. onClick = { jumlah++ } mengubah state, dan Compose otomatis memperbarui teks. Detail mekanisme state akan dibedah menyeluruh di episode 5.

#Composition Tree dan Slots

#Struktur Tree

Setiap pemanggilan composable menghasilkan entri dalam composition tree. Struktur inilah yang dipakai Compose untuk membandingkan UI lama dan baru selama recomposition. Selama urutan dan tipe composable sama, pekerjaan yang tidak perlu dilewati.

#Slot API

Konsep slots memungkinkan sebuah composable menerima wilayah UI sebagai parameter, bukan hanya data. Ini pola yang dipakai Material Components untuk menyuntikkan konten bebas:

Slot API

@Composable
fun HalamanDasar(content: @Composable () -> Unit) {
    Scaffold(topBar = { TopAppBar(title = { Text("Beranda") }) }) {
        content()
    }
}

content: @Composable () -> Unit adalah slot: pemanggil bebas mengisi isi halaman. Pola slot inilah yang membuat komponen seperti Scaffold, ModalBottomSheet, dan SnackbarHost tetap fleksibel.

#Pipeline Rendering dan Integrasi dengan Android Views

#Tiga Tahap Rendering

Setelah komposisi, Compose menjalankan tiga tahap berurutan:

• Composition: menyusun pohon UI dari composable functions.
• Layout: mengukur dan menempatkan elemen di layar.
• Drawing: menggambar hasilnya ke canvas.

Modifier yang memengaruhi posisi bekerja pada tahap layout, sedangkan efek seperti background dan shadow bekerja pada tahap drawing. Tahapan ini akan relevan lagi saat membahas custom layout di episode 18.

#Hidup di Atas Android Framework

Compose tidak menggantikan Android; dia berjalan di atas framework yang sama. Oleh karena itu integrasi dengan view lama selalu memungkinkan: AndroidView menyematkan view tradisional ke dalam composable, dan ComposeView menyematkan Compose ke layout XML. Mekanisme interop ini dibahas di episode 16.

#Penutup

Episode 2 membangun fondasi konseptual Compose: composable functions sebagai representasi UI, recomposition yang state-driven, composition tree dengan positional memoization, slot API untuk komposisi fleksibel, pipeline tiga tahap, serta posisi Compose yang menempel di atas Android framework.

Inti yang harus dibawa pulang:

• UI di Compose adalah composable functions berannotasi @Composable.
• Recomposition hanya menjalankan ulang composable yang membaca state berubah.
• Positional memoization menjaga posisi composable harus konsisten.
• Slot API menerima wilayah UI sebagai parameter, bukan hanya data.
• Pipeline rendering: composition, layout, lalu drawing.
• Compose berjalan di atas Android framework, sehingga interop selalu mungkin.

Di episode 3 selanjutnya kita akan membahas project setup dan first composable — membuat project Compose baru di Android Studio, memahami struktur build.gradle.kts, menulis composable pertama lengkap dengan preview, dan menjalankannya di emulator. Konsep episode 2 langsung kalian praktikkan di sini.