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. Clean Architecture
    with Jetpack
    Compose
    Divya Jain
    divyajain2405

    View full-size slide

  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

    View full-size slide


  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  9. 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

    View full-size slide

  10. 11
    View
    View
    ViewModel
    Model
    Event
    Event
    State

    View full-size slide

  11. Kotlin stateflow
    13

    View full-size slide

  12. 14
    Adopt-Happily

    View full-size slide

  13. 15
    Adopt-Happily

    View full-size slide

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

    View full-size slide

  15. 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

    View full-size slide

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

    View full-size slide

  17. 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

    View full-size slide

  18. 20
    Thanks!
    Any questions?
    You can find me at @divyajain2405 on Twitter, or
    email me at [email protected]

    View full-size slide