Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Clean Architecture with Jetpack Compose

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.

Ac5b39a4b12e8ca2d6e25b9e7cc142ae?s=128

Divya Jain

May 12, 2021
Tweet

Transcript

  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
  8. None
  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

  12. 12

  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