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.

Transcript

1. Clean Architecture
   with Jetpack
   Compose
   Divya Jain
   divyajain2405
   

   View 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 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 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 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 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 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 Slide

8. View Slide

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

   View Slide

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
    

    View Slide

11. 11
    View
    View
    ViewModel
    Model
    Event
    Event
    State
    

    View Slide

12. View Slide

13. Kotlin stateflow
    13
    

    View Slide

14. 14
    Adopt-Happily
    

    View Slide

15. 15
    Adopt-Happily
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

20. 20
    Thanks!
    Any questions?
    You can find me at @divyajain2405 on Twitter, or
    email me at divyajain2405@gmail.com
    

    View Slide