Scaling Navigation trong Jetpack Compose: từ app nhỏ đến production thực tế

Navigation trong Jetpack Compose lúc mới bắt đầu thì khá đơn giản.

Nhưng khi app lớn dần (multi-module, nhiều flow, nhiều entry point), nếu không thiết kế từ đầu, bạn sẽ rất dễ rơi vào tình trạng:

• Navigation rối
• Khó maintain
• Khó test

Bài viết này đi từ basic đến architecture thực tế, giúp bạn scale navigation đúng cách.

Navigation trong Compose thực chất là gì?

Ở mức cơ bản, Navigation trong Compose gồm:

• NavController: quản lý điều hướng và back stack
• NavHost: container chứa các màn hình
• composable(route): định nghĩa destination

Đây là nền tảng chính để điều hướng giữa các màn hình.

Giai đoạn 1 – App nhỏ (simple navigation)

Ở app đơn giản, bạn thường làm kiểu này:

NavHost(navController, startDestination = "home") {
 composable("home") { HomeScreen() }
 composable("detail") { DetailScreen() }
}

Mọi thứ hoạt động tốt, dễ hiểu và dễ debug.

Nhưng…

Vấn đề bắt đầu xuất hiện khi app lớn dần

Khi app scale lên, bạn sẽ gặp:

• Route string hardcode khắp nơi
• Khó truyền dữ liệu phức tạp
• Navigation logic bị rải rác
• Khó reuse screen

Đây là lúc cần chuyển sang architecture rõ ràng hơn.

Giai đoạn 2 – Tách Navigation thành layer riêng

Một nguyên tắc quan trọng:

Navigation không nên nằm trực tiếp trong UI.

Thay vì:

navController.navigate("detail/$id")

Bạn nên:

• Tạo class định nghĩa route
• Centralize navigation logic

Ví dụ:

sealed class Screen(val route: String) {
 object Home : Screen("home")
 object Detail : Screen("detail/{id}")
}

Lợi ích:

• Type-safe hơn
• Tránh typo
• Dễ maintain

Giai đoạn 3 – Event-based navigation

Một sai lầm phổ biến:

Truyền NavController vào ViewModel

Cách tốt hơn:

ViewModel chỉ emit event:

sealed class UiEvent {
 data class Navigate(val route: String) : UiEvent()
}

UI layer sẽ handle:

LaunchedEffect(Unit) {
 viewModel.events.collect { event ->
 when (event) {
 is UiEvent.Navigate -> navController.navigate(event.route)
 }
 }
}

Ưu điểm:

• Tách biệt rõ ràng UI và logic
• Dễ test
• Không leak context

Giai đoạn 4 – Modular navigation (chuẩn production)

Khi app lớn (multi-module):

Mỗi feature nên có:

• Navigation graph riêng
• Route riêng
• Entry point rõ ràng

Ví dụ:

fun NavGraphBuilder.authGraph(navController: NavController) {
 composable("login") { LoginScreen() }
 composable("register") { RegisterScreen() }
}

Sau đó combine:

NavHost(navController, startDestination = "auth") {
 authGraph(navController)
 mainGraph(navController)
}

Lợi ích:

• Scale tốt
• Team làm song song được
• Không conflict

Deep Link và navigation nâng cao

Compose Navigation hỗ trợ:

• Deep link từ URL
• Nested navigation graph
• Adaptive navigation UI

Ví dụ:

composable(
 route = "profile/{id}",
 deepLinks = listOf(
 navDeepLink { uriPattern = "https://example.com/profile/{id}" }
 )
) { ... }

Cho phép mở app từ link bên ngoài.

Nguyên tắc quan trọng khi scale navigation

1. Không hardcode route
2. Không để ViewModel giữ NavController
3. Tách navigation theo feature
4. Luôn nghĩ đến testability

Một insight quan trọng

Navigation không chỉ là UI.

Nó chính là flow của business logic.

Ví dụ:

• User login xong đi đâu
• User chưa onboard thì xử lý thế nào

Đây là logic cấp ứng dụng, không phải UI thuần.

Tổng kết

Scaling navigation trong Compose thường đi qua các bước:

1. Basic NavHost
2. Tách route và structure
3. Event-based navigation
4. Modular architecture

Nếu làm đúng từ đầu:

• Code sạch hơn
• Dễ maintain
• Scale tốt hơn

Kết luận

Navigation trong Compose không khó.

Nhưng nếu không thiết kế sớm, nó sẽ nhanh chóng trở thành phần khó kiểm soát nhất trong app.