Jetpack Compose dalam Pengembangan Seluler: Apa itu, Konsep Kunci dan Cara Kerjanya

Dasar Jetpack Compose (@Composable, Composition, Recomposition)

@Composable — anotasi yang mengubah fungsi menjadi Composable. Fungsi Composable adalah blok bangunan UI. Mereka tidak mengembalikan View, mereka memancarkan elemen ke Composition. Composition — pohon UI yang dibangun dari panggilan fungsi Composable. Compose membandingkan pohon baru dengan pohon lama dan hanya memperbarui bagian yang berubah.

Recomposition

Recomposition — mulai ulang fungsi Composable saat status berubah. Compose melacak status apa yang dibaca di setiap fungsi. Saat status berubah, Compose hanya memulai ulang fungsi yang membaca status tersebut (Smart Recomposition). Recomposition bersifat optimis: dapat berjalan beberapa kali, sehingga fungsi harus murni (tanpa efek samping). Efek samping diletakkan di LaunchedEffect atau DisposableEffect. Fungsi Composable tidak bisa menjadi suspend. Mereka dipanggil dari fungsi Composable lain. Urutan panggilan tidak dijamin (Compose dapat mengurutkan ulang).

// Contoh Composable dengan State Hoisting dan LazyColumn
@Composable
fun ItemList(
    items: List<String>,
    onItemClick: (String) -> Unit
) {
    LazyColumn(
        modifier = Modifier.fillMaxSize()
    ) {
        items(items) { item ->
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .clickable { onItemClick(item) }
                    .padding(8.dp)
            ) {
                Text(
                    text = item,
                    style = MaterialTheme.typography.bodyLarge
                )
            }
        }
    }
}

@Composable
fun MainScreen() {
    var text by remember { mutableStateOf("") }
    val items = listOf("Item 1", "Item 2", "Item 3")

    Scaffold(
        topBar = {
            TopAppBar(title = { Text("Compose App") })
        }
    ) { padding ->
        ItemList(
            items = items,
            onItemClick = { selected -> text = selected }
        )
    }
}

Composition — pohon deklaratif. Recomposition — mulai ulang cerdas. IT Sectr merekomendasikan pemantauan stabilitas tipe — tipe tidak stabil menyebabkan rekomposisi berlebihan.

CompositionLocal

CompositionLocal — pengiriman data implisit di Compose. Mirip dengan @Environment di SwiftUI. CompositionLocalProvider — mengatur nilai. current — membaca. Digunakan untuk: Theme (MaterialTheme), ContentScale, Density. CompositionLocal Statis — untuk konfigurasi tanpa perubahan. CompositionLocal Dinamis — untuk nilai yang dapat berubah (tema). IT Sectr merekomendasikan penggunaan CompositionLocal untuk konfigurasi global dan parameter eksplisit untuk data.

Status (remember, mutableStateOf, State Hoisting)

remember — menyimpan nilai antar rekomposisi. mutableStateOf — membuat status yang dapat diamati (MutableState<T>). Saat berubah, memicu rekomposisi. State Hoisting — pola: status diangkat ke komponen induk, anak menerima nilai + panggilan balik. State (tidak berubah) — hanya baca. MutableState — baca + tulis. rememberSaveable — bertahan saat rotasi/kematian proses.

State Hoisting

State Hoisting — prinsip: state down, events up. Status disimpan di induk dan diteruskan ke komponen anak melalui parameter. Komponen anak melaporkan perubahan melalui lambda (panggilan balik). Manfaat: penggunaan kembali, kemampuan uji, sumber kebenaran tunggal. Contoh: alih-alih MyTextField menyimpan statusnya sendiri, induk menyimpan string dan meneruskannya melalui value + onValueChange.

Status Turunan

derivedStateOf — status yang dihitung, dihitung ulang hanya saat dependensi berubah. Digunakan untuk pemfilteran, konversi, validasi. snapshotFlow — mengonversi State menjadi Flow. Digunakan untuk rantai reaktif. collectAsState — mengumpulkan Flow menjadi State di dalam Composable. IT Sectr merekomendasikan derivedStateOf untuk nilai yang dihitung dan snapshotFlow untuk menghubungkan State dengan coroutine.

Kontainer (Column, Row, Box, LazyColumn)

Column — tata letak vertikal (mirip LinearLayout vertikal). Row — tata letak horizontal. Box — tata letak bertumpuk (mirip FrameLayout). LazyColumn — daftar vertikal yang dapat digulir dengan pemuatan malas. LazyRow — daftar horizontal yang dapat digulir. Scaffold — struktur layar utama: TopAppBar, BottomBar, FloatingActionButton, Snackbar. TopAppBar — bilah atas. BottomNavigation — navigasi bawah (NavigationBar di Material 3). Modifier — rantai: .fillMaxWidth().padding(8.dp).clickable { }. Urutan pengubah penting — masing-masing membuat pembungkus baru.

Optimasi LazyColumn

LazyColumn — daftar virtual. Hanya merender elemen yang terlihat. Optimasi: 1) key — kunci unik untuk item, 2) contentType — mengelompokkan item menurut jenis, 3) itemContent — meminimalkan rekomposisi di dalam item, 4) LazyVerticalGrid / LazyHorizontalGrid — untuk kisi. LazyLayout — tata letak malas khusus. Paging 3 + Compose — penomoran halaman melalui collectAsLazyPagingItems. IT Sectr merekomendasikan key(item) untuk semua LazyColumn untuk rekomposisi yang dapat diprediksi.

Navigasi (NavController, NavHost)

Navigation Compose — pustaka navigasi. NavController — mengelola tumpukan tujuan. NavHost — kontainer untuk grafik navigasi. composable("route") — mendaftarkan tujuan. navController.navigate("route") — navigasi. popBackStack() — kembali. Argumen: composable("detail/{id}", arguments = listOf(navArgument("id") { type = NavType.StringType })). Deep linking melalui intentFilter. BottomNavigation — integrasi dengan NavController: NavBarItem → navigate + popUpTo.

Navigasi Lanjutan

Beberapa tumpukan kembali — tumpukan kembali terpisah untuk setiap tab BottomNavigation. SavedStateHandle — menyimpan argumen saat kematian proses. NavArgs — argumen aman tipe (Kotlin 2.0+). Deep link — skema URL untuk tautan eksternal. Gerakan kembali prediktif (Android 14+) — dukungan gerakan kembali dengan pratinjau. IT Sectr merekomendasikan penggunaan NavArgs untuk keamanan tipe dan beberapa tumpukan kembali untuk BottomNavigation.

Efek (LaunchedEffect, DisposableEffect)

LaunchedEffect — meluncurkan blok suspend di Composition. Dibatalkan saat meninggalkan Composition. Dimulai ulang saat keys berubah. Digunakan untuk: pemuatan data, pengatur waktu, animasi. DisposableEffect — untuk sumber daya yang memerlukan pembersihan: onDispose { } — berhenti berlangganan dari pendengar, menutup koneksi. SideEffect — efek sinkron (setiap rekomposisi). Digunakan untuk: pencatatan, sinkronisasi dengan kode non-Compose. IT Sectr merekomendasikan LaunchedEffect untuk pemuatan data dan DisposableEffect untuk pembersihan.

Compose — fungsi + pengubah. SwiftUI — struct + pengubah. Konsepnya mirip, sintaksnya berbeda. IT Sectr merekomendasikan mempelajari kedua framework — memahami satu memudahkan mempelajari yang lain.

Pola Efek

rememberCoroutineScope — akses ke CoroutineScope di luar LaunchedEffect (misalnya, saat klik tombol). snapshotFlow — mengonversi State menjadi Flow untuk rantai. produceState — mengonversi sumber non-Compose menjadi State. animateFloatAsState dan animateColorAsState — animasi melalui efek. IT Sectr merekomendasikan rememberCoroutineScope untuk peristiwa UI dan LaunchedEffect untuk pemuatan otomatis.

Tema (MaterialTheme, Material3)

MaterialTheme — tema global Compose. Warna, tipografi, bentuk. MaterialTheme { } — membungkus seluruh aplikasi. Material3 (M3) — sistem desain Google 2023+. Dynamic Colors — adaptasi ke wallpaper (Android 12+). TextStyle — konfigurasi teks: fontSize, fontWeight, lineHeight. Shape — pembulatan sudut. Elevation — bayangan. IT Sectr merekomendasikan Material3 secara default dan Dynamic Colors untuk perangkat modern.

@Composable
fun AppTheme(content: @Composable () -> Unit) {
    val colorScheme = if (isSystemInDarkTheme()) {
        darkColorScheme(
            primary = Color(0xFFBB86FC),
            secondary = Color(0xFF03DAC6)
        )
    } else {
        lightColorScheme(
            primary = Color(0xFF6200EE),
            secondary = Color(0xFF03DAC6)
        )
    }
    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography(
            bodyLarge = TextStyle(fontSize = 16.sp)
        )
    ) { content() }
}

Animasi (animate*, AnimatedVisibility)

animateFloatAsState — menganimasi nilai Float. animateColorAsState — menganimasi warna. animateDpAsState — menganimasi ukuran. AnimatedVisibility — tampilkan/sembunyikan dengan .animateEnterExit(). AnimatedContent — animasi saat konten berubah (crossfade, slide). updateTransition — animasi berdasarkan status enum. Animatable — animasi khusus melalui antarmuka Animatable. IT Sectr merekomendasikan AnimatedVisibility untuk daftar dan AnimatedContent untuk transisi layar.

@Composable
fun AnimatedCounter(count: Int) {
    val animatedCount by animateFloatAsState(
        targetValue = count.toFloat(),
        animationSpec = spring(
            dampingRatio = Spring.DampingRatioMediumBouncy,
            stiffness = Spring.StiffnessLow
        )
    )

    AnimatedContent(targetState = count) { targetCount ->
        Text(
            text = "$targetCount",
            style = MaterialTheme.typography.displayLarge,
            modifier = Modifier.animateContentSize()
        )
    }
}

Pengujian (Compose UI Test)

Compose UI Test — pengujian layar Compose. createComposeRule() — aturan JUnit. setContent { } — mengatur Composable. onNodeWithText, onNodeWithTag, onNodeWithContentDescription — menemukan elemen. performClick, performTextInput, performScrollTo — tindakan. assertIsDisplayed, assertTextEquals — pernyataan. Semantics — pohon Semantics untuk aksesibilitas dan pengujian. IdlingResource — menunggu operasi asinkron. Pengujian tangkapan layar — Papercuts, Roborazzi. IT Sectr merekomendasikan pengujian UI untuk setiap layar dan pengujian unit untuk ViewModel.

WindowSizeClass — adaptasi ke ukuran layar (Compact, Medium, Expanded). Terkait dengan tata letak responsif Material3. Digunakan di Adaptive Navigation Suite untuk peralihan otomatis dari BottomNavigation ke NavigationRail. IT Sectr merekomendasikan WindowSizeClass untuk adaptasi Compose pada tablet dan desktop.

Paging 3 + Compose — pustaka penomoran halaman dari Google. PagingData — aliran halaman. PagingConfig — pengaturan (pageSize, prefetchDistance). collectAsLazyPagingItems() — mengumpulkan di Compose. PagingSource — sumber khusus. RemoteMediator — pemuatan hibrida (jaringan + DB). Paging 3 adalah standar untuk daftar gulir tak terbatas di Compose.