MVI-JetpackCompose-Github
MVI-JetpackCompose-Github copied to clipboard
Simple demo to use jetpack compose with MVI architecture with clean way.
GithubCompose (Jetpack Compose + MVI)
GithubCompose is an exemplary project showcasing a contemporary approach to Android app development. It skillfully merges popular Android tools and exemplifies best development practices by incorporating cutting-edge technologies such as Compose, Kotlin Flow, and Koin.
The sample app presents a modern Android application architecture, emphasizing scalability and maintainability through the implementation of MVI (Model-View-Intent).
Description
-
UI
- Compose declarative UI framework
- Material design
-
Tech/Tools
- Kotlin 100% coverage
- Coroutines and Flow for async operations
- Koin for dependency injection
-
Jetpack
- Compose
- Navigation for navigation between composables
- ViewModel that stores, exposes and manages UI state
- Retrofit for networking
- Coil for image loading
-
Modern Architecture
- Single activity architecture (with Navigation component) that defines navigation graphs
- MVI
- Android Architecture components (ViewModel, Navigation)
- Android KTX - Jetpack Kotlin extensions
Light and Dark mode
Dark Theme UI | Light Theme UI |
---|---|
Architecture
The project's architecture follows a clear division of responsibilities between its View, Presentation, and Model components, thoughtfully implementing the Model-View-Intent (MVI) pattern in conjunction with the powerful features of Jetpack Compose.
Architecture layers:
- View - Composable screens that consume state, apply effects and delegate events.
- ViewModel - that manages and reduces the state of the corresponding screen. Additionally, it intercepts UI events and produces side-effects. The ViewModel lifecycle scope is tied to the corresponding screen composable.
- Model - Repository classes that retrieve data. In a clean architecture context, one should use use-cases that tap into repositories.
There are a three core components described:
-
State - data class that holds the state content of the corresponding screen e.g. list of
User
, loading status etc. The state is exposed as a Compose runtimeMutableState
object from that perfectly matches the use-case of receiving continuous updates with initial value. -
Event - plain object that is sent through callbacks from the UI to the presentation layer. Events should reflect UI events caused by the user. Event updates are exposed as a
MutableSharedFlow
type which is similar toStateFlow
and that behaves as in the absence of a subscriber, any posted event will be immediately dropped. -
Effect - plain object that signals one-time side-effect actions that should impact the UI e.g. triggering a navigation action, showing a Toast, SnackBar etc. Effects are exposed as
ChannelFlow
which behave as in each event is delivered to a single subscriber. An attempt to post an event without subscribers will suspend as soon as the channel buffer becomes full, waiting for a subscriber to appear.
Every screen/flow defines its own contract class that states all corresponding core components described above: state content, events and effects.