Compose is stable, it's time to integrate it into our apps! But it can be harder than expected and there are some questions to answer. Can the same architecture of a View-based app be reused or should we change it? Should the Compose code be aware of the architecture at all? And should the non UI code be changed to start using Compose? What can be replaced with a Composable, only the layouts or also something else? Probably the best answer to all these questions is “it depends”, in this talk we’ll see some reasons and how to leverage Compose and the other tools to create a good architecture. Compose is more than just a UI framework and it can seem appealing to use it in a big portion of an app, a good architecture can be useful to limit this portion and use it only when necessary.

1. @fabioCollini
Fabio Collini
Architectures in the
Compose World

2. Architecture

3. State
UI
state event
https://developer.android.com/jetpack/compose/architecture

4. https://developer.android.com/jetpack/compose/architecture
State
UI
state event

5. State
UI
state event

6. State
Composable
state event

7. ViewModel
Composable
state event

8. ViewModel
Composable
UseCase
state event

9. ViewModel
Composable
UseCase
Repository
state event

10. ViewModel
Composable
UseCase
Repository
state event
source of truth

11. ViewModel
Composable
UseCase
Repository
state event
state event
source of truth

12. ViewModel
Composable
UseCase
Repository
state event
state event
state event
source of truth

13. MVVM / MVI

14. MVVM
/
MVI
Both MVVM and MVI are
unidirectional data
fl
ow
architectures

15. MVVM
The ViewModel accepts
events and exposes the
state

16. MVI
The state is a single
immutable object

17. MVI
The state is a single
immutable object
The events are managed
using a
fl
ow

18. UI = f(state)

19. UI = f(state)
always

20. UI = f(state)
always
most of the times

21. https://medium.com/androiddevelopers/livedata-with-snackbar-navigation-and-other-events-the-singleliveevent-case-ac2622673150

22. https://proandroiddev.com/android-singleliveevent-redux-with-kotlin-
fl
ow-b755c70bb055

23. SingleLiveEvent
SharedFlow
Channel
State + LaunchedEffect

24. SingleLiveEvent
SharedFlow
Channel
State + LaunchedEffect
Lots of edge cases :(
Not an of
fi
cial solution yet

25. State

26. MVI
The state is a single
immutable object

27. data class State(
val notes: List<Note>,
/
/
.
.
.
)

28. data class State(
val notes: List<Note>,
/
/
.
.
.
)
data class Note(
val id: Int,
val title: String,
val checked: Boolean
)

29. @Composable
fun Notes(state: State, onCheckedChange: (Note)
-
>
Unit) {
/
/
.
.
.
}

30. Notes(
state = state,
onCheckedChange = { noteToToggle
-
>
state = state.copy(
notes = state.notes
.map { note
-
>
if (note.id
=
=
noteToToggle.id) {
note.copy(checked = !note.checked)
} else {
note
}
}
)
}
)

31. Notes(
state = state,
onCheckedChange = { noteToToggle
-
>
state = state.copy(
notes = state.notes
.map { note
-
>
if (note.id
=
=
noteToToggle.id) {
note.copy(checked = !note.checked)
} else {
note
}
}
)
}
)

32. data class Note(
val id: Int,
val title: String,
val checked: Boolean
)

33. data class Note(
val id: Int,
val title: String,
var checked: Boolean
)_

34. data class Note(
val id: Int,
val title: String,
var checked: Boolean
)_
Notes(
state = state,
onCheckedChange = { noteToToggle
-
>
state = state.copy(
notes = state.notes
.map { note
-
>
if (note.id
=
=
noteToToggle.id) {
note.copy(checked = !note.checked)
} else {
note
}
}
)
}
)

35. data class Note(
val id: Int,
val title: String,
var checked: Boolean
)
Notes(
state = state,
onCheckedChange = { noteToToggle
-
>
noteToToggle.checked = !noteToToggle.checked
}
)
Not
so
easy…

36. https://developer.android.com/reference/kotlin/androidx/compose/runtime/Immutable

37. https://developer.android.com/reference/kotlin/androidx/compose/runtime/Stable

40. data class Note(
val id: Int,
val title: String,
var checked: Boolean
)
Notes(
state = state,
onCheckedChange = { noteToToggle
-
>
noteToToggle.checked = !noteToToggle.checked
}
)

41. data class Note(
val id: Int,
val title: String,
) {
var checked: Boolean by mutableStateOf(false)
}
Notes(
state = state,
onCheckedChange = { noteToToggle
-
>
noteToToggle.checked = !noteToToggle.checked
}
)

42. Composable

43. Xml
fi
les Composables

44. Xml
fi
les
Custom Views
Composables

45. Xml
fi
les
Custom Views
Fragments
Composables

46. Xml
fi
les
Custom Views
Fragments
Activities
Composables

47. Xml
fi
les Composables

48. Xml
fi
les
Composables
with
state hoisting

49. Custom Views Composables

50. Custom Views
Composables
with
remember /
rememberSavable

51. Fragments
Activities
Composables

52. Fragments
Activities
Screens
with
ViewModel

53. Fragments
Activities
Screens
with
ViewModel
Composables
with
remember /
rememberSavable
Custom Views
Composables
with
state hoisting
Xml
fi
les

54. Screen

55. class MyFragment : Fragment() {
override fun onCreateView(
.
.
.
) =
ComposeView(requireContext()).apply {
setContent {
MyScreen()
}
}
}

56. class MyFragment : Fragment() {
override fun onCreateView(
.
.
.
) =
ComposeView(requireContext()).apply {
setContent {
MyScreen()
}
_
_
}_
}
@Composable
fun MyScreen() {
/
/
.
.
.
}

57. class MyFragment : Fragment() {
override fun onCreateView(
.
.
.
) =
ComposeView(requireContext()).apply {
viewLifecycleOwner.lifecycleScope.launch {
/
/
.
.
.
}
setContent {
MyScreen()
}
_
_
}_
}
@Composable
fun MyScreen() {
/
/
.
.
.
}

58. class MyFragment : Fragment() {
override fun onCreateView(
.
.
.
) =
ComposeView(requireContext()).apply {
viewLifecycleOwner.lifecycleScope.launch {
/
/
.
.
.
}
setContent {
MyScreen()
}
}
}
@Composable
fun MyScreen() {
/
/
.
.
.
val scope = rememberCoroutineScope()
}

59. class MyFragment : Fragment() {
override fun onCreateView(
.
.
.
) =
ComposeView(requireContext()).apply {
viewLifecycleOwner.lifecycleScope.launch {
/
/
.
.
.
}
setContent {
MyScreen()
}
}
}
@Composable
fun MyScreen() {
/
/
.
.
.
val scope = rememberCoroutineScope()
LaunchedEffect("
.
.
.
") {
/
/
.
.
.
}
}

60. https://developer.android.com/jetpack/compose/lifecycle

61. https://developer.android.com/jetpack/compose/lifecycle

62. @Singleton
class MyClass @Inject constructor() {
/
/
.
.
.
}

63. @Singleton
class MyClass @Inject constructor() {
/
/
.
.
.
}
@AndroidEntryPoint
class MyFragment : Fragment() {
@Inject
lateinit var myInstance: MyClass
/
/
.
.
.
}

64. @Singleton
class MyClass @Inject constructor() {
/
/
.
.
.
}

65. @Singleton
class MyClass @Inject constructor() {
/
/
.
.
.
}
@InstallIn(SingletonComponent
:
:
class)
@EntryPoint
interface MyEntryPoint {
val myInstance: MyClass
}

66. @Composable
inline fun <reified T : Any> rememberSingletonEntryPoint(): T {
val context = LocalContext.current
return remember {
EntryPointAccessors.fromApplication(context, T
:
:
class.java)
}
}

67. @Singleton
class MyClass @Inject constructor() {
/
/
.
.
.
}
@InstallIn(SingletonComponent
:
:
class)
@EntryPoint
interface MyEntryPoint {
val myInstance: MyClass
}

68. @Singleton
class MyClass @Inject constructor() {
/
/
.
.
.
}
@InstallIn(SingletonComponent
:
:
class)
@EntryPoint
interface MyEntryPoint {
val myInstance: MyClass
}
@Composable
fun MyScreen() {
val entryPoint = rememberSingletonEntryPoint<MyEntryPoint>()
val myInstance = entryPoint.myInstance
}

69. @ActivityScoped
class MyClass @Inject constructor() {
/
/
.
.
.
}
@InstallIn(ActivityComponent
:
:
class)
@EntryPoint
interface MyEntryPoint {
val myInstance: MyClass
}
@Composable
fun MyScreen() {
val entryPoint = rememberActivityEntryPoint<MyEntryPoint>()
val myInstance = entryPoint.myInstance
}

70. @ComposableScoped
class MyClass @Inject constructor() {
/
/
.
.
.
}
@InstallIn(ActivityComponent
:
:
class)
@EntryPoint
interface MyEntryPoint {
val myInstance: MyClass
}
@Composable
fun MyScreen() {
val entryPoint = rememberActivityEntryPoint<MyEntryPoint>()
val myInstance = entryPoint.myInstance
}

71. @ComposableScoped

72. @Scope
annotation class ComposableScoped

73. @Scope
annotation class ComposableScoped
@ComposableScoped
@DefineComponent(parent = ActivityComponent
:
:
class)
interface ComposableComponent_

74. @Scope
annotation class ComposableScoped
@ComposableScoped
@DefineComponent(parent = ActivityComponent
:
:
class)
interface ComposableComponent_
@DefineComponent.Builder
interface ComposableComponentBuilder {
fun build(): ComposableComponent
}

75. @Scope
annotation class ComposableScoped
@ComposableScoped
@DefineComponent(parent = ActivityComponent
:
:
class)
interface ComposableComponent_
@DefineComponent.Builder
interface ComposableComponentBuilder {
fun build(): ComposableComponent
}
@EntryPoint
@InstallIn(ActivityComponent
:
:
class)
interface ComposableComponentBuilderEntryPoint {
val componentBuilder: ComposableComponentBuilder
}_

76. @Composable
inline fun <reified T : Any> rememberComposableEntryPoint(): T {
val context = LocalContext.current
return remember {
val entryPoint = EntryPointAccessors.fromActivity(
context.getActivity(), ComposableComponentBuilderEntryPoint
:
:
class.java
)
EntryPoints.get(entryPoint.componentBuilder.build(), T
:
:
class.java)
}
}

77. @ComposableScoped
class MyClass @Inject constructor() {
/
/
.
.
.
}

78. @ComposableScoped
class MyClass @Inject constructor() {
/
/
.
.
.
}
@InstallIn(ComposableComponent
:
:
class)
@EntryPoint
interface MyEntryPoint {
val myInstance: MyClass
}

79. @ComposableScoped
class MyClass @Inject constructor() {
/
/
.
.
.
}
@InstallIn(ComposableComponent
:
:
class)
@EntryPoint
interface MyEntryPoint {
val myInstance: MyClass
}
@Composable
fun MyScreen() {
val entryPoint = rememberComposableEntryPoint<MyEntryPoint>()
val myInstance = entryPoint.myInstance
}

80. ViewModel

81. Are ViewModels
necessary
(or useful)
using Compose?

82. https://www.youtube.com/watch?v=rmv2ug-wW4U

83. val navController = rememberNavController()
NavHost(navController = navController) {
}_

84. val navController = rememberNavController()
NavHost(navController = navController, startDestination = "home") {
composable("home") {
HomeScreen()
}
}_

85. val navController = rememberNavController()
NavHost(navController = navController, startDestination = "home") {
composable("home") {
HomeScreen()
}
composable(
route = "detail/{id}",
arguments = listOf(navArgument("id") { type = IntType })
) {
DetailScreen()
}
}_

86. val navController = rememberNavController()
NavHost(navController = navController, startDestination = "home") {
composable("home") {
HomeScreen(onClick = { navController.navigate("detail/123") })
}
composable(
route = "detail/{id}",
arguments = listOf(navArgument("id") { type = IntType })
) {
DetailScreen()
}
}_

87. class DetailViewModel constructor(
) : ViewModel() {
}_

88. @HiltViewModel
class DetailViewModel @Inject constructor(
private val myUseCase: MyUseCase,
) : ViewModel() {
}_

89. @HiltViewModel
class DetailViewModel @Inject constructor(
private val myUseCase: MyUseCase,
savedStateHandle: SavedStateHandle
) : ViewModel() {
init {
val id = savedStateHandle.get<Int>("id")
}
}_

90. @HiltViewModel
class DetailViewModel @Inject constructor(
private val myUseCase: MyUseCase,
savedStateHandle: SavedStateHandle
) : ViewModel() {
init {
val id = savedStateHandle.get<Int>("id")
viewModelScope.launch {
myUseCase.suspendMethod(id)
}
}
}_

91. @HiltViewModel
class DetailViewModel @Inject constructor(
private val myUseCase: MyUseCase,
savedStateHandle: SavedStateHandle
) : ViewModel() {
var state by mutableStateOf("")
private set
init {
val id = savedStateHandle.get<Int>("id")
viewModelScope.launch {
state = myUseCase.suspendMethod(id)
}
}
}_

92. @Composable
fun DetailScreen() {
}_

93. @Composable
fun DetailScreen() {
val viewModel = hiltViewModel<DetailViewModel>()
}_

94. @Composable
fun DetailScreen() {
val viewModel = hiltViewModel<DetailViewModel>()
val stateConnectedToViewModelLifecycle = viewModel.state
}_

95. @Composable
fun DetailScreen() {
val viewModel = hiltViewModel<DetailViewModel>()
val stateConnectedToViewModelLifecycle = viewModel.state
val remembered = remember {
"executed again on configuration change and when navigating back"
}
}_

96. @Composable
fun DetailScreen() {
val viewModel = hiltViewModel<DetailViewModel>()
val stateConnectedToViewModelLifecycle = viewModel.state
val remembered = remember {
"executed again on configuration change and when navigating back"
}
val saveable = rememberSaveable {
"saved in a bundle"
}
}_

97. @Composable
fun DetailScreen() {
val viewModel = hiltViewModel<DetailViewModel>()
val stateConnectedToViewModelLifecycle = viewModel.state
val remembered = remember {
"executed again on configuration change and when navigating back"
}
val saveable = rememberSaveable {
"saved in a bundle"
}
LaunchedEffect(Unit) {
/
/
executed again on configuration change and when navigating back
}
}_

98. https://proandroiddev.com/viewmodels-using-compose-mutablestate
fl
ows-or-mutablestates-64d34ba548c5

99. Wrapping
up

100. Wrapping
up
unidirectional data
fl
ow

101. Wrapping
up
unidirectional data
fl
ow
screens instead of fragments

102. Wrapping
up
unidirectional data
fl
ow
screens instead of fragments
viewModels are still useful

103. Links
&
contacts
Architecting your Compose UI
developer.android.com/jetpack/compose/architecture
Jose Alcérreca - LiveData with SnackBar, Navigation and other events (the SingleLiveEvent case)
medium.com/androiddevelopers/livedata-with-snackbar-navigation-and-other-events-the-singleliveevent-case-ac2622673150
Michael Ferguson - Android SingleLiveEvent Redux with Kotlin Flow
proandroiddev.com/android-singleliveevent-redux-with-kotlin-flow-b755c70bb055
Lifecycle of composables
developer.android.com/jetpack/compose/lifecycle
Manuel Vivo - A Compose state of mind: Using Jetpack Compose's automatic state observation
www.youtube.com/watch?v=rmv2ug-wW4U
Fabio Collini - ViewModels using Compose: MutableStateFlows or MutableStates?
proandroiddev.com/viewmodels-using-compose-mutablestateflows-or-mutablestates-64d34ba548c5
@fabioCollini
linkedin.com/in/fabiocollini
github.com/fabioCollini
medium.com/@fabioCollini

104. THANKS
FOR YOUR
ATTENTION

105. QUESTIONS?
@fabioCollini