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.

Divya Jain

May 12, 2021
Tweet

More Decks by Divya Jain

Other Decks in Technology

Transcript

  1. 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
  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
  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") } ) } }
  4. 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
  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") } ) } }
  6. 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
  7. Unidirectional Data flow Design pattern where state flows down to

    UI and events flow up from UI 9 UI ViewModel State event
  8. 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
  9. 12

  10. MVP Data is communicated back to the view from the

    presenter imperatively, making it nearly impossible to integrate Compose. 16 View Presenter Model
  11. 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
  12. 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