Skip to content

SYSTEM Cited by 1 source

Jetpack Compose

Overview

Jetpack Compose is Google's modern declarative UI toolkit for Android, built in Kotlin. A Composable function — a Kotlin function annotated @Composable — describes what the UI should render as a function of current state; the runtime diffs and re-renders on state changes. Compose replaces the older imperative View system (XML layouts inflated at runtime, bound via findViewById, managed via Fragments) that dominated Android UI for roughly a decade.

By 2024 the Android ecosystem had moved to Compose-first — Google's own recommendation — and staying on Fragments + XML layouts accumulated tech debt as Compose-native libraries, samples, and tooling proliferated. This made "migration to Compose" a first-order tech-debt project for many Android teams.

Key properties

  • Declarative: @Composable fun MyScreen(state: State) — UI as pure function of state, re-run on state change.
  • Kotlin-native: no XML, no generated R-IDs, no inflation; Composables compose via Kotlin function calls.
  • State management: built-in primitives (remember, mutableStateOf, collectAsStateWithLifecycle) and integration with Kotlin flows / coroutines.
  • Interop with Views: ComposeView hosts Composables inside a legacy View hierarchy; navigation-fragment-compose (the Phase-1 enabler at Instacart) hosts Composables as implicit Fragments for gradual migration.
  • Preview composables: IDE-rendered previews attached to each Composable — also a natural hook for Paparazzi JVM-side screenshot tests.
  • Compose Navigation: Compose-native navigation graph API with type-safe Kotlin DSL routes; does not support XML resource-ID navigation (this was the Phase-2 Instacart forcing function for the type-safe-DSL migration before the full Compose-Navigation migration).

Migration ergonomics

Compose was designed to interop with legacy Fragments + View- system code so migration can be incremental:

  • Embed Compose in a Fragment — BaseComposeFragment-style wrappers host a Composable inside a Fragment.
  • Implicit Fragment hosts — Google's navigation-fragment-compose library lets you register a pure Composable as a Fragment-nav destination without a dedicated Fragment wrapper class.
  • Gradual graph migration — XML nav graphs and Kotlin-DSL graphs compose via navController.graph.addAll(xmlNavGraph) during the transition.

Each of these is an anticipatory decoupling that lets a team decommission Fragments gradually rather than big-bang-rewriting.

Seen in

  • sources/2026-02-03-instacart-migrating-to-jetpack-compose — canonical wiki instance. Instacart's Caper smart-cart Android app, originally built on Fragments + XML, migrated in a four-phase plan accelerated by AI coding assistants: Phase 1 (implicit Fragment hosts, manual); Phase 2 (type-safe Kotlin-DSL nav, 30+ sub-graphs / 130+ destinations, AI 5–7× faster, 300–350 eng-hours saved); Phase 3 (Fragments → Compose screens, 100+ features, 17-step AI skill with Paparazzi visual-parity checkpoints, progressive- disclosure context-window discipline); Phase 4 (Compose Navigation, in progress, dual-system feature flag). First wiki instance of AI-skill-driven Android UI framework migration. Post names the engineer role shift "from execution to definition and validation."
Last updated · 319 distilled / 1,201 read