DEV Community

Marlon López
Marlon López

Posted on

Eleva tu app Android: patrones de arquitectura con Jetpack Compose

#android #architecture #kotlin

📱 ¿A qué llamamos los patrones de arquitecturas Android?

Son formas recomendadas de organizar el código de una app Android para que sea:

  • Más mantenible
  • Más escalable
  • Más testeable
  • Más fácil de entender en equipo

Con Kotlin + Jetpack Compose, Google promueve arquitecturas reactivas y unidireccionales.

🧩 Componentes clave con Jetpack Compose

Antes de los patrones, es importante entender los roles principales:

1. UI (Compose)

  • Funciones @Composable
  • Solo muestran el estado
  • No contienen lógica de negocio
  • Reaccionan a cambios de estado 
@Composable
fun HomeScreen(state: HomeState) {
    Text(text = state.title)
}
Enter fullscreen mode Exit fullscreen mode

2. ViewModel

  • Maneja el estado de la UI
  • Contiene la lógica de presentación
  • Sobrevive a cambios de configuración
  • Expone StateFlow o LiveData 
class HomeViewModel : ViewModel() {
    private val _state = MutableStateFlow(HomeState())
    val state = _state.asStateFlow()
}
Enter fullscreen mode Exit fullscreen mode

3. Domain / Business Logic

  • Reglas de negocio
  • Casos de uso (UseCases)
  • Independiente de Android

4. Data Layer

  • Repositorios
  • APIs (Retrofit)
  • Base de datos (Room)

🏗️ Patrones de arquitectura más usados

🔹 1. MVVM (Model–View–ViewModel) ⭐⭐⭐⭐⭐

El más usado y recomendado con Compose

Estructura 

UI (Compose)
   ↓
ViewModel
   ↓
Repository
   ↓
Data Source (API / DB)
Enter fullscreen mode Exit fullscreen mode

Flujo de datos (unidireccional) 

User Action → ViewModel → State → UI
Enter fullscreen mode Exit fullscreen mode

Ejemplo simple 

@Composable
fun HomeScreen(viewModel: HomeViewModel = viewModel()) {
    val state by viewModel.state.collectAsState()

    Button(onClick = { viewModel.loadData() }) {
        Text("Cargar")
    }
}
Enter fullscreen mode Exit fullscreen mode

Ventajas:

  • Separación clara de responsabilidades
  • Fácil testing
  • Ideal para Compose

🔹 2. MVI (Model–View–Intent) ⭐⭐⭐⭐

Muy popular en apps grandes

Conceptos clave

  • Intent: acción del usuario
  • State: estado completo de la pantalla
  • Reducer: transforma el estado

Flujo 

Intent → ViewModel → Reducer → New State → UI
Enter fullscreen mode Exit fullscreen mode

Ejemplo conceptual 

sealed class HomeIntent {
    object LoadData : HomeIntent()
}

data class HomeState(val loading: Boolean = false)
Enter fullscreen mode Exit fullscreen mode

Ventajas:

  • Estado inmutable
  • Flujo predecible
  • Ideal para UIs complejas

Desventajas:

  • Más código y complejidad

🔹 3. Clean Architecture con Compose ⭐⭐⭐⭐⭐

No es un patrón UI, sino una arquitectura completa

Capas 

Presentation (Compose + ViewModel)
Domain (UseCases)
Data (Repository, API, DB)
Enter fullscreen mode Exit fullscreen mode

Reglas

  • Las capas internas no dependen de las externas
  • UI no conoce detalles de datos

Ventajas:

  • Escalable
  • Muy testeable
  • Ideal para proyectos grandes

🧠 Recomendación oficial de Google

  • MVVM + Unidirectional Data Flow + StateFlow + Jetpack Compose
  • ViewModel como fuente única de estado
  • Compose solo observa y renderiza
  • Estado inmutable
  • Eventos separados del estado

🔁 Unidirectional Data Flow (UDF) 

Event → ViewModel → State → Compose UI
Enter fullscreen mode Exit fullscreen mode

Esto evita bugs y hace la UI predecible.

📌 ¿Cuál usar?

Proyecto Recomendación
App pequeña MVVM
App mediana MVVM + Clean
App grande MVI + Clean
UI compleja MVI

✅ Conclusión

  • Jetpack Compose cambia la forma de pensar la UI
  • MVVM sigue siendo la base
  • El estado es el corazón de la app
  • Flujo unidireccional = menos errores

🔹 Referencias

Top comments (0)