Clean Architecture with Jetpack Compose

A talk that I gave for GDG UKI & Droidcon Online , describes how Android Architecture patterns transcribe to the Jetpack Compose paradigm.

1. Clean Architecture with Jetpack Compose Divya Jain divyajain2405
2. Android App Architecture ▫ Android Architecture Components ▫ MVVM, MVP, MVI etc buzz words ▫ Separation of concerns ▫ Test-ability ▫ Loose coupling Robust, Testable, Maintainable & Scalable Apps 2
3. “ Jetpack Compose provides a declarative API that allows you to render app UI without imperatively mutating front end views making it easier & faster. 3
4. @Composable fun TextSample() { Column(modifier = Modifier.padding(16.dp)) { var textValue by rememberSaveable { mutableStateOf("") } if (textValue.isNotEmpty()) { Text( text = "Text entered is: $textValue!", fontSize = 30.sp, modifier = Modifier.padding(bottom = 16.dp), ) } TextField( value = textValue, onValueChange = { textValue = it }, label = { Text("TextValue") } ) } }
5. Important terms to remember ▫ Composition : creation of the UI described by composable functions ▫ Recomposition: Re-running composables to update composition when there is a data change 5
6. @Composable fun TextSample() { Column(modifier = Modifier.padding(16.dp)) { var textValue by rememberSaveable { mutableStateOf("") } if (textValue.isNotEmpty()) { Text( text = "Text entered is: $textValue!", fontSize = 30.sp, modifier = Modifier.padding(bottom = 16.dp), ) } TextField( value = textValue, onValueChange = { textValue = it }, label = { Text("TextValue") } ) } }
7. State Hoisting Extract the state from the composable, move it to the caller of the composable & pass it to the composable as an immutable parameter, along with functions as parameters to represent events. 7
9. Unidirectional Data flow Design pattern where state flows down to UI and events flow up from UI 9 UI ViewModel State event
10. Key things to remember ▫ Composable functions can execute in random order or parallelly ▫ Compose does intelligent recomposition & skips as much as possible ▫ Recomposition can be canceled & restarted OR might run very frequently 10
11. 11 View View ViewModel Model Event Event State
13. Kotlin stateflow 13
14. 14 Adopt-Happily
15. 15 Adopt-Happily
16. MVP Data is communicated back to the view from the presenter imperatively, making it nearly impossible to integrate Compose. 16 View Presenter Model
17. MVI Model is the immutable state-single source of truth, consumed by the UI to be rendered; And View generates UI events which passes intent as actions to manipulate model. 17 View Intent Model Ui Events Action to mutate state
18. Compose with MVVM & MVI? https:/ /codingtroops.com/android/compose-architectur e-part-1-mvvm-or-mvi-architecture-with-flow/ 18
19. Conclusion ▫ UI in Compose is immutable. ▫ It only accepts state & expose events ▫ Unidirectional data flow pattern like MVVM fits well ▫ Using ViewModel as state holder ensures clean architecture & intelligent efficient recomposition. 19
20. 20 Thanks! Any questions? You can find me at @divyajain2405 on Twitter, or email me at divyajain2405@gmail.com