Managing State Beyond ViewModels and Hilt (Updated)

Old architecture - Bottlenecks
● Driven by Android and its window management and not by business logic
● Diﬀerent lifecycles with diﬀerent teardown hooks
● Custom lifecycles like user scope adjacent
● Coroutine scopes provided by Android components

View Slide

Old architecture - Lifecycle
Lifecycle managed by us
Lifecycle managed by Android
Business Logic
UI rendering
Activity Fragment
ViewModel ViewModel
flow: Flow
operation()
flow: Flow
operation()
Service objects

View Slide

class RouteViewModel : ViewModel() {
fun sendRequest() {
viewModelScope.launch {
httpClient.post(request)
}
}
}

View Slide

fun sendRequest() {
}
}
}

View Slide

class Application : Context {
open fun onCreate() = Unit
}
class Activity : Context {
open fun onCreate(..) = Unit
open fun onDestroy() = Unit
}
class Fragment {
}
class ViewModel {
open fun onCleared() = Unit
}

View Slide

interface Application.ActivityLifecycleCallbacks {
...
}
interface DefaultLifecycleObserver {
...
}

View Slide

Old architecture - Without unidirectional dataﬂow
● Challenges synchronizing multiple screens
● No holistic overview of the state of the application
● Way too easy to mix business logic with UI code
● Many services pushed into application scope

View Slide

Business Logic
UI rendering
Activity Fragment
ViewModel ViewModel
flow: Flow
operation()
flow: Flow
operation()
Service objects

View Slide

ViewModel
Activity
operation1()
operation2()
operation3()
flow1: Flow
flow2: Flow
flow3: Flow

View Slide

Old architecture - Anti-pattern
class AmazonApplication : Application() {
@Inject lateinit var routingRepository: RoutingRepository
@Inject lateinit var locationProvider: LocationProvider
override fun onCreate() {
super.onCreate()
routingRepository.initialize()
locationProvider.initialize()
}
}

View Slide

interface RoutingRepository {
fun initialize()
suspend fun loadRoute (): Route
}

View Slide

class AmazonRoutingRepository @Inject constructor(
@IODispatcher dispatcher: CoroutineDispatcher
) : RoutingRepository {
private val coroutineScope = CoroutineScope(dispatcher)
override fun initialize() {
coroutineScope.launch {
// Initialize
}
}
override suspend fun loadRoute(): Route = ...
}

View Slide

// Initialize
}
}
}

View Slide

class FakeRoutingRepository @Inject constructor() : RoutingRepository {
override fun initialize() = Unit
}

View Slide

Old architecture - Hilt
● Strong coupling to Android components
● Custom components with limitations

View Slide

Old architecture - Hilt

View Slide

Goals

View Slide

Goals
● Strongly decouple business logic from Android lifecycle
● Features are device agnostic
● Avoid thread and memory leaks

View Slide

Design principles - Modular design

View Slide

Design principles - Modular design
super.onCreate()
}
}

View Slide

Design principles - Composition over inheritance

View Slide

Design principles - Composition over inheritance
AppCompatActivity
BaseActivity
InfoActivity
ViewModel
BaseViewModel
InfoViewModel

View Slide

Design principles - Dependency inversion by default

View Slide

fun initialize()
}
class AmazonRoutingRepository @Inject constructor() : RoutingRepository {
override fun initialize() = ...
}

View Slide

fun initialize()
}
}

View Slide

Design principles - Inject dependencies

View Slide

// Initialize
}
}
}

View Slide

// Initialize
}
}
}

View Slide

Design principles - Unidirectional dataﬂow to drive UI

View Slide

Design principles - Unidirectional dataﬂow to drive UI
ViewModel
Activity
operation1()
operation2()
operation3()
flow1: Flow
flow2: Flow
flow3: Flow

View Slide

From Hilt to Anvil

View Slide

From Hilt to Anvil
https://www.droidcon.com/2022/06/28/dagger-anvil-learning-to-love-dependency-injection/

View Slide

From Hilt to Anvil
@Module
@ContributesTo(AppScope::class)
object RouteModule
@Module
@ContributesTo(AppScope::class, replaces = [RouteModule::class])
object TestRouteModule

View Slide

From Hilt to Anvil
}
@ContributesBinding(scope = AppScope::class)
}

View Slide

From Hilt to Anvil
}
@ContributesBinding(scope = AppScope::class)
}

View Slide

From Hilt to Anvil
@Module
@InstallIn(ActivityComponent::class)
@ContributesTo(ActivityScope::class)
class RouteModule

View Slide

From Hilt to Anvil
@ApplicationContext context: Context
application: Application
) : RoutingRepository

View Slide

From Hilt to Anvil
@Binds
abstract fun bindRoutingRepository(
repository: AmazonRoutingRepository
): RoutingRepository
@ContributesBinding(AppScope::class)
) : RoutingRepository

View Slide

From Hilt to Anvil
lateinit var component: AppComponent
super.onCreate()
component = DaggerAppComponent.factory().create(applicationContext = this)
component.inject(this)
}
}

View Slide

From Hilt to Anvil
class OpenSourceActivity : Activity() {
private val viewModelFactory by viewModels()
private val viewModel by viewModels { viewModelFactory }
...
}

View Slide

From Hilt to Anvil
class ViewModelFactory(
) : ViewModelProvider.Factory, AndroidViewModel(application) {
private val viewModels: Map, @JvmSuppressWildcards Provider>
init {
val component = application.component.createViewModelComponent()
viewModels = component.viewModels()
}
override fun create(modelClass: Class): T {
@Suppress("UNCHECKED_CAST")
return viewModels.getValue(modelClass).get() as T
}
override fun onCleared() {
// Clean up any resources
}
}

View Slide

From Hilt to Anvil
init {
}
}
}
}

View Slide

From Hilt to Anvil
init {
}
}
}
}

View Slide

From Hilt to Anvil
init {
}
}
}
}

View Slide

From Hilt to Anvil
@ContributesMultibinding(ViewModelScope::class)
@ViewModelKey(OpenSourceViewModel::class)
class OpenSourceViewModel @Inject constructor(
...
) : ViewModel() {
...
}

View Slide

Scope

View Slide

Scope
“Scopes deﬁne the boundary software components operate in. A scope is a space with a
well-deﬁned lifecycle that can be created and torn down. Scopes host other objects and can
bind them to their lifecycle. Sub-scopes or child scopes have the same or a shorter lifecycle
as their parent scope.”

View Slide

Scope
“Scopes deﬁne the boundary software components operate in. A scope is a space with a
well-deﬁned lifecycle that can be created and torn down. Scopes host other objects and can
bind them to their lifecycle. Sub-scopes or child scopes have the same or a shorter lifecycle
as their parent scope.”
– Ralf Wondratschek

View Slide

Scope
● Android components as scope?
● Coroutine scopes?
● Dagger components as scope?
● Implement your own?

View Slide

Scope
interface Scope {
val name: String
val parent: Scope?
fun buildChild(name: String, builder: (Builder.() -> Unit)? = null): Scope
fun children(): Set
fun register(scoped: Scoped)
fun isDestroyed(): Boolean
fun destroy()
fun getService(key: String): T?
}
https://github.com/square/mortar/blob/master/mortar/src/main/java/mortar/MortarScope.java

View Slide

Scope
class Builder internal constructor(
private val name: String,
private val parent: Scope?
) {
private val services = mutableMapOf()
fun addService(key: String, service: Any) {
services[key] = service
}
internal fun build(): Scope {
return ScopeImpl(name, parent, services)
}
}

View Slide

Scope - Services
interface Scope {
}
inline fun Scope.daggerComponent(): T {
return ...
}
fun Scope.Builder.addDaggerComponent(component: Any) {
addService(DAGGER_COMPONENT_KEY, component)
}

View Slide

Scope - Services
interface Scope {
}
inline fun Scope.daggerComponent(): T {
return ...
}
fun Scope.Builder.addDaggerComponent(component: Any) {
addService(DAGGER_COMPONENT_KEY, component)
}

View Slide

Scope - Services
private const val COROUTINE_SCOPE_KEY = "coroutineScope"
fun Scope.coroutineScope(context: CoroutineContext? = null): CoroutineScope {
val result = checkNotNull(getService(COROUTINE_SCOPE_KEY)) {
"Couldn't find CoroutineScopeScoped within scope $name."
}
check(result.isActive) {
"Expected the coroutine scope ${result.coroutineContext[CoroutineName]?.name} " +
"still to be active."
}
return result.createChild(context)
}
fun Scope.Builder.addCoroutineScope(coroutineScope: CoroutineScopeScoped) {
addService(COROUTINE_SCOPE_KEY, coroutineScope)
}

View Slide

Scope - Services
}
}
}
}

View Slide

Scope - Services
}
}
}
}

View Slide

Scope - Services
rootScope = Scope.buildRootScope {
addDaggerComponent(createDaggerComponent())
}
application.rootScope
.buildChild(name = this::class.java.simpleName) {
addDaggerComponent(
application.rootScope
.daggerComponent()
.createActivityComponent()
)
}

View Slide

Scope - Hierarchy
AppScope

View Slide

Scope - Hierarchy
AppScope
UserScope LoggedOutScope
ActivityScope

View Slide

Scope - Hierarchy in reality
AppScope
UserScope ActivityScope ViewModelScope

View Slide

Scope - Callback
interface Scope {
}

View Slide

Scope - Callback
interface Scope {
}
interface Scoped {
fun onEnterScope(scope: Scope) = Unit
fun onExitScope() = Unit
}

View Slide

Scope - Callback
fun initialize()
}
class AmazonRoutingRepository : RoutingRepository {
}

View Slide

Scope - Callback
}
class AmazonRoutingRepository : RoutingRepository, Scoped {
override fun onEnterScope(scope: Scope) {
scope.coroutineScope().launch {
...
}
}
}

View Slide

Scope - Callback
}
...
}
}
}

View Slide

Scope - Callback
}
...
}
}
}

View Slide

Scope - Callback
}
@ContributesMultibindingScoped(AppScope::class)
...
}
}
}

View Slide

Scope - Callback
}
...
}
}
}

View Slide

Scope - Callback
@ContributesTo(AppScope::class)
interface Component {
@ForScope(AppScope::class)
fun appScopedInstances(): Set
}
rootScope = Scope.buildRootScope {
addDaggerComponent(createDaggerComponent())
}
rootScope.register(rootScope.daggerComponent().appScopedInstances())

View Slide

Scope - Callback
@SingleIn(AppScope::class)
class ActivityListener @Inject constructor(
private val application: Application
) : Scoped {
val startedActivities: StateFlow> = ...
private val listener = object : Application.ActivityLifecycleCallbacks {
...
}
application.registerActivityLifecycleCallbacks(listener)
}
override fun onExitScope() {
application.unregisterActivityLifecycleCallbacks(listener)
}
}

View Slide

Scope - Callback
) : Scoped {
...
}
}
}
}

View Slide

Scope - Callback
) : Scoped {
...
}
}
}
}

View Slide

Scope - Callback
class QeCommandReceiver @Inject constructor(
private val application: Application,
) : BroadcastReceiver(), Scoped {
application.registerReceiver(this, IntentFilter("..."))
}
application.unregisterReceiver(this)
}
override fun onReceive(context: Context, intent: Intent) {
when (intent.getStringExtra("cmd")) {
...
}
}
}

View Slide

Scope - Callback
}
}
...
}
}
}

View Slide

Scope - Callback
}
}
...
}
}
}

View Slide

Scope - Callback
}
}
...
}
}
}

View Slide

Scope - Constructor?
If a class part of DriverSessionScope implements Scoped and injects DriverSessionService (which is
app-scoped), then we end up in a livelock and the app freezes. There is nothing wrong with this setup and it should be
supported.
The chain of events is as follows: the app scope gets created and someone injects DriverSessionService. Dagger
attempts to create DriverSessionService. In the constructor the service immediately creates the
DriverSessionScope, when the driver is already logged in. As part of this routine the service injects all Scoped
instances contributed to the DriverSessionScope. If one of these instances injects DriverSessionService (again,
from the app scope and that's valid), then Dagger cannot provide the DriverSessionService, because the previous
instance hasn't been created yet and is still in the constructor call. Therefore, Dagger creates another
DriverSessionService and the whole loop repeats.
TL;DR: Don't run any logic in the constructor.
The solution is implementing Scoped and moving all logic from the constructor call into onEnterScope().

View Slide

Scope - Constructor?
If a class part of DriverSessionScope implements Scoped and injects DriverSessionService (which is
app-scoped), then we end up in a livelock and the app freezes. There is nothing wrong with this setup and it should be
supported.
The chain of events is as follows: the app scope gets created and someone injects DriverSessionService. Dagger
attempts to create DriverSessionService. In the constructor the service immediately creates the
DriverSessionScope, when the driver is already logged in. As part of this routine the service injects all Scoped
instances contributed to the DriverSessionScope. If one of these instances injects DriverSessionService (again,
from the app scope and that's valid), then Dagger cannot provide the DriverSessionService, because the previous
instance hasn't been created yet and is still in the constructor call. Therefore, Dagger creates another
DriverSessionService and the whole loop repeats.
TL;DR: Don't run any logic in the constructor.
The solution is implementing Scoped and moving all logic from the constructor call into onEnterScope().

View Slide

Scope - Tests
@Test
fun `test routing repository registers for push updates`() {
val repository = AmazonRoutingRepository()
repository.onEnterScope(Scope.buildTestScope())
...
}

View Slide

Scope - Tests
fun Scope.Companion.buildTestScope(
name: String = "test",
context: CoroutineContext? = null,
builder: (Scope.Builder.() -> Unit)? = null
): Scope {
var coroutineContext = SupervisorJob() + UnconfinedTestDispatcher() + CoroutineName(name)
if (context != null) {
coroutineContext += context
}
val coroutineScope = CoroutineScopeScoped(coroutineContext)
val scope = buildRootScope(name = name) {
addCoroutineScopeScoped(coroutineScope)
builder?.invoke(this)
}
scope.register(coroutineScope)
return scope
}

View Slide

Scope - Recap

View Slide

Scope - Recap
fun sendRequest() {
}
}
}

View Slide

Scope - Recap
fun sendRequest() {
}
}
}

View Slide

Scope - Recap
}
}
class Fragment {
}
class ViewModel {
}

View Slide

Scope - Recap
}
}
class Fragment {
}
class ViewModel {
}

View Slide

Scope - Recap
super.onCreate()
}
}

View Slide

Scope - Recap
super.onCreate()
}
}

View Slide

Scope - Recap
fun initialize()
}

View Slide

Scope - Recap
fun initialize()
}

View Slide

Scope - Recap
// Initialize
}
}
}

View Slide

Scope - Recap
// Initialize
}
}
}

Scope - Recap

Scope - Recap

UI Engine

UI Engine
Business Logic
UI rendering
Activity Fragment
ViewModel ViewModel
flow: Flow
operation()
flow: Flow
operation()
Service objects

View Slide

UI Engine
ViewModel
Activity
operation1()
operation2()
operation3()
flow1: Flow
flow2: Flow
flow3: Flow

View Slide

Previously on droidcon…

View Slide

UI Engine
https://www.droidcon.com/2022/09/29/navigation-and-dependency-injection-in-compose/

View Slide

UI Engine - Presenter
Activity

View Slide

Root presenter
Activity

View Slide

Root presenter
Onboarding presenter
Activity

View Slide

Root presenter
Onboarding presenter
Activity
Login presenter Registration presenter

View Slide

Root presenter
Onboarding presenter Delivery presenter
Activity

View Slide

Root presenter
Onboarding presenter Delivery presenter Settings presenter
Activity

View Slide

Root presenter
Activity

View Slide

Root presenter
Activity

View Slide

UI Engine
Business Logic
UI rendering
Activity
model events
Service objects
Presenter1 Presenter2
Root presenter

View Slide

interface MoleculePresenter {
@Composable
fun present(input: InputT): ModelT
}
interface BaseModel
https://github.com/cashapp/molecule

View Slide

interface Renderer {
fun render(model: ModelT)
}

View Slide

interface Renderer {
fun render(model: ModelT)
}
abstract class ViewRenderer : Renderer {
protected abstract fun inflate(
activity: Activity,
parent: ViewGroup,
layoutInflater: LayoutInflater,
initialModel: T
): View
open fun onDetach() = Unit
}

View Slide

UI Engine - Presenter example
interface ItineraryListPresenter : MoleculePresenter {
data class Model(
val itinerary: List,
val onEvent: (Event) -> Unit,
) : BaseModel
sealed interface Event {
class OnSelectStop(val stop: Stop) : Event
}
}

View Slide

data class Model(
) : BaseModel
}
}

View Slide

data class Model(
) : BaseModel
}
}

View Slide

class ItineraryListPresenterImpl @Inject constructor(
private val itineraryRepository: ItineraryRepository
) : ItineraryListPresenter {
@Composable
override fun present(input: Unit): Model {
val items by itineraryRepository.items.collectAsState()
return Model(
itinerary = items,
onEvent = onEvent {
when (it) {
is Event.OnSelectStop -> { item ->
itineraryRepository.onSelectStop(item.stop)
}
}
}
)
}
}

View Slide

class ItineraryListPresenterImpl @Inject constructor(
private val itineraryRepository: ItineraryRepository
) : ItineraryListPresenter {
@Composable
override fun present(input: Unit): Model {
val items by itineraryRepository.items.collectAsState()
return Model(
itinerary = items,
onEvent = onEvent {
when (it) {
is Event.OnSelectStop -> { item ->
itineraryRepository.onSelectStop(item.stop)
}
}
}
)
}
}

View Slide

@ContributesRenderer
class ItineraryListRenderer :
ViewBindingRenderer() {
override fun inflateViewBinding(
activity: Activity,
parent: ViewGroup,
initialModel: ItineraryListPresenter.Model
): FragmentItineraryListRedesignBinding {
val itineraryListLayoutBinding = FragmentItineraryListRedesignBinding.inflate(layoutInflater, parent, false)
...
return itineraryListLayoutBinding
}
override fun renderModel(model: ItineraryListPresenter.Model) {
...
}
}

View Slide

activity: Activity,
parent: ViewGroup,
...
}
...
}
}

View Slide

activity: Activity,
parent: ViewGroup,
...
}
...
}
}

View Slide

@Test
fun `test presenter returns a model`() = runTest {
val itineraryListPresenter = ItineraryListPresenterImpl(repository)
itineraryListPresenter.test {
val firstModel = awaitItem()
assertThat(firstModel.itinerary).hasSize(3)
firstModel.onEvent(ItineraryListPresenter.Event.OnSelectStop(stop1))
val secondModel = awaitItem()
assertThat(secondModel.itinerary[1].isSelected()).isTrue()
}
}
https://github.com/cashapp/turbine

View Slide

UI Engine - Presenter example navigation
class UserScopePresenter @Inject constructor(
private val loggedInPresenter: Provider,
private val loggedOutPresenter: Provider,
private val userSessionService: UserSessionService,
) : MoleculePresenter {
@Composable
override fun present(input: Unit): BaseModel {
val session by userSessionService.sessionState.collectAsState()
return if (session.isLogginIn) {
val presenter = remember { loggedInPresenter.get() }
presenter.present(userSessionService.scope)
} else {
val presenter = remember { loggedOutPresenter.get() }
presenter.present(Unit)
}
}
}

View Slide

@Composable
} else {
}
}
}

View Slide

@Composable
} else {
}
}
}

View Slide

@Composable
} else {
}
}
}

View Slide

UI Engine - Presenter templates

View Slide

sealed interface Template : BaseModel {
data class FullScreenTemplate(
val model: BaseModel
) : Template
data class ListDetailTemplate(
val list: BaseModel,
val detail: BaseModel,
) : Template
}
abstract class TemplateRenderer(
...
) : ViewRenderer()

View Slide

) : Template
) : Template
}
...
) : ViewRenderer()

View Slide

) : Template
) : Template
}
...
) : ViewRenderer()

View Slide

) : Template
) : Template
}
...
) : ViewRenderer()

View Slide

) : Template
) : Template
}
...
) : ViewRenderer()

View Slide

class TemplatePresenter @AssistedInject constructor(
private val savedInstanceStateRegistry: SavedInstanceStateRegistry,
@Assisted private val rootPresenter: MoleculePresenter,
@Composable
override fun present(input: Unit): Template {
return ReturningCompositionLocalProvider(
LocalSavedInstanceStateRegistry provides savedInstanceStateRegistry,
) {
rootPresenter.present(Unit).toTemplate()
}
}
@AssistedFactory
interface Factory {
fun create(rootPresenter: MoleculePresenter): TemplatePresenter
}
}

View Slide

@Composable
) {
}
}
@AssistedFactory
interface Factory {
}
}

View Slide

@Composable
) {
}
}
@AssistedFactory
interface Factory {
}
}

View Slide

UI Engine - Presenter template
Child presenter

View Slide

Child presenter
Compute
new model

View Slide

Child presenter
Compute
new model
Template presenter
Send model

View Slide

Child presenter
Compute
new model
Template presenter
Send model
Combine
models to
template

View Slide

Child presenter
Compute
new model
Template presenter
Send model
Combine
models to
template
Activity
Send template

View Slide

Child presenter
Compute
new model
Template presenter
Send model
Combine
models to
template
Activity
Send template
Renderer factory
Send model
from template

View Slide

Child presenter
Compute
new model
Template presenter
Send model
Combine
models to
template
Activity
Send template
Renderer factory
Send model
from template
Renderer
Send model to
right renderer

View Slide

Child presenter
Compute
new model
Template presenter
Send model
Combine
models to
template
Activity
Send template
Renderer factory
Send model
from template
Renderer
Send model to
right renderer
Render model
on screen

View Slide

Child presenter
Template presenter Activity
Renderer factory
Renderer
Invoke callbacks
from models
Compute
new model
Render model
on screen
Send model
Send template
Combine
models to
template
Send model
from template
Send model to
right renderer

View Slide

UI Engine - Circuit
https://www.youtube.com/watch?v=ZIr_uuN8FEw

View Slide

UI Engine - Recap
ViewModel
Activity
operation1()
operation2()
operation3()
flow1: Flow
flow2: Flow
flow3: Flow

View Slide

UI Engine - Recap
ViewModel
Activity
operation1()
operation2()
operation3()
flow1: Flow
flow2: Flow
flow3: Flow

View Slide

UI Engine - Recap
Business Logic
UI rendering
Activity Fragment
ViewModel ViewModel
flow: Flow
operation()
flow: Flow
operation()
Service objects

View Slide

UI Engine - Recap
Business Logic
UI rendering
Activity
model events
Service objects
Root presenter

View Slide

UI Engine - Recap
Business Logic
UI rendering
model events
Service objects
Root presenter
model events
Activity1 Activity2

View Slide

Managing State Beyond
ViewModels and Hilt
Ralf Wondratschek
@vRallev | @[email protected] | @ralf_dev

View Slide

Managing State Beyond ViewModels and Hilt (Updated)

Managing State Beyond ViewModels and Hilt (Updated)

Ralf

More Decks by Ralf

Other Decks in Programming

Featured

Transcript