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.
Android Engineer @ Kyosk Digital
Android Author @ kodeco.com
@B__Kinya | Beatrice Kinya
Jetpack Compose UI
- 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.
Unidirectional Data Flow(UDF)
- - Since composables accept state, and
expose events, UDF patten suits
- In UDF, state ﬂows down and events
- UDF pattern allows separating the
composables that display state in the UI,
from part of code that store and change
- Single source of truth.
Modelling UI State
- Make state exhaustive
- Use sealed class or sealed interface
Modelling UI State
- sealed class or sealed interface allows for exhaustive evaluation
in the UI.
Modelling UI State: More than one state?🤔
- Exhaustive states
- Verbosity ✅
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 buﬀer until an observer starts to
- 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.
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
- 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
1. Make navigation part of UI state
- State should hold data that is displayed on the UI
2. Handle it as a Side eﬀect
- Side eﬀects 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.
A little code!
- Composition is a tree-structure of composables that describe your UI
- When a composable functions executes for the ﬁrst time, they enter the
- 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.
- When a composable is no longer invoked, it leaves composition.