Architectures in the compose world
0 likes•345 views
The document discusses the architecture of Android Jetpack Compose, emphasizing unidirectional data flow via MVVM and MVI patterns. It covers the implementation of composable functions, state management, view models, and navigation within Compose applications. Additionally, it includes links to resources and examples to facilitate understanding of Compose's architectural elements.
Architectures in the compose world
- 1. @fabioCollini Fabio Collini Architectures in the Compose World
- 2. Architecture
- 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)
- 20. UI = f(state) always most of the times
- 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…
- 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
- 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(" . . . ") { / / . . . } }
- 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 }
- 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?
- 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) } } }_
- 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 } }_
- 99. Wrapping up
- 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