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
2. Architecture Jetpack Compose UI
3. MVVM
4. MVVM - ViewModel
5. MVVM - Activity/Fragment
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.
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.
8. Modelling UI State - Make state exhaustive - Use sealed class or sealed interface
9. Modelling UI State - sealed class or sealed interface allows for exhaustive evaluation in the UI.
10. Modelling UI State: More than one state?🤔 - Exhaustive states - Verbosity ✅
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.
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
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
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.
15. A little code!
16. Composable Lifecycle
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.
18. Questions