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

Architecting Compose UI, A Deep Dive

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.

Beatrice Kinya

May 24, 2023

More Decks by Beatrice Kinya

Other Decks in Technology


  1. 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.
  2. 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.
  3. 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.
  4. 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
  5. 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
  6. 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.
  7. 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.