Modern Compose Architecture with Circuit

1. Modern Compose Architecture with Circuit Kieran Elliott — Zac Sweers
2. Compose
3. Compose • React-style declarative UI framework • Kotlin- fi rst • Originally developed for Android • Two parts • Compose compiler/runtime • Compose UI @Composable fun Example() { Text("Hello World!") }
4. Compose
5. Compose Architecture
6. Compose Architecture @Composable fun Example()z{ Text("Hello World!") }z
7. Compose Architecture @Composable fun Example(viewModel:zExampleViewModel) { Text(viewModel.text) }z
8. Compose Architecture @Composable fun Example() { val viewModel by viewModel<ExampleViewModel>() Text(viewModel.text) }z
9. Compose Architecture @Composable fun Example() { val viewModel by viewModel<ExampleViewModel>() val text by viewModel.textF l ow().collectAsState() Text(text) }z
10. Compose Architecture @Composable fun Example() { val viewModel by viewModel<ExampleViewModel>() val text by viewModel.textF l ow().collectAsState() Text(text) }
11. Compose Architecture @Composable fun Example() { val viewModel by viewModel<ExampleViewModel>() val text by viewModel.textF l ow().collectAsState() Text(text) }
12. Compose Architecture @Composable fun Example() { val viewModel by viewModel<ExampleViewModel>() Text(viewModel.text) }
13. Compose Architecture @Composable fun Example(viewModel: ExampleViewModel) { Text(viewModel.text) }
14. Compose Architecture viewModel: ExampleViewModel @Composable fun Example(text: String) { Text(text) }
15. Compose Architecture viewModel: ExampleViewModel @Composable fun Example(text: String) { Text(text) }
16. Compose Architecture viewModel: ExampleViewModel
17. Architecture viewModel: ExampleViewModel
18. Architecture class ExampleViewModel { / / . . . }
19. Architecture class ExampleReducer { / / . . . }
20. Architecture class ExampleController { / / . . . }
21. Architecture class ExamplePresenter { / / . . . }
22. Architecture class ExamplePresenter { fun state() : String }
23. Architecture class ExamplePresenter { fun setOnStateChangedListener(listener: Listener) }
24. Architecture class ExamplePresenter { fun state() : Observable<State> }
25. Architecture class ExamplePresenter { fun state() : F l ow<State> }
26. Architecture class ExamplePresenter { fun state() : StateF l ow<State> }
27. Architecture class ExamplePresenter { fun state() : StateF l ow<State> } @Composable fun Example(state: State) { Text(state.text) }
28. class ExamplePresenter { fun state( events: F l ow<Event> ) : StateF l ow<State> } @Composable fun Example( state: State, eventSink: (Event) - > Unit ) { Text(state.text) Button(onClick = { eventSink(Click) }) } Architecture
29. class ExamplePresenter { fun state( events: F l ow<Event> ) : StateF l ow<State> } @Composable fun Example( state: State, eventSink: (Event) - > Unit ) Architecture
30. class ExamplePresenter { fun state( events: F l ow<Event> ) : StateF l ow<State> } @Composable fun Example( state: State, eventSink: (Event) - > Unit ) Architecture '22
31. Architecture '23 class ExamplePresenter { @Composable fun state() : State } @Composable fun Example(state: State)
32. Compose Architecture with Circuit
33. Circuit • Compose- fi rst, compose all the way down • Keyed by "Screen"s • UDF- fi rst • Inspired by Cash App's Broadway architecture & others • Multiplatform • DI-oriented https://github.com/slackhq/circuit
34. Circuit class ExamplePresenter { fun state( events: F l ow<Event> ) : StateF l ow<State> }
35. Circuit class CounterPresenter { fun state( events: F l ow<Event> ) : StateF l ow<State> }
36. Circuit class CounterPresenter { fun state( events: F l ow<Event> ) : StateF l ow<State> } data class State(val count: Int)
37. Circuit class CounterPresenter { fun state( events: F l ow<Event> ) : StateF l ow<State> }
38. Circuit class CounterPresenter { fun state( scope: CoroutineScope, events: F l ow<Event> ) : StateF l ow<State> }
39. Circuit class CounterPresenter { private val count = MutableStateF l ow(State(0)) fun state( scope: CoroutineScope, events: F l ow<Event> ) : StateF l ow<State> }
40. Circuit class CounterPresenter { private val count = MutableStateF l ow(State(0)) fun state( scope: CoroutineScope, events: F l ow<Event> ) : StateF l ow<State> { return count } }
41. Circuit class CounterPresenter { private val count = MutableStateF l ow(State(0)) fun state( scope: CoroutineScope, events: F l ow<Event> ) : StateF l ow<State> { scope.launch { events.collect { count.emit(State(count.value.count + + )) } } return count } }
42. Circuit class CounterPresenter { @Composable fun state() : State { var count by remember { mutableStateOf(0) } return State(count) { event - > count + + } } }
43. Circuit class CounterPresenter { @Composable fun state() : State { var count by rememberRetained { mutableStateOf(0) } return State(count) { count + + } } }
44. Circuit class CounterPresenter { @Composable fun state() : State { var count by rememberSaveable { mutableStateOf(0) } return State(count) { count + + } } }
45. Circuit class CounterPresenter : Presenter<State> { @Composable override fun present() : State { var count by rememberSaveable { mutableStateOf(0) } return State(count) { count + + } } }
46. Circuit interface Presenter<UiState> { @Composable fun present() : UiState }
47. Circuit interface Presenter<UiState> { @Composable fun present() : UiState fun interface Factory { fun create( screen: Screen, navigator: Navigator, context: CircuitContext ) : Presenter < * > ? } }
48. Circuit interface Presenter<UiState> { @Composable fun present() : UiState fun interface Factory { fun create( screen: Screen, navigator: Navigator, context: CircuitContext ) : Presenter < * > ? } } interface Ui<UiState> { @Composable fun Content( state: UiState, modif i er: Modif i er ) fun interface Factory { fun create( screen: Screen, context: CircuitContext ) : Ui < * > ? } }
49. Circuit interface Presenter<UiState> { @Composable fun present() : UiState fun interface Factory { fun create( screen: Screen, navigator: Navigator, context: CircuitContext ) : Presenter < * > ? } } interface Ui<UiState> { @Composable fun Content( state: UiState, modif i er: Modif i er ) fun interface Factory { fun create( screen: Screen, context: CircuitContext ) : Ui < * > ? } }
50. Circuit interface Screen
51. Circuit interface Screen : Parcelable
52. Circuit interface Screen
53. Circuit object CounterScreen( : Screen
54. Circuit data class CounterScreen(val initialCount: Int) : Screen
55. Circuit class CounterPresenter @AssistedInject constructor( @Assisted private val screen: CounterScreen ) : Presenter<State> { @AssistedFactory interface Factory { fun create(screen: CounterScreen) : CounterPresenter } }
56. Circuit interface Presenter<UiState> { @Composable fun present() : UiState fun interface Factory { fun create( screen: Screen, navigator: Navigator, context: CircuitContext ) : Presenter < * > ? } }
57. Circuit interface Presenter<UiState> { @Composable fun present() : UiState fun interface Factory { fun create( screen: Screen, navigator: Navigator, context: CircuitContext ) : Presenter < * > ? } }
58. Navigation interface Navigator { fun goTo(screen: Screen) fun pop() : Screen? fun resetRoot(newRoot: Screen) : List<Screen> }
59. Navigation interface Navigator { fun goTo(screen: Screen) fun pop() : Screen? fun resetRoot(newRoot: Screen) : List<Screen> }
60. Navigation interface Navigator { fun goTo(screen: Screen) fun pop() : Screen? fun resetRoot(newRoot: Screen) : List<Screen> }
61. Navigation interface Navigator { fun goTo(screen: Screen) fun pop() : Screen? fun resetRoot(newRoot: Screen) : List<Screen> }
62. Navigation val backstack = rememberSaveableBackStack { push(HomeScreen) } val navigator = rememberCircuitNavigator(backstack) / / . . . NavigableCircuitContent(navigator, backstack) gist.github.com/adamp/17b4e5cfafc7d44a0023dc2fbdb972e8
63. Circuit class CounterPresenter @AssistedInject constructor( @Assisted private val screen: CounterScreen, @Assisted private val navigator: Navigator, ) : Presenter<State> { @Composable override fun present() : State { } }
64. Circuit class CounterPresenter @AssistedInject constructor( @Assisted private val screen: CounterScreen, @Assisted private val navigator: Navigator, ) : Presenter<State> { @Composable override fun present() : State { navigator.goTo(LoginScreen) } }
65. Circuit interface Presenter<UiState> { @Composable fun present() : UiState fun interface Factory { fun create( screen: Screen, navigator: Navigator, context: CircuitContext ) : Presenter < * > ? } }
66. Circuit interface Presenter<UiState> { @Composable fun present() : UiState fun interface Factory { fun create( screen: Screen, navigator: Navigator, context: CircuitContext ) : Presenter < * > ? } }
67. Circuit interface Presenter<UiState> { @Composable fun present() : UiState fun interface Factory { fun create( screen: Screen, navigator: Navigator, context: CircuitContext ) : Presenter < * > ? } }
68. @Parcelize object CounterScreen : Screen { data class State( val count: Int, val eventSink: (Event) - > Unit ) : CircuitUiState object Event : CircuitUiEvent } Circuit
69. State and Events @Stable interface CircuitUiState @Immutable interface CircuitUiEvent
70. State object NoState : CircuitUiState data class State( val count: Int, val eventSink: (Click) - > Unit ) : CircuitUiState
71. State object NoState : CircuitUiState data class State( val count: Int, val eventSink: (Click) - > Unit ) : CircuitUiState
72. State object NoState : CircuitUiState data class State( val count: Int, val eventSink: (Event) - > Unit ) : CircuitUiState
73. State sealed interface State : CircuitUiState { object Loading : State data class Count( val count: Int, val eventSink: (Event) - > Unit ) : State }
74. State sealed interface State : CircuitUiState { object Loading : State data class Count( val count: Int, val eventSink: (Event) - > Unit ) : State }
75. State sealed interface State : CircuitUiState { object Loading : State data class Count( val count: Int, val eventSink: (Event) - > Unit ) : State }
76. State sealed interface State : CircuitUiState { object Loading : State data class Count( val count: Int, val eventSink: (Event) - > Unit ) : State }
77. Events object Reset : CircuitUiEvent data class Click( val amount: Int = 1 ) : CircuitUiEvent
78. Events object Reset : CircuitUiEvent data class Click( val amount: Int = 1 ) : CircuitUiEvent
79. Events object Reset : CircuitUiEvent data class Click( val amount: Int = 1 ) : CircuitUiEvent
80. Events sealed interface Event : CircuitUiEvent { object Increment : Event object Decrement : Event }
81. Events sealed interface Event : CircuitUiEvent { object Increment : Event object Decrement : Event }
82. State and Events data class State( val count: Int, val eventSink: (Event) - > Unit ) : CircuitUiState sealed interface Event { object Increment : Event object Decrement : Event }
83. State and Events data class State( val count: Int, val eventSink: (Event) - > Unit ) : CircuitUiState sealed interface Event { object Increment : Event object Decrement : Event }
84. Events in State?
85. What’s going on here?
86. Events in State class CounterPresenter : Presenter<State> { @Composable override fun present() : State { var count by remember { mutableStateOf(0) } return State(count) { event - > when (event) { is Increment - > count + + is Decrement - > count - - } } } }
87. Events in State class CounterPresenter : Presenter<State> { @Composable override fun present() : State { var count by remember { mutableStateOf(0) } return State(count) { event - > when (event) { is Increment - > count + + is Decrement - > count - - } } } }
88. Events in State @Composable fun CounterUi( state: CounterScreen.State, ) { val sink = state.eventSink / / . . . Button(onClick = { sink(Event.Increment) }) }
89. Events in State @Composable fun CounterUi( state: CounterScreen.State, ) { val sink = state.eventSink / / . . . Button(onClick = { sink(Event.Increment) }) }
90. Events in State @Composable override fun present() : State { var count by remember { mutableStateOf(0) } return State(count) { event - > when (event) { is Increment - > count + + is Decrement - > count - - } } } @Composable fun CounterUi(state: State) { val sink = state.eventSink Text("Count: ${state.count}") Button(onClick = { sink(Event.Increment) }) }
91. Events in State @Composable override fun present() : State { var count by remember { mutableStateOf(0) } return State(count) { event - > when (event) { is Increment - > count + + is Decrement - > count - - } } } @Composable fun CounterUi(state: State) { val sink = state.eventSink Text("Count: ${state.count}") Button(onClick = { sink(Event.Increment) }) }
92. Events in State @Composable override fun present() : State { var count by remember { mutableStateOf(0) } return State(count) { event - > when (event) { is Increment - > count + + is Decrement - > count - - } } } @Composable fun CounterUi(state: State) { val sink = state.eventSink Text("Count: ${state.count}") Button(onClick = { sink(Event.Increment) }) }
93. Events in State @Composable override fun present() : State { var count by remember { mutableStateOf(0) } return State(count) { event - > when (event) { is Increment - > count + + is Decrement - > count - - } } } @Composable fun CounterUi(state: State) { val sink = state.eventSink Text("Count: ${state.count}") Button(onClick = { sink(Event.Increment) }) }
94. Events in State @Composable override fun present() : State { var count by remember { mutableStateOf(0) } return State(count) { event - > when (event) { is Increment - > count + + is Decrement - > count - - } } } @Composable fun CounterUi(state: State) { val sink = state.eventSink Text("Count: ${state.count}") Button(onClick = { sink(Event.Increment) }) }
95. Events in State @Composable override fun present() : State { var count by remember { mutableStateOf(0) } return State(count) { event - > when (event) { is Increment - > count + + is Decrement - > count - - } } } @Composable fun CounterUi(state: State) { val sink = state.eventSink Text("Count: ${state.count}") Button(onClick = { sink(Event.Increment) }) }
96. Events in State @Composable override fun present() : State { var count by remember { mutableStateOf(0) } return State(count) { event - > when (event) { is Increment - > count + + is Decrement - > count - - } } } @Composable fun CounterUi(state: State) { val sink = state.eventSink Text("Count: ${state.count}") Button(onClick = { sink(Event.Increment) }) }
97. Events in State @Composable override fun present() : State { var count by remember { mutableStateOf(0) } return State(count) { event - > when (event) { is Increment - > count + + is Decrement - > count - - } } } @Composable fun CounterUi(state: State) { val sink = state.eventSink Text("Count: ${state.count}") Button(onClick = { sink(Event.Increment) }) }
98. Events in State @Composable override fun present() : State { var count by remember { mutableStateOf(0) } return State(count) { event - > when (event) { is Increment - > count + + is Decrement - > count - - } } } @Composable fun CounterUi(state: State) { val sink = state.eventSink Text("Count: ${state.count}") Button(onClick = { sink(Event.Increment) }) }
99. Testing
100. Why is testing hard? • It shouldn’t be 😬 • Historic best practices (on Android): • Advocate for patterns that make testing hard • Encourage asserting called methods instead of verifying behaviour • Use of Android components in business logic encourages mocking
101. UDF
102. UDF + Compose
103. UDF + Compose =
104. Presenter Tests class CounterPresenter : Presenter<State> { @Composable override fun present() : State { var count by remember { mutableStateOf(0) } return State(count) { event - > when (event) { is Increment - > count + + is Decrement - > count - - } } } }
105. Presenter Tests @Test fun `present - verify state and event`() = runTest { }a
106. Presenter Tests @Test fun `present - verify state and event`() = runTest { val presenter = CounterPresenter() }a
107. Presenter Tests @Test fun `present - verify state and event`() = runTest { val presenter = CounterPresenter() presenter.test { / / . . . } }a https://github.com/cashapp/turbine
108. Presenter Tests @Test fun `present - verify state and event`() = runTest { val presenter = CounterPresenter() presenter.test { val f i rst = awaitItem() assertThat(f i rst.count).isEqualTo(0) } }a
109. Presenter Tests @Test fun `present - verify state and event`() = runTest { val presenter = CounterPresenter() presenter.test { val f i rst = awaitItem() assertThat(f i rst.count).isEqualTo(0) f i rst.eventSink(Event.Increment) } }a
110. Presenter Tests @Test fun `present - verify state and event`() = runTest { val presenter = CounterPresenter() presenter.test { val f i rst = awaitItem() assertThat(f i rst.count).isEqualTo(0) f i rst.eventSink(Event.Increment) assertThat(awaitItem().count).isEqualTo(1) } }a
111. UI Tests @Composable fun CounterUi(state: State) { val sink = state.eventSink / / . . . Button(onClick = { sink(Event.Increment) }) }
112. UI Tests @Test fun display_count_message() { composeTestRule.run { setContent { / / . . . } } }a
113. UI Tests @Test fun display_count_message() { composeTestRule.run { setContent { CounterUi( CounterScreen.State(5) ) } } }
114. UI Tests @Test fun display_count_message() { composeTestRule.run { setContent { CounterUi( CounterScreen.State(5) ) } onNode(hasText("Count: 5")) .assertIsDisplayed() } }
115. UI Tests: Snapshots
116. UI Tests: Previews
117. How do I use Circuit?
118. Circuit val conf i g = CircuitConf i g.Builder() / / . . . .build()
119. Circuit val conf i g = CircuitConf i g.Builder() / / . . . .build() val backstack = rememberSaveableBackStack { push(HomeScreen) }
120. Circuit val conf i g = CircuitConf i g.Builder() / / . . . .build() val backstack = rememberSaveableBackStack { push(HomeScreen) } val navigator = rememberCircuitNavigator(backstack)
121. Circuit val conf i g = CircuitConf i g.Builder() / / . . . .build() val backstack = rememberSaveableBackStack { push(HomeScreen) } val navigator = rememberCircuitNavigator(backstack) CircuitCompositionLocals(conf i g) { NavigableCircuitContent(navigator, backstack) }
122. Circuit val conf i g = CircuitConf i g.Builder() / / . . . .build() val backstack = rememberSaveableBackStack { push(HomeScreen) } val navigator = rememberCircuitNavigator(backstack) CircuitCompositionLocals(conf i g) { NavigableCircuitContent(navigator, backstack) }
123. Circuit val conf i g = CircuitConf i g.Builder() / / . . . .build() CircuitCompositionLocals(conf i g) { CircuitContent(HomeScreen) }
124. Circuit override fun onCreate(savedInstanceState: Bundle?) { setContent { val conf i g = CircuitConf i g.Builder() / / . . . .build() CircuitCompositionLocals(conf i g) { CircuitContent(HomeScreen) } } }
125. Circuit fun main() = singleWindowApplication("Circuit") { val conf i g = CircuitConf i g.Builder() / / . . . .build() CircuitCompositionLocals(conf i g) { CircuitContent(HomeScreen) } }
126. Other Bells and Whistles
127. Overlays
128. Overlays
129. Overlays CircuitContent(HomeScreen)a
130. Overlays ContentWithOverlays { CircuitContent(HomeScreen) }a
131. Overlays val overlayHost = LocalOverlayHost.current LaunchedEffect(Unit) { / / ☇ suspending! val result = overlayHost.show( BottomSheetOverlay( model = . . . , onDismiss = { . . . }, ) { model, overlayNavigator - > / / Content } ) / / Do something with the result }
132. Overlays val overlayHost = LocalOverlayHost.current LaunchedEffect(Unit) { / / ☇ suspending! val result = overlayHost.show( BottomSheetOverlay( model = . . . , onDismiss = { . . . }, ) { model, overlayNavigator - > / / Content } ) / / Do something with the result }
133. Overlays val overlayHost = LocalOverlayHost.current LaunchedEffect(Unit) { val newFilters = overlayHost.show( FiltersOverlay() ) eventSink(UpdateFilters(newFilters)) }
134. Overlays interface Overlay<Result : Any> { @Composable fun Content(navigator: OverlayNavigator<Result>) }
135. State Restoration
136. State Restoration val compositionState by remember { . . . }
137. State Restoration val presenterState by rememberRetained { . . . }
138. State Restoration val processDeath by rememberSaveable { . . . }
139. Composite Presenters
140. Composite Presenters class ListPresenter class DetailPresenter
141. Composite Presenters ListPresenter DetailPresenter https://developer.android.com/guide/topics/large-screens/large-screen-canonical-layouts#list-detail
142. Composite Presenters ListPresenter DetailPresenter https://developer.android.com/guide/topics/large-screens/large-screen-canonical-layouts#list-detail
143. Composite Presenters class TabletHomePresenter @Inject constructor( private val listPresenter: ListPresenter, private val detailPresenter: DetailPresenter, ) : Presenter<CompositeState> { @Composable override fun present() : CompositeState { val listState = listPresenter.present() val detailState = detailPresenter.present() return CompositeState(listState, detailState) } }
144. DI
145. DI @Module interface CircuitModule { @Multibinds fun presenterFactories() : Set<Presenter.Factory> @Multibinds fun viewFactories() : Set<Ui.Factory> }
146. DI @Provides fun provideCircuit( presenterFactories: Set<Presenter.Factory>, uiFactories: Set<Ui.Factory>, ) : CircuitConf i g { return CircuitConf i g.Builder() .addPresenterFactories(presenterFactories) .addUiFactories(uiFactories) .build() }
147. DI (w/ Anvil) @CircuitInject(CounterScreen : : class, AppScope : : class) class CounterPresenter @Inject constructor( private val repository: CounterRespository ) : Presenter<State> { / / . . . } @CircuitInject(CounterScreen : : class, AppScope : : class) @Composable fun Counter(state: State, modif i er: Modif i er) { / / . . . }
148. Interop
149. :samples:interop
150. Multiplatform
151. Multiplatform • Goal is multiplatform presentation logic, not multiplatform UI • Current focus is JVM and Desktop use cases
152. Advanced Use Cases
153. Advanced Use Cases • Navigate to legacy Activity or Fragment using Interceptors • Tracing using EventListener and CircuitContext tags • Extract value from running Circuit environment using • Taking control of con fi g changes
154. Examples! CatchUp STAR Counter Tacos github.com/zacsweers/catchup
156. Future • Improved KMP/KMM support • Inter-Screen transitions API • Lint checks • ???
157. Thank you,
 and don’t forget
 to vote @ZacSweers @kierse KotlinConf’23 Amsterdam