Composing ViewModels Breaking ViewModels into smaller self-contained UI models { } Hakan Bagci hkn-bgc hknbgcdev Micro-Feature Architecture

500K+ Monthly Active Riders 70+ Countries Rider Application

Rider Application - Before Bottom navigation with isolated features

Rider Application - New Design Single shared contextual screen hosting all features

● Keep loose coupling between features/squads/domains ● Foster portability by enabling composition of UIs in any host ● Enable showing UI components that are backed by different data sources ● Enable showing dynamic/contextual content on a single screen Does our current architecture support these requirements? Architecture Requirements

Activity Activity Fragment Fragment Fragment Activity Fragment Fragment Fragment ViewModel ViewModel ViewModel Architecture Review

Activity Fragment ViewModel Activity Fragment ViewModel Fragment ViewModel Fragment ViewModel Fragment ViewModel Fragment ViewModel Architecture Review Is it possible to reuse UI logic from the existing ViewModels?

Is it possible to use existing UI components? Tightly coupled with the host fragment RecyclerView complexity One UI state mapper for whole screen Can we reuse existing domain/data layer? Observable repositories Domain use cases Not written in Compose Architecture Review

Create an isolated screen Implement UI components specific to that screen Create self-contained host-agnostic UI components Compose UIs using these components Micro Features Paradigm Shift

No content

No content

What is a Micro-Feature?

Micro-features Factory APIs Composable UI Model ● Consists of a UI Model and a Composable ● Self-contained, implements its own Unidirectional Data Flow (UDF) ● Provides APIs (factory methods) to create its UI model and composable ● Host agnostic, needs a host to start functioning ● Fosters composition of UI Models and Composables What is a UI Model? How is it different from a ViewModel?

Jetpack ViewModel UI Model Populate and publish state to the UI React to events from UI Persist data through configuration changes Platform independent Have coroutine scope access Easier test setup Hosted by ViewModel Hosted by ViewModel Jetpack ViewModel vs UI Model KMP

Are we getting rid of ViewModels? Idea is to use the powers of ViewModels while keeping our UI models platform independent and lightweight ViewModelScope Configuration Change Survival SavedStateHandle Jetpack ViewModel vs UI Model

Jetpack ViewModel UI Model #1 UI Model #2 UI Model #3 Composing ViewModels ✨ ViewModelScope CoroutineScope CoroutineScope SavedStateHandle SavedStateRepository SavedStateRepository Composing ViewModels

Handle Events Events Map Local Data Source Remote Data Source UI State Composable View UI Model Repository Unidirectional Data Flow

Blueprint of a Micro-feature

Sample Micro-Feature

interface FooUiModel { val uiState: StateFlow val action: ActionHandler fun onGoToBarClicked() interface Factory { fun create( coroutineScope: CoroutineScope, ): FooUiModel } } Micro-feature Sample - Api

sealed class FooUiState { object Unavailable : FooUiState() object Loading : FooUiState() data class Available( val title: String, val description: String, val buttonText: String, ) : FooUiState() } sealed class FooAction { object GoToBar : FooAction() data class ShowError( val message: String, ) : FooAction() } Micro-feature Sample - Api

class FooUiModelImpl @AssistedInject constructor( private val getFooUiState: GetFooUiState, override val action: ActionHandler, @Assisted private val coroutineScope: CoroutineScope, ) : FooUiModel { ... @AssistedFactory interface Factory : FooUiModel.Factory { override fun create( coroutineScope: CoroutineScope, ): FooUiModelImpl } } Micro-feature Sample - Implementation

Micro-feature Sample - Implementation class FooUiModelImpl @AssistedInject constructor(...) : FooUiModel { private val _uiState: MutableStateFlow = MutableStateFlow(Unavailable) override val uiState: StateFlow = _uiState.asStateFlow() init { coroutineScope.launch { getFooUiState().collect { _uiState.value = it } } } override fun onGoToBarClicked() { action.update(FooAction.GoToBar) } ... }

interface FooComposableFactory { fun create(): FooComposable } typealias FooComposable = @Composable ( uiModel: FooUiModel, showSnackbar: (String) -> Unit, ) -> Unit Micro-feature Sample - Api

class FooComposableFactoryImpl @Inject constructor( private val barNavigator: BarNavigator, ) : FooComposableFactory { override fun create(): FooComposable = { uiModel, showSnackbar -> Foo( uiModel = uiModel, onGoToBarClicked = barNavigator::goToBar, showSnackbar = showSnackbar, ) } } Micro-feature Sample - Implementation

@Composable fun Foo( uiModel: FooUiModel, onGoToBarClicked: () -> Unit, showSnackbar: (String) -> Unit, modifier: Modifier = Modifier, ) { ActionHandlerDisposableEffect( actionHandler = uiModel.action, ) { action -> when (action) { FooAction.GoToBar -> onGoToBarClicked() is FooAction.ShowError -> showSnackbar(action.message) } } ... } Micro-feature Sample - Implementation

@Composable fun Foo( ... ) { ... val uiState = uiModel.uiState.collectAsStateWithLifecycle() when (uiState) { is Available -> FooContent( uiState = uiState, onGoToBarClicked = uiModel::onGoToBarClicked, modifier = modifier, ) Unavailable -> Unit Loading -> { // Show loading state } } } Micro-feature Sample - Implementation

@Composable fun FooContent( uiState: FooUiState.Available, onGoToBarClicked: () -> Unit, modifier: Modifier = Modifier, ) { Column { Text(text = uiState.title) Text(text = uiState.description) Button( text = uiState.buttonText, onClick = onGoToBarClicked, ) } } How can we display this micro-feature? Micro-feature Sample - Implementation

● App scaffold is composed of multiple hosts ● Each host uses micro-feature factory APIs to populate its content ● Hosts, as containers, may define rules to layout micro-features Map Floating Layer Bottom Sheet Nest Hosts

class HomeViewModel @Inject constructor( bottomSheetUiModelFactory: BottomSheetUiModel.Factory, mapUiModelFactory: MapUiModel.Factory, floatingLayerUiModelFactory: FloatingLayerUiModel.Factory, ) : ViewModel() { val bottomSheetUiModel = bottomSheetUiModelFactory .create(viewModelScope) val mapUiModel = mapUiModelFactory .create(viewModelScope) val floatingLayerUiModel = floatingLayerUiModelFactory .create(viewModelScope) } Micro-feature Host Integration - UI Model

class BottomSheetUiModelImpl @AssistedInject constructor( fooUiModelFactory: FooUiModel.Factory, barUiModelFactory: BarUiModel.Factory, bazUiModelFactory: BazUiModel.Factory, @Assisted coroutineScope: CoroutineScope, ) : BottomSheetUiModel { override val fooUiModel = fooUiModelFactory .create(coroutineScope) override val barUiModel = barUiModelFactory .create(coroutineScope) override val bazUiModel = bazUiModelFactory .create(coroutineScope) } Micro-feature Host Integration - UI Model

HomeViewModel BottomSheetUiModel FooUiModel MapUiModel FloatingLayerUiModel BarUiModel BazUiModel UI Model Composition Tree

@Composable fun BottomSheetContent( uiModel: BottomSheetUiModel, fooComposableFactory: FooComposableFactory, barComposableFactory: BarComposableFactory, bazComposableFactory: BazComposableFactory, modifier: Modifier = Modifier, showSnackbar: (String) -> Unit, ) { ... } Micro-feature Host Integration - Compose

@Composable fun BottomSheetContent(...) { val foo = remember { fooComposableFactory.create() } val bar = remember { barComposableFactory.create() } val baz = remember { bazComposableFactory.create() } Column(modifier) { foo( uiModel = uiModel.fooUiModel, showSnackbar = showSnackbar, ) bar( uiModel = uiModel.barUiModel, ) baz( uiModel = uiModel.bazUiModel, ) } } Micro-feature Host Integration - Compose

HomeViewModel BottomSheetUiModel FooUiModel MapUiModel FloatingLayerUiModel BarUiModel BazUiModel <> BottomSheetContent <> Foo <> Bar <> Baz HomeActivity Composition Tree

BottomSheetUiModel FooUiModel BarUiModel BazUiModel class BottomSheetUiModelImpl { val fooUiModel: FooUiModel val barUiModel: BarUiModel val bazUiModel: BazUiModel } XUiModel YUiModel class BottomSheetUiModelImpl { val fooUiModel: FooUiModel val barUiModel: BarUiModel val bazUiModel: BazUiModel val xUiModel: XUiModel val yUiModel: YUiModel } Is this solution scalable? Host Configuration

` interface ItemUiModel { val isDisplayable: StateFlow } class BottomSheetUiModelImpl( private val getBottomSheetConfiguration: GetBottomSheetConfiguration, private val coroutineScope: CoroutineScope, ) { init { coroutineScope.launch { getBottomSheetConfiguration().collect(::invalidateItems) } } private fun invalidateItems(configuration: Configuration) { // unregister items from old configuration // register items from new configuration } } class Configuration( val items: List, ) Host Configuration

Configuration2 Configuration1 BottomSheetUiModel FooUiModel BarUiModel BazUiModel XUiModel YUiModel ⚡ Context Changed Configuration1 Configuration2 ⚡ Context Changed BarUiModel BazUiModel FooUiModel XUiModel YUiModel Host Configuration

Aspects of Micro-Features

Home BottomSheet Foo Map FloatingLayer Bar Baz ⚡ Context Changed Nest Bar Baz X Y Portability (Plug-and-Play)

HomeViewModel BottomSheetUiModel FooUiModel MapUiModel FloatingLayerUiModel BarUiModel BazUiModel KMP KMP KMP KMP KMP KMP iOS Multiplatform - UI Model

Micro-Feature Micro-Feature Micro-Feature Configuration Host ⚡ Context Changed Repository Component Config Remote Layout Config Server Driven UI

Unit Testing Screenshot Testing Integration Testing E2E Micro-Feature UiModels Micro-Feature Composables Micro-Feature Composables Host Micro-Feature Micro-Feature Interactive Snapshot UI Logic UI Flows Scope Testing Micro-features

Learnings Do not over split micro-features Avoid deep UI model hierarchies Avoid high coupling with hosts

>75 Micro-Features 6 Hosts 7 Cross-Functional Teams ~30 Mobile Engineers

Thank You hkn-bgc hknbgcdev