Architectural Pattern for Large-Scale Jetpack Compose Apps

Jetpack Compose is a powerful tool that can help app developers build apps in a far more dynamic, complex, and polished way. In this talk, you’ll learn how to simplify building big apps with Jetpack Compose! We'll explore the best ways to structure your app using architectural patterns. Find out which pattern suits your project, and how to make your app perform well. It's all about managing complexity and making your app development easier using different architectural patterns.

My agenda for the talk includes:

1. Introduction to problems in Large-Scale Jetpack Compose Apps
2. The Importance of Architectural Patterns
3. Common Architectural Patterns and their differences - MVC, MVP, MVVM, MVI
4. Choosing the Right Pattern
5. Implementing the Chosen Pattern

By following these strategies, you can make app development easier and handle complex tasks more efficiently. When you combine Jetpack Compose with the right architectural pattern, creating strong, fast-performing apps becomes simpler and more rewarding.

Transcript

1. Architectural Patterns for Large-Scale Jetpack Compose Apps. Ahmedabad
2. Ahmedabad Who Am I? 󰟲 • Android Developer • Technical Author in DroidCon Academy • Technical Blogger : Medium @bhoomigadhiya • Technical Speaker in community • Empowering Women In Tech
3. Architecture Patterns Jetpack Compose Large-Scale apps
4. Jetpack Compose Ahmedabad
5. Jetpack Compose Features • Declarative UI • Reactive UI • Kotlin-Based • State Management
6. What About The Real-World? Ahmedabad
7. Reference: developer.android.com/jetpack/compose/adopt
9. What is Architectural Pattern? Ahmedabad
10. Architectural Patterns Separation Of Concern No Hard Dependency
11. Architectural Patterns • MVC • MVP • MVVM • MVI • And many more... On Column Title
12. MVC (Model-View-Controller) Model View Controller
13. Model View Presenter Interface MVP (Model-View-Presenter)
14. ViewModel Model MVVM (Model-View-ViewModel) View Observables
15. View ViewModel Model
16. MVVM • View Notifies the ViewModel about different actions • View has reference to the ViewModel but ViewModel has NO information about View! • The Consumer(View) of the data should know about the producer(ViewModel), but producer doesn’t care, who consumes the data!
17. ViewModel class MyViewModel : ViewModel() { private val _items = MutableLiveData<List<MyItem/>() val items: LiveData<List<MyItem/> get() = _items init { fetchItems() } private fun fetchItems() { viewModelScope.launch { delay(2000) //Network call _items.value = generateItemList() } } }
18. View @Composable fun MyComposable(viewModel: MyViewModel) { val items by viewModel.items.observeAsState(emptyList()) LazyColumn { items.forEach { item -> item { Text(text = item.name) } } } }
19. MVVM class MyViewModel : ViewModel() { // Different LiveData for representing different UI states private val _isLoading = MutableLiveData<Boolean>() val isLoading: LiveData<Boolean> get() = _isLoading private val _contentData = MutableLiveData<String>() val contentData: LiveData<String> get() = _contentData private val _errorData = MutableLiveData<String>() val errorData: LiveData<String> get() = _errorData }
20. MVI (Model-View-Intent) Model Intent View User triggers an action Send Intent to Model View observes State Display States
21. sealed class MyViewState { object Loading(val isLoading: Boolean) : MyViewState() data class Content(val contentData: String) : MyViewState() data class Error(val errorData: String) : MyViewState() } MVI (Model-View-Intent)
22. Architectural Pattern + Jetpack Compose Ahmedabad
23. MVC + Jetpack Compose
24. MVP + Jetpack Compose
25. MVVM + Jetpack Compose
26. MVVM + Compose • Reactive and declarative UI • Jetpack integration • State Management • Easy migration
27. MVI + Jetpack Compose
28. MVI + Compose • Unidirectional Data Flow • Immutable State • Reactive and declarative UI
29. Best for Large-scale app?
31. Problems while implementing these patterns Ahmedabad
32. Problems • Unnecessary Recomposition
34. Use remember class MyViewModel : ViewModel() { private val _cachedResult = mutableStateOf("Initial Value") val cachedResult: State<String> get() = _cachedResult fun heavyCalculation() { val result = //some heavy operation _cachedResult.value = result } }
35. Use remember class MyViewModel : ViewModel() { private val _cachedResult = mutableStateOf("Initial Value") val cachedResult: State<String> get() = _cachedResult fun heavyCalculation() { val result = //some heavy operation _cachedResult.value = result } }
36. Use remember @Composable fun MyComposable(viewModel: MyViewModel) { val cachedResult by remember { viewModel.cachedResult } Column{ Button(onClick = { viewModel.heavyCalculation() }) { Text("Calculate Result") } Text(text = "Cached Result: $cachedResult") } }
37. Use remember @Composable fun MyComposable(viewModel: MyViewModel) { val cachedResult by remember { viewModel.cachedResult } Column{ Button(onClick = { viewModel.heavyCalculation() }) { Text("Calculate Result") } Text(text = "Cached Result: $cachedResult") } }
38. Use Side Effects class MyViewModel : ViewModel() { private val _result = MutableLiveData<String>() val result: LiveData<String> get() = _result fun performAsyncOperation() { viewModelScope.launch { // Asynchronous operation delay(2000) _result.value = "Async operation completed: ${System.currentTimeMillis()}" } } }
39. Use Side Effects class MyViewModel : ViewModel() { private val _result = MutableLiveData<String>() val result: LiveData<String> get() = _result fun performAsyncOperation() { viewModelScope.launch { // Asynchronous operation delay(2000) _result.value = "Async operation completed: ${System.currentTimeMillis()}" } } }
40. Use Side Effects @Composable fun MyComposable(viewModel: MyViewModel) { val result by viewModel.result.observeAsState() // Trigger asynchronous operation when needed LaunchedEffect(result) { viewModel.performAsyncOperation() } Text(text = result /: "Loading//.") }
41. Use Side Effects @Composable fun MyComposable(viewModel: MyViewModel) { val result by viewModel.result.observeAsState() // Trigger asynchronous operation when needed LaunchedEffect(result) { viewModel.performAsyncOperation() } Text(text = result /: "Loading//.") }
42. Lazy Loading Without Key LazyColumn { items(items.size) { //content } } LazyColumn { items(items.size, key = { it }) { //content } } Lazy Loading With Key
43. Lazy Loading Without Key LazyColumn { items(items.size) { //content } } LazyColumn { items(items.size, key = { it }) { //content } } Lazy Loading With Key
44. Problems • Unnecessary Recomposition • State hoisting issues
45. Where to hoist the state?
46. For UI-Specific State: @Composable fun MyComposable() { var isExpanded by remember { mutableStateOf(false) } // Use isExpanded locally within this composable }
47. For Business Logic & Data Management: class MyViewModel : ViewModel() { private val _items = mutableStateOf<List<String/>(emptyList()) val items: State<List<String/> get() = _items // Business logic to update items fun updateItems(newItems: List<String>) { _items.value = newItems } }
48. Problems • Unnecessary Recomposition • State hoisting issues • Inefficient state management
49. @Composable fun MyComposable(viewModel: MyViewModel) { val items by remember { mutableStateOf(listOf( //items ))} LazyColumn { //show the items } Button { //Add the item } } Avoid using MutableStateOf
50. @Composable fun MyComposable(viewModel: MyViewModel) { val items by remember { mutableStateOf(listOf( //items ))} LazyColumn { //show the items } Button { //Add the item } } Avoid using MutableStateOf
51. @Composable fun MyComposable(viewModel: MyViewModel) { val items by viewModel.items.collectAsState() // Observe state changes LazyColumn { //show the items } Button { //Add the item } } Instead, use ViewModel
52. @Composable fun MyComposable(viewModel: MyViewModel) { val items by viewModel.items.collectAsState() // Observe state changes LazyColumn { //show the items } Button { //Add the item } } Instead, use ViewModel
53. class MyViewModel : ViewModel() { val item = MutableLiveData(MyItem(1,"Item 1")) ////. } @Composable fun MyComposable(viewModel: MyViewModel) { val item = viewModel.item //Direct access to LiveData Text(item.value/!.name) //Accessing LiveData value directly ////. } Avoid direct ViewModel access from Composable
54. class MyViewModel : ViewModel() { val item = MutableLiveData(MyItem(1,"Item 1")) ////. } @Composable fun MyComposable(viewModel: MyViewModel) { val item = viewModel.item //Direct access to LiveData Text(item.value/!.name) //Accessing LiveData value directly ////. } Avoid direct ViewModel access from Composable
55. class MyViewModel : ViewModel() { private val _item = MutableLiveData(MyItem(1,"Item 1")) val item : LiveData<MyItem> get() = _item } @Composable fun MyComposable(viewModel: MyViewModel) { val item by viewModel.item.observeAsState() // Observe state changes Text(item.name) } Instead, observe state changes
56. class MyViewModel : ViewModel() { private val _item = MutableLiveData(MyItem(1,"Item 1")) val item : LiveData<MyItem> get() = _item } @Composable fun MyComposable(viewModel: MyViewModel) { val item by viewModel.item.observeAsState() // Observe state changes Text(item.name) } Instead, observe state changes
57. The choice is yours!
58. Ahmedabad Resources • https://developer.android.com/jetpack/compose/performance/be stpractices • https://www.youtube.com/watch?v=cnU2zMnmmpg • https://www.youtube.com/watch?v=97BRLkicQd0 • https://speakerdeck.com/bkinya/modern-android-development-us ing-mvi-architecture • https://speakerdeck.com/lupsyn/mvvm-compose-utp-a-killer-com bination-for-successful-deliveries
59. Ahmedabad Thank you!
60. @bhoomigadhiya