Clean Architecture with Jetpack Compose Divya Jain divyajain2405

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

“ Jetpack Compose provides a declarative API that allows you to render app UI without imperatively mutating front end views making it easier & faster. 3

@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") } ) } }

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

@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") } ) } }

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

No content

Unidirectional Data flow Design pattern where state flows down to UI and events flow up from UI 9 UI ViewModel State event

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 View View ViewModel Model Event Event State

12

Kotlin stateflow 13

14 Adopt-Happily

15 Adopt-Happily

MVP Data is communicated back to the view from the presenter imperatively, making it nearly impossible to integrate Compose. 16 View Presenter Model

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

Compose with MVVM & MVI? https:/ /codingtroops.com/android/compose-architectur e-part-1-mvvm-or-mvi-architecture-with-flow/ 18

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 Thanks! Any questions? You can find me at @divyajain2405 on Twitter, or email me at divyajain2405@gmail.com