Jetpack Compose dans le développement mobile : ce que c'est, concepts clés et fonctionnement

Fondamentaux de Jetpack Compose (@Composable, Composition, Recomposition)

@Composable — annotation qui transforme une fonction en Composable. Les fonctions Composable sont des blocs de construction d'UI. Elles ne retournent pas une View, elles émettent des éléments dans Composition. Composition — un arbre d'UI construit à partir d'appels de fonctions Composable. Compose compare le nouvel arbre avec l'ancien et met à jour uniquement les parties modifiées.

Recomposition

Recomposition — redémarrage des fonctions Composable lors d'un changement d'état. Compose suit quels états sont lus dans chaque fonction. Lorsqu'un état change, Compose ne redémarre que les fonctions qui lisent cet état (Smart Recomposition). La recomposition est optimiste : elle peut s'exécuter plusieurs fois, donc les fonctions doivent être pures (sans effets secondaires). Les effets secondaires vont dans LaunchedEffect ou DisposableEffect. Les fonctions Composable ne peuvent pas être suspend. Elles sont appelées depuis d'autres fonctions Composable. L'ordre d'appel n'est pas garanti (Compose peut réordonner).

// Exemple de Composable avec State Hoisting et 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 — arbre déclaratif. Recomposition — redémarrage intelligent. IT Sectr recommande de surveiller la stabilité des types — les types instables provoquent une recomposition excessive.

CompositionLocal

CompositionLocal — passage implicite de données dans Compose. Analogue à @Environment dans SwiftUI. CompositionLocalProvider — définir une valeur. current — lecture. Utilisé pour : Theme (MaterialTheme), ContentScale, Density. CompositionLocal statique — pour une configuration sans changements. CompositionLocal dynamique — pour les valeurs mutables (thèmes). IT Sectr recommande d'utiliser CompositionLocal pour les configurations globales et des paramètres explicites pour les données.

État (remember, mutableStateOf, State Hoisting)

remember — conserve la valeur entre les recompositions. mutableStateOf — crée un état observable (MutableState<T>). Lorsqu'il est modifié, déclenche une recomposition. State Hoisting — motif : l'état est remonté au composant parent, l'enfant reçoit la valeur + callback. State (immuable) — lecture seule. MutableState — lecture + écriture. rememberSaveable — persiste lors de la rotation/mort du processus.

State Hoisting

State Hoisting — principe : state down, events up. L'état est stocké dans le parent et transmis aux composants enfants via des paramètres. Les composants enfants signalent les changements via des lambdas (callback). Avantages : réutilisabilité, testabilité, source unique de vérité. Exemple : au lieu que MyTextField stocke son propre état, le parent stocke la chaîne et la transmet via value + onValueChange.

État dérivé

derivedStateOf — état calculé, recalculé uniquement lorsque les dépendances changent. Utilisé pour le filtrage, la conversion, la validation. snapshotFlow — convertit State en Flow. Utilisé pour les chaînes réactives. collectAsState — collecte Flow dans State à l'intérieur de Composable. IT Sectr recommande derivedStateOf pour les valeurs calculées et snapshotFlow pour connecter State avec les coroutines.

Conteneurs (Column, Row, Box, LazyColumn)

Column — layout vertical (analogue à LinearLayout vertical). Row — layout horizontal. Box — layout d'empilement (analogue à FrameLayout). LazyColumn — liste verticale défilable avec chargement paresseux. LazyRow — liste horizontale défilable. Scaffold — structure principale d'écran : TopAppBar, BottomBar, FloatingActionButton, Snackbar. TopAppBar — barre supérieure. BottomNavigation — navigation inférieure (NavigationBar dans Material 3). Modifier — chaîne : .fillMaxWidth().padding(8.dp).clickable { }. L'ordre des modificateurs est important — chacun crée un nouveau wrapper.

Optimisation de LazyColumn

LazyColumn — liste virtualisée. Affiche uniquement les éléments visibles. Optimisation : 1) key — clé unique pour l'élément, 2) contentType — grouper les éléments par type, 3) itemContent — minimiser la recomposition dans l'élément, 4) LazyVerticalGrid / LazyHorizontalGrid — pour les grilles. LazyLayout — layout paresseux personnalisé. Paging 3 + Compose — pagination via collectAsLazyPagingItems. IT Sectr recommande key(item) pour tous les LazyColumn pour une recomposition prévisible.

Navigation (NavController, NavHost)

Navigation Compose — bibliothèque de navigation. NavController — gère la pile de destinations. NavHost — conteneur du graphe de navigation. composable("route") — enregistrer une destination. navController.navigate("route") — naviguer. popBackStack() — retourner. Arguments : composable("detail/{id}", arguments = listOf(navArgument("id") { type = NavType.StringType })). Deep linking via intentFilter. BottomNavigation — intégration avec NavController : NavBarItem → navigate + popUpTo.

Navigation avancée

Piles de retour multiples — pile de retour séparée pour chaque onglet de BottomNavigation. SavedStateHandle — conserver les arguments lors de la mort du processus. NavArgs — arguments type-safe (Kotlin 2.0+). Deep links — schémas d'URL pour les liens externes. Geste de retour prédictif (Android 14+) — prise en charge du geste de retour avec aperçu. IT Sectr recommande d'utiliser NavArgs pour la sécurité des types et plusieurs piles de retour pour BottomNavigation.

Effets (LaunchedEffect, DisposableEffect)

LaunchedEffect — lance un bloc suspend dans Composition. Annulé en quittant Composition. Redémarré lors du changement des keys. Utilisé pour : chargement de données, minuteries, animations. DisposableEffect — pour les ressources nécessitant un nettoyage : onDispose { } — se désabonner des listeners, fermer les connexions. SideEffect — effet synchrone (à chaque recomposition). Utilisé pour : journalisation, synchronisation avec du code non Compose. IT Sectr recommande LaunchedEffect pour le chargement de données et DisposableEffect pour le nettoyage.

Compose — fonction + modificateur. SwiftUI — struct + modificateur. Les concepts sont similaires, la syntaxe est différente. IT Sectr recommande d'apprendre les deux frameworks — comprendre l'un facilite l'apprentissage de l'autre.

Modèles d'effets

rememberCoroutineScope — accès à CoroutineScope en dehors de LaunchedEffect (par exemple, lors d'un clic sur un bouton). snapshotFlow — convertir State en Flow pour les chaînes. produceState — convertir une source non Compose en State. animateFloatAsState et animateColorAsState — animations via les effets. IT Sectr recommande rememberCoroutineScope pour les événements d'UI et LaunchedEffect pour le chargement automatique.

Thématisation (MaterialTheme, Material3)

MaterialTheme — thème global de Compose. Couleurs, typographie, formes. MaterialTheme { } — enveloppe toute l'application. Material3 (M3) — système de design Google 2023+. Dynamic Colors — adaptation au fond d'écran (Android 12+). TextStyle — configuration du texte : fontSize, fontWeight, lineHeight. Shape — arrondi des coins. Elevation — ombres. IT Sectr recommande Material3 par défaut et Dynamic Colors pour les appareils modernes.

@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() }
}

Animations (animate*, AnimatedVisibility)

animateFloatAsState — anime une valeur Float. animateColorAsState — anime une couleur. animateDpAsState — anime une taille. AnimatedVisibility — afficher/masquer avec .animateEnterExit(). AnimatedContent — animation lors du changement de contenu (crossfade, slide). updateTransition — animation basée sur un état enum. Animatable — animation personnalisée via l'interface Animatable. IT Sectr recommande AnimatedVisibility pour les listes et AnimatedContent pour les transitions d'écran.

@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()
        )
    }
}

Tests (Compose UI Test)

Compose UI Test — test des écrans Compose. createComposeRule() — règle JUnit. setContent { } — définir Composable. onNodeWithText, onNodeWithTag, onNodeWithContentDescription — rechercher des éléments. performClick, performTextInput, performScrollTo — actions. assertIsDisplayed, assertTextEquals — assertions. Semantics — arbre Semantics pour l'accessibilité et les tests. IdlingResource — attendre les opérations asynchrones. Tests de capture d'écran — Papercuts, Roborazzi. IT Sectr recommande des tests UI pour chaque écran et des tests unitaires pour ViewModel.

WindowSizeClass — adaptation à la taille d'écran (Compact, Medium, Expanded). Lié aux layouts responsifs de Material3. Utilisé dans Adaptive Navigation Suite pour le passage automatique de BottomNavigation à NavigationRail. IT Sectr recommande WindowSizeClass pour l'adaptation de Compose aux tablettes et au bureau.

Paging 3 + Compose — bibliothèque de pagination de Google. PagingData — flux de pages. PagingConfig — paramètres (pageSize, prefetchDistance). collectAsLazyPagingItems() — collecter dans Compose. PagingSource — source personnalisée. RemoteMediator — chargement hybride (réseau + BD). Paging 3 est la norme pour les listes à défilement infini dans Compose.