Architecting Compose UI, A Deep Dive

Compose is declarative. In compose the UI is immutable. You cannot update it once it has been drawn. When the state changes, Compose recreates
parts of the UI that have changed.

Composable functions can accept state and expose events. The events update state. Hence, a Unidirectional Data Flow(UDF) pattern is appropriate
when using Jetpack Compose.

In UDF, data flows down while events flow up. This enables separating composables that display state in the UI from part of code that store and change state.

In this project, I have used an MVI approach, sealed interfaces to create exhaustive UI states, and `SharedFlow` to create a stream of events.

Transcript

1. Beatrice Kinya
   Android Engineer @ Kyosk Digital
   Android Author @ kodeco.com
   @B__Kinya | Beatrice Kinya
   

   View Slide

2. Architecture
   Jetpack Compose UI
   

   View Slide

3. MVVM
   

   View Slide

4. MVVM
   - ViewModel
   

   View Slide

5. MVVM
   - Activity/Fragment
   

   View Slide

6. Jetpack Compose
   - Compose is declarative.
   - Compose UI is immutable.
   - Composable functions accept state, and expose events to update state.
   - When state changes, compose recreates parts of the UI that has changed
   with the new state.
   

   View Slide

7. Unidirectional Data Flow(UDF)
   - - Since composables accept state, and
   expose events, UDF patten suits
   Compose UI.
   - In UDF, state flows down and events
   flows up.
   - UDF pattern allows separating the
   composables that display state in the UI,
   from part of code that store and change
   state.
   - Single source of truth.
   

   View Slide

8. Modelling UI State
   - Make state exhaustive
   - Use sealed class or sealed interface
   

   View Slide

9. Modelling UI State
   - sealed class or sealed interface allows for exhaustive evaluation
   in the UI.
   

   View Slide

10. Modelling UI State: More than one state?🤔
    - Exhaustive states
    - Verbosity ✅
    

    View Slide

11. Modelling UI State: Single Live Events
    - Events will be observed only once.
    - No events can override unobserved events
    - If there is no observer, events must buffer until an observer starts to
    consume them
    - The view may have important lifecycle states only during which it can
    observer events safely. Therefore, the observer may not always be active
    or consuming the events at the given moment.
    

    View Slide

12. Single Live Events
    - Use kotlin Channel to handle events that must be processed only once.
    - More about single live events: Sending ViewModel Events to The UI in
    Android
    

    View Slide

13. Events/UI actions
    - Composable expose events to update state.
    - Use kotlin SharedFlow or Channel to create a stream of events.
    - Check Kotlin docs to learn more about SharedFlow and Channel
    

    View Slide

14. Navigation
    - Options
    1. Make navigation part of UI state
    - State should hold data that is displayed on the UI
    2. Handle it as a Side effect
    - Side effects updates the state of your app. They include fetching data
    from either local or remote datasources, remote logging etc.
    3. Preference: Call navigation from the UI.
    

    View Slide

15. A little code!
    

    View Slide

16. Composable Lifecycle
    

    View Slide

17. Composable Lifecycle
    - Composition is a tree-structure of composables that describe your UI
    - When a composable functions executes for the first time, they enter the
    composition.
    - Recomposition is calling the composable functions again when input
    change, with the new value.
    - Compose will avoid calling a composable if the input has not changes.
    smart recomposition
    - When a composable is no longer invoked, it leaves composition.
    

    View Slide

18. Questions
    

    View Slide