Molecular Theory — Navigation and Dependency Injection in Compose

A discussion of how to use Cash App's Molecule to build a dependency injection friendly presenter layer with the Compose core runtime, nicely decoupled from view code.

One warning, I made a mistake in this preso: I said that Compose's support for novel form factors requires paying the old configuration change tax, and coping with multiple Activity instances.

This is false, and the strong guidance of the #Compose team continues to be to set your manifest to handle all config changes manually. With that done, an #Android app rooted in Compose UI has no reason to use #Molecule for anything outside of testing.

Delivered at droidcon NYC, September 2022.: https://www.droidcon.com/2022/09/29/navigation-and-dependency-injection-in-compose/

Original slide deck, with speaker notes: https://docs.google.com/presentation/d/1yXXjJ2n0IzZZBP3MoIxmBEp_pXW6lohh9TnWCNGGDYQ/edit#slide=id.g4088c7565d_2_5

1. Ray Ryan Navigation & DI in Compose
2. Ongoing conversations
3. Ongoing conversations •@Composable fun Foo() / Dependency Injection: fight!
4. Ongoing conversations •@Composable fun Foo() / Dependency Injection: fight! •Sweet, sweet state management outside of view code?
5. Ongoing conversations •@Composable fun Foo() / Dependency Injection: fight! •Sweet, sweet state management outside of view code? •Why does it hurt when I navigate?
6. Ray Ryan Navigation & DI in Compose Molecular Theory of Presenter Composition
7. SaaS
8. S aa S
9. Shmoos as a Service
10. Shmoos as a Service https://en.wikipedia.org/wiki/Shmoo
11. https://shmoo.com https://en.wikipedia.org/wiki/Shmoo
12. https://shmoo.com https://en.wikipedia.org/wiki/Shmoo @Composable fun Shmoo( model: ShmooModel )
13. shmoo.com @Composable fun Shmoo( model: ShmooModel )
14. Protocol Buffers Wire shmoo.com @Composable fun Shmoo( model: ShmooModel )
15. Protocol Buffers Wire shmoo.com interface ShmooService Retrofit @Composable fun Shmoo( model: ShmooModel )
16. Protocol Buffers Wire shmoo.com interface ShmooService Retrofit interface ShmooDao Room / SQLDelight @Composable fun Shmoo( model: ShmooModel )
17. Protocol Buffers Wire shmoo.com interface ShmooService Retrofit interface ShmooRepo Room / SQLDelight @Composable fun Shmoo( model: ShmooModel )
18. Protocol Buffers Wire shmoo.com interface ShmooService Retrofit interface ShmooRepo SQLDelight Dagger + Anvil @Inject ShmooRepo @Composable fun Shmoo( model: ShmooModel )
19. Protocol Buffers Wire shmoo.com interface ShmooService Retrofit SQLDelight Dagger + Anvil ? interface ShmooRepo @Composable fun Shmoo( model: ShmooModel )
20. ? interface ShmooServ Retrofi interface ShmooRepo SQLDelight Dagger + Anvil @Composable fun Shmoo( model: ShmooModel )
21. ? interface ShmooServ Retrofi interface ShmooRepo SQLDelight Dagger + Anvil @Composable fun Shmoo( model: ShmooModel )
22. ? interface ShmooServ Retrofi interface ShmooRepo SQLDelight Dagger + Anvil @Composable fun Shmoo( model: ShmooModel )
23. ? interface ShmooServ Retrofi interface ShmooRepo SQLDelight Dagger + Anvil @Composable fun Shmoo( model: ShmooModel )
24. ? interface ShmooServ Retrofi interface ShmooRepo SQLDelight Dagger + Anvil @Composable fun Shmoo( model: ShmooModel )
25. ? ViewModel interface ShmooServ Retrofi interface ShmooRepo SQLDelight Dagger + Anvil @Composable fun Shmoo( model: ShmooModel )
26. ? ViewModel Lifecycle interface ShmooServ Retrofi interface ShmooRepo SQLDelight Dagger + Anvil @Composable fun Shmoo( model: ShmooModel )
27. ? ViewModel Lifecycle Navigation interface ShmooServ Retrofi interface ShmooRepo SQLDelight Dagger + Anvil @Composable fun Shmoo( model: ShmooModel )
28. ? ViewModel Lifecycle Navigation Fragment interface ShmooServ Retrofi interface ShmooRepo SQLDelight Dagger + Anvil @Composable fun Shmoo( model: ShmooModel )
29. ? ViewModel Lifecycle Navigation Fragment CoroutineScope interface ShmooServ Retrofi interface ShmooRepo SQLDelight Dagger + Anvil @Composable fun Shmoo( model: ShmooModel )
30. ? ViewModel Lifecycle Navigation Fragment CoroutineScope Suspend interface ShmooServ Retrofi interface ShmooRepo SQLDelight Dagger + Anvil @Composable fun Shmoo( model: ShmooModel )
31. ? ViewModel Lifecycle Navigation Fragment CoroutineScope Suspend StateFlow interface ShmooServ Retrofi interface ShmooRepo SQLDelight Dagger + Anvil @Composable fun Shmoo( model: ShmooModel )
32. ? ViewModel Lifecycle Navigation Fragment CoroutineScope Suspend StateFlow LaunchEffect interface ShmooServ Retrofi interface ShmooRepo SQLDelight Dagger + Anvil @Composable fun Shmoo( model: ShmooModel )
33. ? ViewModel Lifecycle Navigation Fragment CoroutineScope Suspend StateFlow LaunchEffect remember { } interface ShmooServ Retrofi interface ShmooRepo SQLDelight Dagger + Anvil @Composable fun Shmoo( model: ShmooModel )
34. ? ViewModel Lifecycle Navigation Fragment CoroutineScope Suspend StateFlow LaunchEffect remember { } MutableState interface ShmooServ Retrofi interface ShmooRepo SQLDelight Dagger + Anvil @Composable fun Shmoo( model: ShmooModel )
35. ? ViewModel Lifecycle Navigation Fragment CoroutineScope Suspend StateFlow LaunchEffect remember { } MutableState interface ShmooServ Retrofi interface ShmooRepo SQLDelight Dagger + Anvil @Composable fun Shmoo( model: ShmooModel )
36. Previously on droidcon…
37. Workflow
38. Componen t
39. Presenter
40. Presenter Props
41. Presenter Props Rendering
42. Presenter Props ViewModel
43. Presenter Props Mode l
44. Presenter Props Mode l event
45. Presenter Props Mode l output event
46. Presenter Props Mode l output event @Inject Repo
47. Presenter Props Mode l output event repo.getItem(i d) .collect { … } @Inject Repo
48. Presenter Model
49. :workflow-runtime Presenter Model
50. :workflow-runtime Presenter Model fun renderWorkflowIn( workflow: Workflow<Model>, scope: CoroutineScope ) : StateFlow<Model> 👈
51. ? interface ShmooServ Retrofi interface ShmooRepo SQLDelight Dagger + Anvil @Composable fun Shmoo( model: ShmooModel )
52. interface ShmooServ Retrofi interface ShmooRepo SQLDelight @Composable fun Shmoo( model: ShmooModel ) Shmoo Presenter Dagger + Anvil
53. interface ShmooServ Retrofi interface ShmooRepo SQLDelight @Composable fun Shmoo( model: ShmooModel ) Shmoo Presenter StateFlow< ShmooModel > Dagger + Anvil
54. interface ShmooServ Retrofi interface ShmooRepo SQLDelight Dagger + Anvil @Composable fun AppUi( models: StateFlow<ShmooModel> ) { val model by models.collectAsState() Shmoo(model) } Shmoo Presenter Workflow
56. https://github.com/cashapp/molecule
57. https://github.com/cashapp/molecule
58. Presenter Props Model event repo.getItem(id ) .collect { … } @Inject Repo
59. Presenter Props Model event repo.getItem(id ) .collect { … } @Inject Repo 👈
60. data class ShmooModel( val loading: Boolean, val onEaten: (() -> Unit)? ) { val eaten: Boolean = !loading && onEaten != null } 👈 Presenter Props ShmooMode l event @Inject Repo repo.getItem(id ) .collect { … }
61. data class ShmooModel( val loading: Boolean, val onEaten: (() -> Unit)? ) { val eaten: Boolean = !loading && onEaten != null } Presenter Props ShmooMode l event @Inject Repo 👈 repo.getItem(id ) .collect { … }
62. Presenter ShmooId ShmooMode l event @Inject Repo data class ShmooModel( val loading: Boolean, val onEaten: (() -> Unit)? ) { val eaten: Boolean = !loading && onEaten != null } @Composable fun presentShmoo( id: ShmooId ): ShmooModel { } 👈 repo.getItem(id ) .collect { … }
63. Presenter ShmooId ShmooMode l event @Inject Repo data class ShmooModel( val loading: Boolean, val onEaten: (() -> Unit)? ) { val eaten: Boolean = !loading && onEaten != null } @Composable fun presentShmoo( id: ShmooId ): ShmooModel { } 👈 repo.getItem(id ) .collect { … }
64. Shmoo Presenter Props ShmooMode l event @Inject ShmooRepo data class ShmooModel( val loading: Boolean, val onEaten: (() -> Unit)? ) { val eaten: Boolean = !loading && onEaten != null } class ShmooPresenter @Inject constructor( private val repo: ShmooRepo, ) { @Composable fun present( id: ShmooId ): ShmooModel { } } 👈 repo.getItem(id ) .collect { … }
65. Shmoo Presenter Props ShmooMode l event @Inject ShmooRepo data class ShmooModel( val loading: Boolean, val onEaten: (() -> Unit)? ) { val eaten: Boolean = !loading && onEaten != null } class RealShmooPresenter @Inject constructor( private val repo: ShmooRepo, ): ShmooPresenter { @Composable override fun present( id: ShmooId ): ShmooModel { } } 👈 repo.getItem(id ) .collect { … }
66. Shmoo Presenter Props ShmooMode l event @Inject ShmooRepo data class ShmooModel( val loading: Boolean, val onEaten: (() -> Unit)? ) { val eaten: Boolean = !loading && onEaten != null } class ShmooPresenter @Inject constructor( private val repo: ShmooRepo, ): Presenter<ShmooId, ShmooModel> { @Composable override fun present( id: ShmooId ): ShmooModel { } } 👈 repo.getItem(id ) .collect { … }
67. Shmoo Presenter Props ShmooMode l event @Inject ShmooRepo data class ShmooModel( val loading: Boolean, val onEaten: (() -> Unit)? ) { val eaten: Boolean = !loading && onEaten != null } class ShmooPresenter @Inject constructor( private val repo: ShmooRepo, ) { @Composable fun present( id: ShmooId ): ShmooModel { } } 👈 repo.getItem(id ) .collect { … }
68. Shmoo Presenter Props ShmooMode l event @Inject ShmooRepo data class ShmooModel( val loading: Boolean, val onEaten: (() -> Unit)? ) { val eaten: Boolean = !loading && onEaten != null } class ShmooPresenter @Inject constructor( private val repo: ShmooRepo, ) { @Composable fun present( id: ShmooId ): ShmooModel { } } repo.getItem(id ) .collect { … }
69. repo.getItem(id ) .collect { … } Shmoo Presenter Props ShmooMode l event @Inject ShmooRepo class ShmooPresenter @Inject constructor( private val repo: ShmooRepo, ) { @Composable fun present( id: ShmooId ): ShmooModel { } } 👈
70. Shmoo Presenter Props ShmooMode l event @Inject ShmooRepo class ShmooPresenter @Inject constructor( private val repo: ShmooRepo, ) { @Composable fun present( id: ShmooId ): ShmooModel { var shmooOrNull by repo.getShmoo(id) .collectAsState(initial = null) } } 👈 repo.getShmoo(i d) .collect { … }
71. Shmoo Presenter Props ShmooMode l event @Inject ShmooRepo class ShmooPresenter @Inject constructor( private val repo: ShmooRepo, ) { @Composable fun present( id: ShmooId ): ShmooModel { var shmooOrNull by repo.getShmoo(id) .collectAsState(initial = null) } } 👈 repo.getShmoo(i d) .collect { … }
72. class ShmooPresenter @Inject constructor( private val repo: ShmooRepo, ) { @Composable fun present( id: ShmooId ): ShmooModel { var shmooOrNull by repo.getShmoo(id) .collectAsState(initial = null) return ShmooModel( loading = shmooOrNull == null, onEaten = shmooOrNull?.let { it.reportEaten() } ) Shmoo Presenter Props ShmooMode l onEaten @Inject ShmooRepo 👈 repo.getShmoo(i d) .collect { … }
73. class ShmooPresenter @Inject constructor( private val repo: ShmooRepo, ) { @Composable fun present( id: ShmooId ): ShmooModel { var shmooOrNull by repo.getShmoo(id) .collectAsState(initial = null) return ShmooModel( loading = shmooOrNull == null, onEaten = shmooOrNull?.let { it.reportEaten() } ) Shmoo Presenter Props ShmooMode l onEaten @Inject ShmooRepo repo.getShmoo(i d) .collect { … } class Continuity : ViewModel() { private val scope = viewModelScope + Main val models: StateFlow<ShmooModel> = scope.launchMolecule( clock = RecompositionClock.ContextClock ) { val rootPresenter = remember { DaggerComponent().rootPresenter() } rootPresenter.present() } }
74. class ShmooPresenter @Inject constructor( private val repo: ShmooRepo, ) { @Composable fun present( id: ShmooId ): ShmooModel { var shmooOrNull by repo.getShmoo(id) .collectAsState(initial = null) return ShmooModel( loading = shmooOrNull == null, onEaten = shmooOrNull?.let { it.reportEaten() } ) Shmoo Presenter Props ShmooMode l onEaten @Inject ShmooRepo repo.getShmoo(i d) .collect { … } class Continuity : ViewModel() { private val scope = viewModelScope + Main val models: StateFlow<ShmooModel> = scope.launchMolecule( clock = RecompositionClock.ContextClock ) { val rootPresenter = remember { DaggerComponent().rootPresenter() } rootPresenter.present() } } override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val continuity: Continuity by viewModels() val models = continuity.models setContent { AppUi(models) } } class Continuity : ViewModel() { private val scope = viewModelScope + Main val models: StateFlow<ShmooModel> = scope.launchMolecule( clock = RecompositionClock.ContextClock ) { val rootPresenter = remember { DaggerComponent().rootPresenter() } rootPresenter.present() } }
75. interface ShmooServ Retrofi interface ShmooRepo SQLDelight Dagger + Anvil @Composable fun AppUi( models: StateFlow<ShmooModel> ) { val model by models.collectAsState() Shmoo(model) } Shmoo Presenter Workflow
76. interface ShmooServ Retrofi interface ShmooRepo SQLDelight Dagger + Anvil @Composable fun AppUi( models: StateFlow<ShmooModel> ) { val model by models.collectAsState() Shmoo(model) } Shmoo Presenter 🥳 Molecule 🥳
77. Single presenter apps don’t scale
78. Charles Shmoo nick: Charlie born: 30 Aug 1948 Eat Abner Shmoo Baker Shmoo Charlie Shmoo Delta Shmoo Echo Shmoo Foxtrot Shmoo George Shmoo Herman Shmoo
79. Charles Shmoo nick: Charlie born: 30 Aug 1948 Eat Abner Shmoo Baker Shmoo Charlie Shmoo Delta Shmoo Echo Shmoo Foxtrot Shmoo George Shmoo Herman Shmoo Charlie Shmoo
80. Charles Shmoo nick: Charlie born: 30 Aug 1948 Eat Abner Shmoo Baker Shmoo Charlie Shmoo Delta Shmoo Echo Shmoo Foxtrot Shmoo George Shmoo Herman Shmoo Charlie Shmoo SplitScreenModel ( IndexModel, ShmooModel )
81. SplitScreenModel ( IndexModel, ShmooModel ) Shmoo Browser Presenter
82. Shmoo Browser Presenter
83. Shmoo Browser Presenter @Inject ShmooRepo
84. Shmoo Browser Presenter @Inject Index Presenter @Inject ShmooRepo
85. Shmoo Browser Presenter @Inject Index Presenter @Inject ShmooRepo @Inject Shmoo Presenter
86. Shmoo Browser Presenter val shmooIndex by repo.getIndex() .collectAsState() @Inject Index Presenter @Inject ShmooRepo @Inject Shmoo Presenter
87. Shmoo Browser Presenter val shmooIndex by repo.getIndex() .collectAsState() @Inject Index Presenter var selection by remember { mutableState(-1) } @Inject ShmooRepo @Inject Shmoo Presenter
88. Shmoo Browser Presenter val shmooIndex by repo.getIndex() .collectAsState() @Inject Index Presenter selection: Int, names: List<String> onSelect: (Int) -> Unit var selection by remember { mutableState(-1) } @Inject ShmooRepo @Inject Shmoo Presenter
89. Shmoo Browser Presenter val shmooIndex by repo.getIndex() .collectAsState() @Inject Index Presenter IndexModel selection: Int, names: List<String> onSelect: (Int) -> Unit var selection by remember { mutableState(-1) } @Inject ShmooRepo @Inject Shmoo Presenter
90. SplitScreenModel( IndexModel, EmptyModel ) Shmoo Browser Presenter val shmooIndex by repo.getIndex() .collectAsState() @Inject Index Presenter IndexModel selection: Int, names: List<String> onSelect: (Int) -> Unit var selection by remember { mutableState(-1) } @Inject ShmooRepo @Inject Shmoo Presenter
91. SplitScreenModel( IndexModel, EmptyModel ) Shmoo Browser Presenter @Inject Shmoo Presenter val shmooIndex by repo.getIndex() .collectAsState() @Inject Index Presenter IndexModel onClick selection: Int, names: List<String> onSelect: (Int) -> Unit var selection by remember { mutableState(-1) } @Inject ShmooRepo
92. SplitScreenModel( IndexModel, EmptyModel ) Shmoo Browser Presenter @Inject Shmoo Presenter val shmooIndex by repo.getIndex() .collectAsState() @Inject Index Presenter IndexModel onClick selection: Int, names: List<String> onSelect: (Int) -> Unit var selection by remember { mutableState(-1) } @Inject ShmooRepo onSelect
93. SplitScreenModel( IndexModel, EmptyModel ) Shmoo Browser Presenter @Inject Shmoo Presenter val shmooIndex by repo.getIndex() .collectAsState() @Inject Index Presenter IndexModel onClick selection: Int, names: List<String> onSelect: (Int) -> Unit @Inject ShmooRepo onSelect var selection by remember { mutableState(0) }
94. SplitScreenModel( IndexModel, EmptyModel ) Shmoo Browser Presenter @Inject Shmoo Presenter val shmooIndex by repo.getIndex() .collectAsState() @Inject Index Presenter IndexModel selection: Int, names: List<String> onSelect: (Int) -> Unit @Inject ShmooRepo var selection by remember { mutableState(0) } onClick onSelect
95. SplitScreenModel( IndexModel, EmptyModel ) Shmoo Browser Presenter @Inject Shmoo Presenter id: ShmooId val shmooIndex by repo.getIndex() .collectAsState() @Inject Index Presenter IndexModel selection: Int, names: List<String> onSelect: (Int) -> Unit @Inject ShmooRepo var selection by remember { mutableState(0) } onClick onSelect
96. SplitScreenModel( IndexModel, EmptyModel ) Shmoo Browser Presenter @Inject Shmoo Presenter id: ShmooId val shmooIndex by repo.getIndex() .collectAsState() key(id) { repo.get(id) .collectAsState() } @Inject Index Presenter IndexModel selection: Int, names: List<String> onSelect: (Int) -> Unit @Inject ShmooRepo var selection by remember { mutableState(0) } onClick onSelect
97. SplitScreenModel( IndexModel, EmptyModel ) Shmoo Browser Presenter @Inject Shmoo Presenter id: ShmooId ShmooModel val shmooIndex by repo.getIndex() .collectAsState() key(id) { repo.get(id) .collectAsState() } @Inject Index Presenter IndexModel selection: Int, names: List<String> onSelect: (Int) -> Unit @Inject ShmooRepo var selection by remember { mutableState(0) } onClick onSelect
98. Shmoo Browser Presenter @Inject Shmoo Presenter id: ShmooId ShmooModel val shmooIndex by repo.getIndex() .collectAsState() key(id) { repo.get(id) .collectAsState() } @Inject Index Presenter IndexModel selection: Int, names: List<String> onSelect: (Int) -> Unit @Inject ShmooRepo var selection by remember { mutableState(0) } SplitScreenModel( IndexModel, ShmooModel ) onClick onSelect
99. Nice nested view models. Gonna draw them?
100. interface ShmooServ Retrofi interface ShmooRepo SQLDelight Dagger + Anvil @Composable fun AppUi( models: StateFlow<ShmooModel> ) { val model by models.collectAsState() Shmoo(model) } Shmoo Presenter
101. interface ShmooServ Retrofi interface ShmooRepo SQLDelight Dagger + Anvil @Composable fun AppUi( models: StateFlow<ShmooModel> ) { val model by models.collectAsState() Shmoo(model) } Shmoo Presenter 👈
102. interface ShmooServ Retrofi interface ShmooRepo SQLDelight Dagger + Anvil @Composable fun AppUi( models: StateFlow<ShmooModel> ) { val model by models.collectAsState() Shmoo(model) } Shmoo Presenter 👈 👈
103. interface ShmooServ Retrofi interface ShmooRepo SQLDelight Dagger + Anvil @Composable fun AppUi( models: StateFlow<ShmooModel> ) { val model by models.collectAsState() Shmoo(model) } Shmoo Presenter 👈 👈 👈
104. interface ShmooServ Retrofi interface ShmooRepo SQLDelight Dagger + Anvil @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() // MAGIC? } Shmoo Browser Presenter 👈 👈 👈
105. Showing Arbitrary UI Models
106. interface UiModel { @Composable fun Content() } Showing Arbitrary UI Models 1. Quick & dirty interface
107. interface UiModel { @Composable fun Content() } data class SplitScreenModel( val first: UiModel, val second: UiModel ) : UiModel { @Composable override fun Content() { BoxWithConstraints { if (maxWidth > maxHeight) { Row { first.Content() second.Content() } } else { // … Showing Arbitrary UI Models 1. Quick & dirty interface
108. @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() // MAGIC? } Showing Arbitrary UI Models 1. Quick & dirty interface
109. @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() model.Content() } Showing Arbitrary UI Models 1. Quick & dirty interface
110. @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() model.Content() } Showing Arbitrary UI Models 1. Quick & dirty interface
111. @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() model.Content() } Showing Arbitrary UI Models 1. Quick & dirty interface
112. @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() model.Content() } Showing Arbitrary UI Models 1. Quick & dirty interface
113. @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() model.Content() } + Simple Showing Arbitrary UI Models 1. Quick & dirty interface
114. @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() model.Content() } + Simple + Compiler enforced Showing Arbitrary UI Models 1. Quick & dirty interface
115. @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() model.Content() } + Simple + Compiler enforced - Presenter & view coupled Showing Arbitrary UI Models 1. Quick & dirty interface
116. @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() model.Content() } + Simple + Compiler enforced - Presenter & view coupled - Rigid, hard to customize Showing Arbitrary UI Models 1. Quick & dirty interface
117. @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() model.Content() } + Simple + Compiler enforced - Presenter & view coupled - Rigid, hard to customize Showing Arbitrary UI Models 1. Quick & dirty interface
118. @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() model.Content() } + Simple + Compiler enforced - Presenter & view coupled - Rigid, hard to customize Probably just fine for many. Showing Arbitrary UI Models 1. Quick & dirty interface
119. interface UiModel Showing Arbitrary UI Models 1. Quick & dirty interface 2. Runtime lookup
120. interface UiModel data class UiBinding<S : UiModel>( val type: KClass<S>, val content: @Composable (S) -> Unit ) Showing Arbitrary UI Models 1. Quick & dirty interface 2. Runtime lookup
121. interface UiModel data class UiBinding<S : UiModel>( val type: KClass<S>, val content: @Composable (S) -> Unit ) @Composable fun ProvideLocalUiBindings( bindings: List<UiBinding<*>>, content: @Composable () -> Unit ) Showing Arbitrary UI Models 1. Quick & dirty interface 2. Runtime lookup
122. interface UiModel data class UiBinding<S : UiModel>( val type: KClass<S>, val content: @Composable (S) -> Unit ) @Composable fun ProvideLocalUiBindings( bindings: List<UiBinding<*>>, content: @Composable () -> Unit ) @Composable fun ShowUi( uiModel: UiModel, modifier: Modifier = Modifier ) Showing Arbitrary UI Models 1. Quick & dirty interface 2. Runtime lookup
123. internal class UiContentRegistry( private val bindings: Map<KClassBinding<*>, UiBinding<*>> ) { @Composable fun ContentFor( uiModel: UiModel, modifier: Modifier ) { Box( modifier, propagateMinConstraints = true ) { bindings[uiModel::class] ?.Content(uiModel) ?: Text("What’s a $uiModel?") } } Showing Arbitrary UI Models 1. Quick & dirty interface 2. Runtime lookup
124. data class SplitScreenModel( val first: UiModel, val second: UiModel ) : UiModel Showing Arbitrary UI Models 1. Quick & dirty interface 2. Runtime lookup
125. data class SplitScreenModel( val first: UiModel, val second: UiModel ) : UiModel val SPLIT_SCREEN_BINDING = UiBinding( SplitScreenModel::class ) { split -> BoxWithConstraints { if (maxWidth > maxHeight) { Row { ShowUi(split.firstView) ShowUi(split.secondView) } } else { // … Showing Arbitrary UI Models 1. Quick & dirty interface 2. Runtime lookup
126. @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() // MAGIC? } Showing Arbitrary UI Models 1. Quick & dirty interface 2. Runtime lookup
127. @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() ProvideLocalUiBindings( listOf( SPLIT_SCREEN_BINDING, SHMOO_INDEX_BINDING, SHMOO_BINDING ) ) { ShowUi(model) } } Showing Arbitrary UI Models 1. Quick & dirty interface 2. Runtime lookup
128. @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() ProvideLocalUiBindings( listOf( SPLIT_SCREEN_BINDING, SHMOO_INDEX_BINDING, SHMOO_BINDING ) ) { ShowUi(model) } } Showing Arbitrary UI Models 1. Quick & dirty interface 2. Runtime lookup
129. @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() ProvideLocalUiBindings( listOf( SPLIT_SCREEN_BINDING, SHMOO_INDEX_BINDING, SHMOO_BINDING ) ) { ShowUi(model) } } Showing Arbitrary UI Models 1. Quick & dirty interface 2. Runtime lookup
130. @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() ProvideLocalUiBindings( listOf( SPLIT_SCREEN_BINDING, SHMOO_INDEX_BINDING, SHMOO_BINDING ) ) { ShowUi(model) } } Showing Arbitrary UI Models 1. Quick & dirty interface 2. Runtime lookup
131. @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() ProvideLocalUiBindings( listOf( SPLIT_SCREEN_BINDING, SHMOO_INDEX_BINDING, SHMOO_BINDING ) ) { ShowUi(model) } } Showing Arbitrary UI Models 1. Quick & dirty interface 2. Runtime lookup + Decoupled
132. @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() ProvideLocalUiBindings( listOf( SPLIT_SCREEN_BINDING, SHMOO_INDEX_BINDING, SHMOO_BINDING ) ) { ShowUi(model) } } Showing Arbitrary UI Models 1. Quick & dirty interface 2. Runtime lookup + Decoupled + Easy to customize
133. @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() ProvideLocalUiBindings( listOf( SPLIT_SCREEN_BINDING, SHMOO_INDEX_BINDING, SHMOO_BINDING ) ) { ShowUi(model) } } Showing Arbitrary UI Models 1. Quick & dirty interface 2. Runtime lookup + Decoupled + Easy to customize - Runtime errors
134. @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() ProvideLocalUiBindings( listOf( SPLIT_SCREEN_BINDING, SHMOO_INDEX_BINDING, SHMOO_BINDING ) ) { ShowUi(model) } } Showing Arbitrary UI Models 1. Quick & dirty interface 2. Runtime lookup + Decoupled + Easy to customize - Runtime errors - Boiler. Plate.
135. @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() ProvideLocalUiBindings( listOf( SPLIT_SCREEN_BINDING, SHMOO_INDEX_BINDING, SHMOO_BINDING ) ) { ShowUi(model) } } Showing Arbitrary UI Models 1. Quick & dirty interface 2. Runtime lookup + Decoupled + Easy to customize - Runtime errors - Boiler. Plate.
136. @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() ProvideLocalUiBindings( listOf( SPLIT_SCREEN_BINDING, SHMOO_INDEX_BINDING, SHMOO_BINDING ) ) { ShowUi(model) } } Showing Arbitrary UI Models 1. Quick & dirty interface 2. Runtime lookup + Decoupled + Easy to customize - Runtime errors - Boiler. Plate. Kind of a PITA, kind of needed.
137. interface UiModel Showing Arbitrary UI Models 1. Quick & dirty interface 2. Runtime lookup 3. All both of the above
138. interface UiModel interface ComposeUiModel : UiModel { @Composable fun Content() } Showing Arbitrary UI Models 1. Quick & dirty interface 2. Runtime lookup 3. All both of the above
139. interface UiModel interface ComposeUiModel : UiModel { @Composable fun Content() } bindings[uiModel::class] ?.Content(uiModel) ?: Text("What’s a $uiModel?") Showing Arbitrary UI Models 1. Quick & dirty interface 2. Runtime lookup 3. All both of the above
140. interface UiModel interface ComposeUiModel : UiModel { @Composable fun Content() } bindings[uiModel::class] ?.Content(uiModel) ?: (uiModel as? ComposeUiModel) ?.Content() ?: Text("What’s a $uiModel?") Showing Arbitrary UI Models 1. Quick & dirty interface 2. Runtime lookup 3. All both of the above
141. @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() // MAGIC? } Showing Arbitrary UI Models 1. Quick & dirty interface 2. Runtime lookup 3. All both of the above
142. @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() ShowUi(model) } Showing Arbitrary UI Models 1. Quick & dirty interface 2. Runtime lookup 3. All both of the above
143. @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() ProvideLocalUiBindings( A_HANDFUL_OF_CUSTOM_BINDINGS ) { ShowUi(model) } } Showing Arbitrary UI Models 1. Quick & dirty interface 2. Runtime lookup 3. All both of the above
144. @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() ProvideLocalUiBindings( A_HANDFUL_OF_CUSTOM_BINDINGS ) { ShowUi(model) } } Showing Arbitrary UI Models 1. Quick & dirty interface 2. Runtime lookup 3. All both of the above
145. @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() ProvideLocalUiBindings( A_HANDFUL_OF_CUSTOM_BINDINGS ) { ShowUi(model) } } Showing Arbitrary UI Models 1. Quick & dirty interface 2. Runtime lookup 3. All both of the above
146. @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() ProvideLocalUiBindings( A_HANDFUL_OF_CUSTOM_BINDINGS ) { ShowUi(model) } } Showing Arbitrary UI Models 1. Quick & dirty interface 2. Runtime lookup 3. All both of the above
147. @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() ProvideLocalUiBindings( A_HANDFUL_OF_CUSTOM_BINDINGS ) { ShowUi(model) } } Showing Arbitrary UI Models 1. Quick & dirty interface 2. Runtime lookup 3. All both of the above + Usually compile time
148. @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() ProvideLocalUiBindings( A_HANDFUL_OF_CUSTOM_BINDINGS ) { ShowUi(model) } } Showing Arbitrary UI Models 1. Quick & dirty interface 2. Runtime lookup 3. All both of the above + Usually compile time + Boiler plate is opt in for…
149. @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() ProvideLocalUiBindings( A_HANDFUL_OF_CUSTOM_BINDINGS ) { ShowUi(model) } } Showing Arbitrary UI Models 1. Quick & dirty interface 2. Runtime lookup 3. All both of the above + Usually compile time + Boiler plate is opt in for… + Flexible customization
150. @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() ProvideLocalUiBindings( A_HANDFUL_OF_CUSTOM_BINDINGS ) { ShowUi(model) } } Showing Arbitrary UI Models 1. Quick & dirty interface 2. Runtime lookup 3. All both of the above + Usually compile time + Boiler plate is opt in for… + Flexible customization
151. @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() ProvideLocalUiBindings( A_HANDFUL_OF_CUSTOM_BINDINGS ) { ShowUi(model) } } Showing Arbitrary UI Models 1. Quick & dirty interface 2. Runtime lookup 3. All both of the above + Usually compile time + Boiler plate is opt in for… + Flexible customization Have your cake. Eat your cake.
152. @Composable fun AppUi( models: StateFlow<SplitScreenModel> ) { val model by models.collectAsState() ProvideLocalUiBindings( A_HANDFUL_OF_CUSTOM_BINDINGS ) { ShowUi(model) } } Showing Arbitrary UI Models 1. Quick & dirty interface 2. Runtime lookup 3. All both of the above + Usually compile time + Boiler plate is opt in for… + Flexible customization Have your cake. Eat your cake. Pick two.
153. Didn’t someone mention navigation? Did I sleep through that part?
154. Delta Shmoo nick: Charlie born: 12 July 1948 eaten: Yesterday Charles Shmoo nick: Charlie born: 30 Aug 1948 Eat Abner Shmoo Baker Shmoo Charlie Shmoo Delta Shmoo Echo Shmoo Foxtrot Shmoo George Shmoo Herman Shmoo
155. Delta Shmoo nick: Charlie born: 12 July 1948 eaten: Yesterday Charles Shmoo nick: Charlie born: 30 Aug 1948 Eat Abner Shmoo Baker Shmoo Charlie Shmoo Delta Shmoo Echo Shmoo Foxtrot Shmoo George Shmoo Herman Shmoo Charlie Shmoo
156. Delta Shmoo nick: Charlie born: 12 July 1948 eaten: Yesterday Abner Shmoo Baker Shmoo Charlie Shmoo Delta Shmoo Echo Shmoo Foxtrot Shmoo George Shmoo Herman Shmoo Delta Shmoo
157. Delta Shmoo nick: Charlie born: 12 July 1948 eaten: Yesterday Charles Shmoo nick: Charlie born: 30 Aug 1948 Eat Abner Shmoo Baker Shmoo Charlie Shmoo Delta Shmoo Echo Shmoo Foxtrot Shmoo George Shmoo Herman Shmoo
158. Delta Shmoo nick: Charlie born: 12 July 1948 eaten: Yesterday Charles Shmoo nick: Charlie born: 30 Aug 1948 Eat Abner Shmoo Baker Shmoo Charlie Shmoo Delta Shmoo Echo Shmoo Foxtrot Shmoo George Shmoo Herman Shmoo 🥳 Navigation! 🥳
159. No backstack? Lame.
160. Abner Shmoo Baker Shmoo Charlie Shmoo Delta Shmoo Echo Shmoo Foxtrot Shmoo George Shmoo Herman Shmoo Charlie Shmoo Charles Shmoo nick: Charlie born: 30 Aug 1948 Eat
161. Abner Shmoo Baker Shmoo Charlie Shmoo Delta Shmoo Echo Shmoo Foxtrot Shmoo George Shmoo Herman Shmoo Delta Shmoo Delta Shmoo nick: Charlie born: 12 July 1948 eaten: Yesterday
162. Abner Shmoo Baker Shmoo Charlie Shmoo Delta Shmoo Echo Shmoo Foxtrot Shmoo George Shmoo Herman Shmoo Charlie Shmoo Charles Shmoo nick: Charlie born: 30 Aug 1948 Eat
163. SplitScreenModel( ShmooIndexModel, ShmooModel ) Shmoo Browser Presenter
164. SplitScreenModel( ShmooIndexModel, BackstackModel ) Shmoo Browser Presenter
165. SplitScreenModel( ShmooIndexModel, List<ShmooModel> ) Shmoo Browser Presenter
167. @Composable fun <K : Any> Backstack( frames: List<BackstackFrame<K>>, modifier: Modifier = Modifier, frameController: FrameController<K> ) { val stateHolder = rememberSaveableScreenStateHolder<K>() frameController.updateBackstack(frames) Box(modifier = modifier.clip(RectangleShape)) { frameController.activeFrames.forEach { (frame, frameControlModifier) -> key(frame.key) { stateHolder.SaveableStateProvider(frame.key) { Box(frameControlModifier) { frame.Content() } } } } }
168. @Composable fun <K : Any> Backstack( frames: List<BackstackFrame<K>>, modifier: Modifier = Modifier, frameController: FrameController<K> ) { val stateHolder = rememberSaveableScreenStateHolder<K>() frameController.updateBackstack(frames) Box(modifier = modifier.clip(RectangleShape)) { frameController.activeFrames.forEach { (frame, frameControlModifier) -> key(frame.key) { stateHolder.SaveableStateProvider(frame.key) { Box(frameControlModifier) { frame.Content() } } } } }
169. @Composable fun <K : Any> Backstack( frames: List<BackstackFrame<K>>, modifier: Modifier = Modifier, frameController: FrameController<K> ) { val stateHolder = rememberSaveableScreenStateHolder<K>() frameController.updateBackstack(frames) Box(modifier = modifier.clip(RectangleShape)) { frameController.activeFrames.forEach { (frame, frameControlModifier) -> key(frame.key) { stateHolder.SaveableStateProvider(frame.key) { Box(frameControlModifier) { frame.Content() } } } } }
170. data class BackstackModel<K: Any>( val backstackKeys: List<K>, val modelForKey: (K) -> UiModel ) : ComposeUiModel { override fun Content() { Backstack(backstackKeys) { ShowUi(modelForKey(it)) } } }
171. data class BackstackModel<K: Any>( val backstackKeys: List<K>, val modelForKey: (K) -> UiModel ) : ComposeUiModel { override fun Content() { Backstack(backstackKeys) { ShowUi(modelForKey(it)) } } } ⚠
172. data class BackbuttonWrapper( val wrapped: UiModel, val enabled: Boolean = true, val onBackPressed: () -> Unit ) : ComposeUiModel { override fun Content() { BackHandler(enabled) { onBackPressed } ShowUi(wrapped) } }
173. @Composable fun present(): SplitScreenModel { val shmooIndex = repo.shmooIndex().collectAsState(emptyList()) var showing by remember { mutableStateOf(-1) } val index = indexPresenter.present( showing, shmooIndex.map { it.name } ) { showing = it } val shmoo = shmooPresenter.present(shmooIndex[showing].id) return SplitScreenModel( first = index, second = shmoo ) }
174. @Composable fun present(): SplitScreenModel { val shmooIndex = repo.shmooIndex().collectAsState(emptyList()) var backstack by remember { mutableStateOf(emptyList<ShmooId>()) } val index = indexPresenter.present( showing, shmooIndex.map { it.name } ) { showing = it } val shmoo = shmooPresenter.present(shmooIndex[showing].id) return SplitScreenModel( first = index, second = shmoo ) }
175. @Composable fun present(): SplitScreenModel { val shmooIndex = repo.shmooIndex().collectAsState(emptyList()) var backstack by remember { mutableStateOf(emptyList<ShmooId>()) } val index = indexPresenter.present( showing, shmooIndex.map { it.name } ) { showing = it } val shmoo = shmooPresenter.present(shmooIndex[showing].id) return SplitScreenModel( first = index, second = shmoo ) }
176. @Composable fun present(): SplitScreenModel { val shmooIndex = repo.shmooIndex().collectAsState(emptyList()) var backstack by remember { mutableStateOf(emptyList<ShmooId>()) } val index = indexPresenter.present( backstack.lastOrNull() ?: -1, shmooIndex.map { it.name } ) { backstack = backstack + shmooIndex[it] } val shmoo = shmooPresenter.present(shmooIndex[showing].id) return SplitScreenModel( first = index, second = shmoo ) }
177. @Composable fun present(): SplitScreenModel { val shmooIndex = repo.shmooIndex().collectAsState(emptyList()) var backstack by remember { mutableStateOf(emptyList<ShmooId>()) } val index = indexPresenter.present( backstack.lastOrNull() ?: -1, shmooIndex.map { it.name } ) { backstack = backstack + shmooIndex[it] } val shmoo = shmooPresenter.present(shmooIndex[showing].id) return SplitScreenModel( first = index, second = shmoo ) }
178. @Composable fun present(): SplitScreenModel { val shmooIndex = repo.shmooIndex().collectAsState(emptyList()) var backstack by remember { mutableStateOf(emptyList<ShmooId>()) } val index = indexPresenter.present( backstack.lastOrNull() ?: -1, shmooIndex.map { it.name } ) { backstack = backstack + shmooIndex[it] } val shmooMap = backstack.associateWith { BackButtonWrapper(shmooPresenter.present(it)) { backstack = backstack.dropLast(1) } } return SplitScreenModel( first = index, second = shmoo ) }
179. @Composable fun present(): SplitScreenModel { val shmooIndex = repo.shmooIndex().collectAsState(emptyList()) var backstack by remember { mutableStateOf(emptyList<ShmooId>()) } val index = indexPresenter.present( backstack.lastOrNull() ?: -1, shmooIndex.map { it.name } ) { backstack = backstack + shmooIndex[it] } val shmooMap = backstack.associateWith { BackButtonWrapper(shmooPresenter.present(it)) { backstack = backstack.dropLast(1) } } return SplitScreenModel( first = index, second = shmoo ) }
180. @Composable fun present(): SplitScreenModel { val shmooIndex = repo.shmooIndex().collectAsState(emptyList()) var backstack by remember { mutableStateOf(emptyList<ShmooId>()) } val index = indexPresenter.present( backstack.lastOrNull() ?: -1, shmooIndex.map { it.name } ) { backstack = backstack + shmooIndex[it] } val shmooMap = backstack.associateWith { BackButtonWrapper(shmooPresenter.present(it)) { backstack = backstack.dropLast(1) } } return SplitScreenModel( first = index, second = shmoo ) }
181. @Composable fun present(): SplitScreenModel { val shmooIndex = repo.shmooIndex().collectAsState(emptyList()) var backstack by remember { mutableStateOf(emptyList<ShmooId>()) } val index = indexPresenter.present( backstack.lastOrNull() ?: -1, shmooIndex.map { it.name } ) { backstack = backstack + shmooIndex[it] } val shmooMap = backstack.associateWith { BackButtonWrapper(shmooPresenter.present(it)) { backstack = backstack.dropLast(1) } } return SplitScreenModel( first = index, second = BackstackModel(backstack) { shmooMap.getValue(it) } ) }
182. Ongoing conversations •@Composable fun Foo() / Dependency Injection: fight! •Sweet, sweet state management outside of view code? •Why does it hurt when I navigate?
183. Ongoing conversations •@Composable fun Foo() / Dependency Injection: fight! •Sweet, sweet state management outside of view code? •Why does it hurt when I navigate? ✔
184. Ongoing conversations •@Composable fun Foo() / Dependency Injection: fight! •Sweet, sweet state management outside of view code? •Why does it hurt when I navigate? ✔ ✔
185. Ongoing conversations •@Composable fun Foo() / Dependency Injection: fight! •Sweet, sweet state management outside of view code? •Why does it hurt when I navigate? ✔ ✔ ✔
186. Testing ?
187. Testing ? github.com/cashapp/turbine
188. rememberSaveable {} ?
191. Recap
192. Recap •An injected tree of @Composable Presenters can make
193. Recap •An injected tree of @Composable Presenters can make •a tree of @Composable ViewModel structs which
194. Recap •An injected tree of @Composable Presenters can make •a tree of @Composable ViewModel structs which •Molecule can stream through a StateFlow which can
195. Recap •An injected tree of @Composable Presenters can make •a tree of @Composable ViewModel structs which •Molecule can stream through a StateFlow which can •hang off a Jetpack ViewModel to survive config change
196. Recap •An injected tree of @Composable Presenters can make •a tree of @Composable ViewModel structs which •Molecule can stream through a StateFlow which can •hang off a Jetpack ViewModel to survive config change
197. Recap •An injected tree of @Composable Presenters can make •a tree of @Composable ViewModel structs which •Molecule can stream through a StateFlow which can •hang off a Jetpack ViewModel to survive config change And navigation is just a bit more presenter state,
198. Recap •An injected tree of @Composable Presenters can make •a tree of @Composable ViewModel structs which •Molecule can stream through a StateFlow which can •hang off a Jetpack ViewModel to survive config change And navigation is just a bit more presenter state, with a bit of crafty view code.
199. square.com mastodon.social/@rjrjr twitter.com/@rjrjr github.com/cashapp/molecule github.com/rjrjr/compose-backstack github.com/cashapp/turbine
200. square.com mastodon.social/@rjrjr twitter.com/@rjrjr github.com/cashapp/molecule github.com/rjrjr/compose-backstack github.com/cashapp/turbine