Building Multiplatform Apps with Compose

Transcript

1. Mohit Sarveiya Building Multiplatform Apps with Compose @heyitsmohit@androiddev.social
2. Building Multiplatform Apps with Compose • Setup Project
3. Building Multiplatform Apps with Compose • Setup Project • Share Compose UI
4. Building Multiplatform Apps with Compose • Setup Project • Share Compose UI • SwiftUI & Compose Interop
5. Building Multiplatform Apps with Compose • Setup Project • Share Compose UI • SwiftUI & Compose Interop • Architecture & Navigation
6. Android Kotlin/JVM iOS Swift/LLVM Web JS Desktop Kotlin/JVM
7. Share
8. API Share
9. API Share Cache
10. API Share Cache Business Logic
11. API Share Cache Business Logic UI Components
12. https: / / github.com/JetBrains/compose-multiplatform compose-multiplatform
13. Compose Multiplatform • Android (via Jetpack Compose) • Desktop (Windows, Mac OS, Linux) • Web (Experimental)
14. Compose Multiplatform • Android (via Jetpack Compose) • Desktop (Windows, Mac OS, Linux) • Web (Experimental) • iOS (Alpha)
15. Compose Multiplatform
16. Compose Multiplatform
17. UI Structure
18. androidApp iOSApp desktopApp shared Structure
19. shared src commonMain androidMain iOSMain Shared Module
20. shared src commonMain androidMain iOSMain build.gradle.kts Shared Module
21. plugins { kotlin("multiplatform") } val commonMain by getting { dependencies { implementation(compose.ui) implementation(compose.foundation) implementation(compose.material) implementation(compose.runtime) } } Shared Module
22. plugins { kotlin("multiplatform") } val commonMain by getting { dependencies { implementation(compose.ui) implementation(compose.foundation) implementation(compose.material) implementation(compose.runtime) } } Shared Module
23. shared src commonMain androidMain iOSMain Shared Module
24. UI Structure App Root View Android iOS
25. UI Structure App Root View Android iOS
26. shared src commonMain androidMain iOSMain UI Structure
27. shared src commonMain androidMain iOSMain ImagesApp.commmon.kt UI Structure
28. fun ImagesAppCommon() { Scaffold( topBar = { TopAppBar( ... ) }, content = { ... } ) } UI Structure
29. fun ImagesAppCommon() { Scaffold( topBar = { TopAppBar( ... ) }, content = { ... } ) } UI Structure
30. shared src commonMain androidMain iOSMain ImagesApp.commmon.kt ImagesAppTheme.kt Shared Module
31. App Theme val LightColorPalette = lightColors( ... ) val DarkColorPalette = darkColors( ... ) @Composable fun ImagesAppTheme( darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit ) { MaterialTheme( colors = if (darkTheme) DarkColorPalette else LightColorPalette, content = content ) }
32. App Theme val LightColorPalette = lightColors( ... ) val DarkColorPalette = darkColors( ... ) @Composable fun ImagesAppTheme( darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit ) { MaterialTheme( colors = if (darkTheme) DarkColorPalette else LightColorPalette, content = content ) }
33. shared src commonMain androidMain iOSMain ImagesApp.android.kt Shared Module
34. UI Structure @Composable fun MainAndroid() { ImagesAppTheme { ImagesAppCommon() } }
35. androidApp iOSApp desktopApp shared UI Structure
36. UI Structure class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { MainAndroid() } } }
37. UI Structure class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { MainAndroid() } } }
38. shared src commonMain androidMain iOSMain ImagesApp.iOS.kt Shared Module
39. UI Structure fun MainiOS(): UIViewController ComposeUIViewController { ImagesAppCommon() }
40. UI Structure fun MainiOS(): UIViewController = ComposeUIViewController { ImagesAppCommon() }
41. androidApp iOSApp desktopApp shared UI Structure
42. UI Structure @main struct iOSApp: App { 
 var body: some Scene { WindowGroup { ContentView() } } 
 }
43. UI Structure @main struct iOSApp: App { 
 var body: some Scene { WindowGroup { ContentView() } } 
 }
44. UI Structure struct ComposeView: UIViewControllerRepresentable { 
 func makeUIViewController(context: Context) -> UIViewController { let controller = Main_iosKt.MainiOS() return controller 
 } }
45. UI Structure struct ComposeView: UIViewControllerRepresentable { 
 func makeUIViewController(context: Context) -> UIViewController { let controller = Main_iosKt.MainiOS() return controller } }
46. UI Structure struct ComposeView: UIViewControllerRepresentable { 
 func makeUIViewController(context: Context) -> UIViewController { let controller = Main_iosKt.MainiOS() return controller } }
47. UI Structure struct ContentView: View { 
 var body: some View { ZStack { ComposeView() ...
 } } 
 }
48. UI Structure struct ContentView: View { 
 var body: some View { ZStack { ComposeView() ...
 } } 
 }
49. UI Structure struct ContentView: View { 
 var body: some View { ZStack { ComposeView() ...
 } } 
 } UIWindowScene UIWindow ComposeWindow SkikkoUIView View Hierarchy
50. UI Structure struct ContentView: View { 
 var body: some View { ZStack { ComposeView() ...
 } } 
 } UIWindowScene UIWindow ComposeWindow SkikkoUIView View Hierarchy
51. UI Structure struct ContentView: View { 
 var body: some View { ZStack { ComposeView() ...
 } } 
 } UIWindowScene UIWindow ComposeWindow SkikkoUIView View Hierarchy
52. https: / / github.com/JetBrains/skiko Skiko
53. UI Structure App Root View Android iOS
54. UI Structure
55. Challenge: Image Loading
56. https: / / github.com/coil-kt/coil/issues/842 Coil-kt
57. shared src resource image1.jpeg image2.jpeg image3.jpeg Shared Module
58. val commonMain by getting { dependencies { implementation(compose.components.resources) } } Shared Module
59. val commonMain by getting { dependencies { implementation(compose.components.resources) } } Shared Module
60. class ImageProvider { suspend fun getImageBitmap(picture: ImageData): ImageBitmap = resource(picture.url).readBytes().toImageBitmap() } Shared Module
61. class ImageProvider { suspend fun getImageBitmap(picture: ImageData): ImageBitmap = resource(picture.url).readBytes() } Shared Module
62. class ImageProvider { suspend fun getImageBitmap(picture: ImageData): ImageBitmap = resource(picture.url).readBytes().toImageBitmap() } Shared Module
63. Except/Actual
64. shared src commonMain androidMain Shared Module iOSMain
65. expect fun ByteArray.toImageBitmap(): ImageBitmap Shared Module
66. shared src commonMain androidMain Shared Module iOSMain
67. actual fun ByteArray.toImageBitmap(): ImageBitmap = toAndroidBitmap().asImageBitmap() fun ByteArray.toAndroidBitmap(): Bitmap { return BitmapFactory.decodeByteArray(this, 0, size) } Shared Module
68. actual fun ByteArray.toImageBitmap(): ImageBitmap = toAndroidBitmap().asImageBitmap() fun ByteArray.toAndroidBitmap(): Bitmap { return BitmapFactory.decodeByteArray(this, 0, size) } Shared Module
69. actual fun ByteArray.toImageBitmap(): ImageBitmap = toAndroidBitmap().asImageBitmap() fun ByteArray.toAndroidBitmap(): Bitmap { return BitmapFactory.decodeByteArray(this, 0, size) } Shared Module
70. actual fun ByteArray.toImageBitmap(): ImageBitmap = toAndroidBitmap().asImageBitmap() fun ByteArray.toAndroidBitmap(): Bitmap { return BitmapFactory.decodeByteArray(this, 0, size) } Shared Module
71. shared src commonMain androidMain Shared Module iOSMain
72. actual fun ByteArray.toImageBitmap(): ImageBitmap = Image.makeFromEncoded(this).toComposeImageBitmap() Shared Module
73. actual fun ByteArray.toImageBitmap(): ImageBitmap = Image.makeFromEncoded(this).toComposeImageBitmap() Shared Module
74. actual fun ByteArray.toImageBitmap(): ImageBitmap = Image.makeFromEncoded(this).toComposeImageBitmap() Shared Module
75. class ImageProvider { suspend fun getImageBitmap(picture: ImageData): ImageBitmap = resource(picture.url).readBytes().toImageBitmap() } Shared Module
76. UI Structure
77. @Composable fun ImagesList(images: List<ImageData>) { Column { LazyVerticalGrid( columns = GridCells.Fixed(3) ) { items(images) { SplashImage( imageData = it ) } } } } UI Structure
78. @Composable fun ImagesList(images: List<ImageData>) { Column { LazyVerticalGrid( columns = GridCells.Fixed(3) ) { items(images) { SplashImage( imageData = it ) } } } } UI Structure
79. @Composable fun ImagesList(images: List<ImageData>) { Column { LazyVerticalGrid( columns = GridCells.Fixed(3) ) { items(images) { SplashImage( imageData = it ) } } } } UI Structure
80. @Composable fun SplashImage(imageData: ImageData) { val imageProvider = LocalImageProvider.current var imageBitmap by remember(imageData) { 
 mutableStateOf<ImageBitmap?>(null) 
 } LaunchedEffect(imageData) { imageBitmap = imageProvider.getImageBitmap(imageData) } imageBitmap ?. let { Image( bitmap = bitmap, 
 ... ) } } UI Structure
81. @Composable fun SplashImage(imageData: ImageData) { val imageProvider = LocalImageProvider.current var imageBitmap by remember(imageData) { 
 mutableStateOf<ImageBitmap?>(null) 
 } LaunchedEffect(imageData) { imageBitmap = imageProvider.getImageBitmap(imageData) } imageBitmap ?. let { Image( bitmap = bitmap, 
 ... ) } } UI Structure
82. @Composable fun SplashImage(imageData: ImageData) { val imageProvider = LocalImageProvider.current var imageBitmap by remember(imageData) { 
 mutableStateOf<ImageBitmap?>(null) 
 } LaunchedEffect(imageData) { imageBitmap = imageProvider.getImageBitmap(imageData) } imageBitmap ?. let { Image( bitmap = bitmap, 
 ... ) } } UI Structure
83. @Composable fun SplashImage(imageData: ImageData) { val imageProvider = LocalImageProvider.current var imageBitmap by remember(imageData) { 
 mutableStateOf<ImageBitmap?>(null) 
 } LaunchedEffect(imageData) { imageBitmap = imageProvider.getImageBitmap(imageData) } imageBitmap ?. let { Image( bitmap = bitmap, 
 ... ) } } UI Structure
84. UI Structure
85. UI Structure App Root View Android iOS Images List Images Details Shared
86. Challenges: App Architecture, Navigation
87. Compose UI View Model UI State Events
88. UI Structure App Root View Android iOS Images List Images Details Shared
89. UI Structure App Root View Android iOS Images List Images Details Shared View Model
90. Shared Module shared src commonMain androidMain iOSMain
91. Shared Module shared src commonMain androidMain iOSMain ImagesListViewModel.kt
92. App Architecture sealed class ImagesListUiState { object Loading: ImagesListUiState() data class Success( val images: List<ImageData> ): ImagesListUiState() data class Error( val errorMessage: String ): ImagesListUiState() }
93. App Architecture sealed class ImagesListUiState { object Loading: ImagesListUiState() data class Success( val images: List<ImageData> ): ImagesListUiState() data class Error( val errorMessage: String ): ImagesListUiState() }
94. App Architecture sealed class ImagesListUiState { object Loading: ImagesListUiState() data class Success( val images: List<ImageData> ): ImagesListUiState() data class Error( val errorMessage: String ): ImagesListUiState() }
95. App Architecture sealed class ImagesListUiState { object Loading: ImagesListUiState() data class Success( val images: List<ImageData> ): ImagesListUiState() data class Error( val errorMessage: String ): ImagesListUiState() }
96. App Architecture class ImagesListViewModel { init { ... } val state = MutableStateFlow<ImagesListUiState>(ImagesListUiState.Loading) val viewModelScope = CoroutineScope(Dispatchers.Main) } init } {
97. App Architecture class ImagesListViewModel { init { ... } } init } { viewModelScope.launch(Dispatchers.Main) { try { val imagesList = imagesRepository.getImages() state.emit(uiState.Success(images = imagesList)) } catch (e: Exception) { state.emit(uiState.Error("Something went wrong")) } }
98. App Architecture @Composable fun ImagesAppCommon() { Scaffold( topBar = { ... }, content = { } ) }
99. App Architecture @Composable fun ImagesAppCommon() { Scaffold( topBar = { ... }, content = { } ) } val uiState by viewModel.state.collectAsState() ImagesListScreen(uiState)
100. App Architecture @Composable fun ImagesListScreen(uiState: UIState) { } }
101. App Architecture @Composable fun ImagesListScreen(uiState: UIState) { when (uiState) { ImagesListUiState.Loading -> is ImagesListUiState.Success -> is ImagesListUiState.Error -> } }
102. App Architecture @Composable fun ImagesListScreen(uiState: UIState) { when (uiState) { ImagesListUiState.Loading -> CircularProgressIndicator() is ImagesListUiState.Success -> is ImagesListUiState.Error -> } }
103. App Architecture @Composable fun ImagesListScreen(uiState: UIState) { when (uiState) { ImagesListUiState.Loading -> CircularProgressIndicator() is ImagesListUiState.Success -> ImagesList(uiState.images) is ImagesListUiState.Error -> } }
104. Navigation App Root View List Details
105. App Architecture sealed class Screen { }
106. App Architecture sealed class Screen { object List : Screen() }
107. App Architecture sealed class Screen { object List : Screen() data class Details(val imageId: String) : Screen() }
108. App Architecture @Composable fun ImagesAppCommon() { var screenState by remember { mutableStateOf<Screen>(Screen.List) } when (val screen = screenState) { is Screen.List -> List( onItemClick = { screenState = Screen.Details(imageId = it) } ) is Screen.Details -> Details( text = screen.text, onBack = { screenState = Screen.List } ) } }
109. App Architecture @Composable fun ImagesAppCommon() { var screenState by remember { mutableStateOf<Screen>(Screen.List) } when (val screen = screenState) { is Screen.List -> List( onItemClick = { screenState = Screen.Details(imageId = it) } ) is Screen.Details -> Details( text = screen.text, onBack = { screenState = Screen.List } ) } }
110. App Architecture @Composable fun ImagesAppCommon() { var screenState by remember { mutableStateOf<Screen>(Screen.List) } when (val screen = screenState) { is Screen.List -> List( onItemClick = { screenState = Screen.Details(imageId = it) } ) is Screen.Details -> Details( text = screen.text, onBack = { screenState = Screen.List } ) } }
111. App Architecture @Composable fun ImagesAppCommon() { var screenState by remember { mutableStateOf<Screen>(Screen.List) } when (val screen = screenState) { is Screen.List -> List( onItemClick = { screenState = Screen.Details(imageId = it) } ) is Screen.Details -> Details( text = screen.imageId, onBack = { screenState = Screen.List } ) } }
112. App Architecture • Lifecycle Aware • Navigation
113. https: / / github.com/arkivanov/Decompose Decompose
114. Decompose • Lifecycle Aware Components • Back stack management
115. Decompose interface ListComponent { 
 val uiState: Value<Model> fun onImageClicked(imageId: String) data class UiState( val images: List<Image>, ) }
116. Decompose interface ListComponent { 
 val uiState: Value<UiState> fun onImageClicked(imageId: String) data class UiState( val images: List<Image>, ) }
117. Decompose interface ListComponent { 
 val uiState: Value<UiState> fun onImageClicked(imageId: String) data class UiState( val images: List<Image>, ) }
118. Decompose class ImagesListComponent( componentContext: ComponentContext, val onImageSelected: (imageId: String) -> Unit, ) : ListComponent { 
 override val uiState: Value<ListComponent.UiState> = MutableValue(UiState.Loading) override fun onItemClicked(imageId: String) { onImageSelected(imageId) } }
119. Decompose class ImagesListComponent( componentContext: ComponentContext, val onImageSelected: (imageId: String) -> Unit, ) : ListComponent { 
 override val uiState: Value<ListComponent.UiState> = MutableValue(UiState.Loading) override fun onItemClicked(imageId: String) { onImageSelected(imageId) } }
120. Decompose class ImagesListComponent( componentContext: ComponentContext, val onImageSelected: (imageId: String) -> Unit, ) : ListComponent { 
 override val uiState: Value<ListComponent.UiState> = MutableValue(UiState.Loading) override fun onItemClicked(imageId: String) { onImageSelected(imageId) } }
121. @Composable fun ImagesList( component: ListComponent, images: List<ImageData>, onImageClicked: (Int) -> Unit ) { 
 
 val uiState by component.uiState.subscribeAsState() } Decompose
122. @Composable fun ImagesList( component: ListComponent, images: List<ImageData>, onImageClicked: (Int) -> Unit ) { 
 
 val uiState by component.uiState.subscribeAsState() } Decompose
123. Navigation App Root View List Details
124. interface RootComponent { val stack: Value<ChildStack <* , Child >> sealed class Child { class ListChild(val component: ListComponent) : Child() class DetailsChild(val component: DetailsComponent) : Child() } } App Architecture
125. interface RootComponent { val stack: Value<ChildStack <* , Child >> sealed class Child { class ListChild(val component: ListComponent) : Child() class DetailsChild(val component: DetailsComponent) : Child() } } App Architecture
126. interface RootComponent { val stack: Value<ChildStack <* , Child >> sealed class Child { class ListChild(val component: ListComponent) : Child() class DetailsChild(val component: DetailsComponent) : Child() } } App Architecture
127. class DefaultRootComponent( ... ): RootComponent { @Parcelize sealed interface Config : Parcelable { object List : Config data class Details(val item: String) : Config } } App Architecture
128. class DefaultRootComponent( ... ): RootComponent { 
 val navigation = StackNavigation<Config>() 
 @Parcelize sealed interface Config : Parcelable { object List : Config data class Details(val item: String) : Config } } App Architecture
129. class DefaultRootComponent( ... ): RootComponent { 
 val navigation = StackNavigation<Config>() 
 @Parcelize sealed interface Config : Parcelable { object List : Config data class Details(val item: String) : Config } } App Architecture val stack = childStack( source = navigation, initialConfiguration = Config.List, handleBackButton = true, childFactory = :: child, )
130. class DefaultRootComponent( ... ): RootComponent { 
 val navigation = StackNavigation<Config>() 
 @Parcelize sealed interface Config : Parcelable { object List : Config data class Details(val item: String) : Config } } App Architecture
131. class DefaultRootComponent( ... ): RootComponent { } App Architecture fun listComponent(): ListComponent = ImagesListComponent( onItemSelected = { imageId: String -> navigation.push(Config.Details(item = imageId)) }, )
132. class DefaultRootComponent( ... ): RootComponent { } App Architecture fun listComponent(): ListComponent = ImagesListComponent( onItemSelected = { imageId: String -> navigation.push(Config.Details(item = imageId)) }, )
133. class DefaultRootComponent( ... ): RootComponent { } App Architecture fun detailsComponent(): DetailsComponent = ImageDetailsComponent( image = config.image, onFinished = navigation :: pop, )
134. class DefaultRootComponent( ... ): RootComponent { } App Architecture fun detailsComponent(): DetailsComponent = ImageDetailsComponent( image = config.image, onFinished = navigation :: pop, )
135. Navigation App Root View List Details
136. @Composable fun ImagesAppCommon(component: RootComponent) { Children( stack = component.stack ) { when (val child = it.instance) { is ListChild -> ListContent(component = child.component) is DetailsChild -> DetailsContent(component = child.component) } } } App Architecture
137. @Composable fun ImagesAppCommon(component: RootComponent) { Children( stack = component.stack ) { when (val child = it.instance) { is ListChild -> ListContent(component = child.component) is DetailsChild -> DetailsContent(component = child.component) } } } App Architecture
138. class MainActivity : AppCompatActivity() { 
 override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val root = DefaultRootComponent( componentContext = defaultComponentContext(), ) setContent { MaterialTheme { Surface { RootContent(component = root, modifier = Modifier.fillMaxSize()) } } } App Architecture
139. class MainActivity : AppCompatActivity() { 
 override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val root = DefaultRootComponent( componentContext = defaultComponentContext(), ) setContent { MaterialTheme { Surface { RootContent(component = root, modifier = Modifier.fillMaxSize()) } } } App Architecture
140. class MainActivity : AppCompatActivity() { 
 override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val root = DefaultRootComponent( componentContext = defaultComponentContext(), ) setContent { MaterialTheme { Surface { ImageAppCommon(component = root) } } } App Architecture
141. class AppDelegate: NSObject, UIApplicationDelegate { let rootHolder: RootHolder = RootHolder() } App Architecture
142. @main struct app_iosApp: App { 
 var rootHolder: RootHolder { appDelegate.rootHolder } var body: some Scene { WindowGroup { ComposeView(rootHolder.root) } } } App Architecture
143. Decompose • Lifecycle Aware Components • Back stack management
144. Building Multiplatform Apps with Compose • Setup Project • Share Compose UI • SwiftUI & Compose Interop • Architecture & Navigation
145. Thank You! www.codingwithmohit.com @heyitsmohit@androiddev.social