Building Shared UIs across Platforms with Compose

Transcript

1. Mohit Sarveiya Building Shared UIs Across Platforms with Compose @heyitsmohit
2. Building Shared UIs Across Platforms with Compose • Setup & Architecture
3. Building Shared UIs Across Platforms with Compose • Setup & Architecture • Internals
4. Building Shared UIs Across Platforms with Compose • Setup & Architecture • Internals • Interop with iOS
5. Android Kotlin/JVM iOS Swift/LLVM Web JS Desktop Kotlin/JVM
6. API Share Cache Business Logic Platforms
7. API Share Cache Business Logic UI Components Platforms
8. https: / / github.com/JetBrains/compose-multiplatform compose-multiplatform
9. Approaches • Share all UI components Components (Compose)
10. Approaches UI Components (Compose) • Share individual UI components UI Components (SwiftUI)
11. Approaches UI Components (Compose) • Share individual UI components UI Components (SwiftUI) Shared Components (Compose)
12. Approaches • Share individual UI components • Share all UI components
13. Example • SwiftUI App • Display list of images
14. Example • SwiftUI App • Display list of images • Details page
15. Goal • Display list of images (Compose) • Details page (SwiftUI)
16. Goal ZStack { LazyVGrid( ... ) { ForEach(id: .id) { item in Image(item.url) .renderingMode(.original) .resizable() .scaledToFill() } }.task { await repository.getImages() } }
17. UI Structure Shared Component NavigationView { ZStack { ComposeView() } }.toolbar { ... }
18. https: / / github.com/JetBrains/compose-multiplatform-template compose-multiplatform
19. androidApp iOSApp shared Structure
20. shared src commonMain androidMain iOSMain Shared Module
21. shared src commonMain androidMain iOSMain build.gradle.kts 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. plugins { kotlin("multiplatform") } val commonMain by getting { dependencies { implementation(compose.ui) implementation(compose.foundation) implementation(compose.material) implementation(compose.runtime) } } Shared Module
24. UI Structure
25. UI Structure Shared Component NavigationView { ZStack { ComposeView() } }.toolbar { ... }
26. UI Structure Compose View Images List ViewController AppTheme NavigationView { ZStack { ComposeView() } }.toolbar { ... }
27. shared src commonMain androidMain iOSMain ImagesAppTheme.kt Shared Module
28. App Theme
29. 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 )
30. App Theme @Composable fun ImagesAppTheme( darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit ) { MaterialTheme( colors = if (darkTheme) DarkColorPalette else LightColorPalette, content = content ) }
31. App Theme @Composable fun ImagesAppTheme( darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit ) { MaterialTheme( colors = if (darkTheme) DarkColorPalette else LightColorPalette, content = content ) }
32. UI Structure Compose View Images List ViewController AppTheme NavigationView { ZStack { ComposeView() } }.toolbar { ... }
33. UI Structure struct ComposeView: UIViewControllerRepresentable { 
 func makeUIViewController(context: Context) -> UIViewController { let controller = Main_iosKt.MainiOS() return controller } }
34. UI Structure struct ComposeView: UIViewControllerRepresentable { 
 func makeUIViewController( ... ) -> UIViewController { let controller = Main_iosKt.MainiOS() return controller } }
35. UI Structure struct ComposeView: UIViewControllerRepresentable { 
 func makeUIViewController( ... ) -> UIViewController { let controller = ImagesList() return controller } }
36. UI Structure fun ImagesList(): UIViewController = ComposeUIViewController { ImagesAppCommon() }
37. UI Structure fun ImagesList(): UIViewController = ComposeUIViewController { ... }
38. Compose Architecture Compose Multiplatform Compose Multiplatform Core
39. https: / / github.com/JetBrains/compose-multiplatform-core compose-multiplatform
40. Multiplatform Core fun ComposeUIViewController( content: @Composable () -> Unit ): UIViewController = ComposeWindow().apply { configuration = ComposeUIViewControllerConfiguration() .apply(configure) setContent(content) }
41. Multiplatform Core fun ComposeUIViewController( content: @Composable () -> Unit ): UIViewController = ComposeWindow().apply { setContent(content) }
42. UI Structure Compose View Images List ViewController AppTheme NavigationView { ZStack { ComposeView() } }.toolbar { ... }
43. UI Structure fun ImagesList(): UIViewController = ComposeUIViewController { ... }
44. UI Structure fun ImagesList(): UIViewController = ComposeUIViewController { AppTheme { 
 } } Text("Hello World")
45. UI Structure struct ContentView: View { 
 var body: some View { ZStack { ComposeView() ...
 } } 
 } Hello World
46. UI Structure UIWindowScene UIWindow ComposeWindow SkikkoUIView View Hierarchy struct ContentView: View { 
 var body: some View { ZStack { ComposeView() ...
 } } 
 } UIWindowScene UIWindow ComposeWindow SkikkoUIView
47. UI Structure UIWindowScene UIWindow ComposeWindow SkikkoUIView View Hierarchy struct ContentView: View { 
 var body: some View { ZStack { ComposeView() ...
 } } 
 } UIWindowScene UIWindow ComposeWindow SkikkoUIView
48. UI Structure UIWindowScene UIWindow ComposeWindow SkikkoUIView View Hierarchy struct ContentView: View { 
 var body: some View { ZStack { ComposeView() ...
 } } 
 } UIWindowScene UIWindow ComposeWindow SkikkoUIView
49. https: / / github.com/JetBrains/skiko Skiko
50. Compose Multiplatform Architecture Skia Skiko Compose UIViewController UIKit SwiftUI
51. UI Structure UIWindowScene UIWindow ComposeWindow SkikkoUIView View Hierarchy struct ContentView: View { 
 var body: some View { ZStack { ComposeView() ...
 } } 
 } UIWindowScene UIWindow ComposeWindow SkikkoUIView
52. UI Structure class ComposeWindow : UIViewController { var layer: ComposeLayer var content: @Composable () -> Unit 
 override fun loadView() { ... } }
53. UI Structure fun ImagesList(): UIViewController = ComposeUIViewController { AppTheme { 
 } } Text("Hello World")
54. Compose Multiplatform Architecture Skia Skiko Compose UIViewController UIKit SwiftUI
55. UI Structure class ComposeWindow : UIViewController { override fun loadView() { val skiaLayer = createSkiaLayer() val skikoUIView = SkikoUIView(skiaLayer = skiaLayer).load() val rootView = UIView() rootView.addSubview(skikoUIView) } }
56. UI Structure class ComposeWindow : UIViewController { override fun loadView() { val skiaLayer = createSkiaLayer() val skikoUIView = SkikoUIView(skiaLayer = skiaLayer).load() val rootView = UIView() rootView.addSubview(skikoUIView) layer = ComposeLayer(layer = skiaLayer) layer.setContent( CompositionLocalProvider( ... ) { content() } } ) } }
57. UI Structure struct ContentView: View { 
 var body: some View { ZStack { ComposeView() ...
 } } 
 } Hello World
58. Architecture
59. UI Structure struct ContentView: View { 
 var body: some View { ZStack { ComposeView() ...
 } } 
 }
60. Architecture View Repo View Model 
 SwiftUI ComposeView Shared
61. View Model Repository View Request Response UI State Event
62. https: / / github.com/cashapp/molecule Molecule
63. @Composable fun Presenter(): Model State Flow Compose Runtime Recomposition
64. @Composable fun Presenter(): Model State Flow Recomposition Monotomic Frame Clock
65. Molecule Muiltiplatform Support • Android (all versions) • JS (0.3.0 and newer) • JVM (0.3.0 and newer) • iOS (0.5.0-beta01 and newer) • MacOS (0.5.0-beta01 and newer)
66. https: / / github.com/icerockdev/moko-mvvm Moko
67. Architecture sealed class UiState { object Loading: UiState() data class Success( val images: List<ImageData> ): UiState() data class Error( val errorMessage: String ): UiState() }
68. Architecture abstract class MoleculeViewModel <> : ViewModel() { }
69. Architecture abstract class MoleculeViewModel<Model, Event >: ViewModel() { }
70. Architecture abstract class MoleculeViewModel<Model, Event >: ViewModel() { }
71. Architecture abstract class MoleculeViewModel: ViewModel() { val scope = CoroutineScope( viewModelScope.coroutineContext ) }
72. Architecture Frame Clock DisplayLinkClock iOS AndroidUiFrameClock Android
73. https: / / developer.apple.com/documentation/quartzcore/cadisplaylink CADisplayLink
74. Architecture abstract class MoleculeViewModel: ViewModel() { val scope = CoroutineScope( viewModelScope.coroutineContext + DisplayLinkClock ) }
75. Architecture object DisplayLinkClock : MonotonicFrameClock { val displayLink: CADisplayLink = val clock = BroadcastFrameClock { ... } override suspend fun withFrameNanos(onFrame: (frameTimeNanos: Long) -> R): R { return clock.withFrameNanos(onFrame) } }
76. Architecture abstract class MoleculeViewModel: ViewModel() { val scope = CoroutineScope(…) val models: StateFlow<Model> by lazy(…) { scope.launchMolecule(mode = RecompositionMode.ContextClock) { models(…) } } }
77. Architecture abstract class MoleculeViewModel: ViewModel() { val scope = CoroutineScope(…) val models: StateFlow<Model> by lazy(…) { scope.launchMolecule(mode = RecompositionMode.ContextClock) { models(…) } } }
78. Architecture abstract class MoleculeViewModel: ViewModel() { val scope = CoroutineScope(…) val models: StateFlow<Model> by lazy(…) { scope.launchMolecule(mode = RecompositionMode.ContextClock) { models(…) } } }
79. View Model View UI State Event
80. Architecture abstract class MoleculeViewModel: ViewModel() { val events = MutableSharedFlow<Event>(extraBufferCapacity = 20) fun take(event: Event) { if (!events.tryEmit(event)) { error("Event buffer overflow.") } } }
81. Architecture abstract class MoleculeViewModel: ViewModel() { val events = MutableSharedFlow<Event>(extraBufferCapacity = 20) fun take(event: Event) { if (!events.tryEmit(event)) { error("Event buffer overflow.") } } }
82. Architecture View Repo View Model 
 SwiftUI ComposeView Shared
83. Architecture class ImagesViewModel: MoleculeViewModel() { }
84. Architecture class ImagesViewModel: MoleculeViewModel() { @Composable override fun models(events: Flow<Event>): UiState { } }
85. Architecture @Composable override fun models(events: Flow<Event>): UiState { var uiState by remember { mutableStateOf(UIState.Loading) } }
86. Architecture @Composable override fun models(events: Flow<Event>): UiState { var uiState by remember { mutableStateOf(UIState.Loading) } LaunchedEffect(Unit) { } }
87. Architecture @Composable override fun models(events: Flow<Event>): UiState { var uiState by remember { mutableStateOf(UIState.Loading) } LaunchedEffect(Unit) { val imagesList = imagesRepository.getImages() uiState = UIState.Success(imagesList) } }
88. Architecture @Composable override fun models(events: Flow<Event>): UiState { var uiState by remember { mutableStateOf(UIState.Loading) } LaunchedEffect(Unit) { val imagesList = imagesRepository.getImages() uiState = UIState.Success(imagesList) } return uiState }
89. Architecture fun ImagesList(): UIViewController = ComposeUIViewController { AppTheme { 
 } }
90. Architecture ComposeUIViewController { AppTheme { 
 val viewModel = getViewModel(…, viewModelFactory { ImagesViewModel() }) } }
91. Architecture ComposeUIViewController { AppTheme { 
 val viewModel = getViewModel(…) val model by viewModel.models.collectAsState() } }
92. Architecture ComposeUIViewController { AppTheme { 
 val viewModel = getViewModel(…) val model by viewModel.models.collectAsState() ImagesList(model) } }
93. Architecture View Repo View Model 
 SwiftUI ComposeView Shared
94. Architecture fun ImagesList(model: UiState) { Column { LazyVerticalGrid { items(images) { ... } } } }
95. https: / / github.com/Kamel-Media/Kamel Kamel
96. Architecture fun ImagesList(model: UiState) { Column { LazyVerticalGrid { items(images) { KamelImage( asyncPainterResource(image.path), contentScale = ContentScale.Crop, ) } }
97. UI Structure struct ContentView: View { 
 var body: some View { ZStack { ComposeView() ...
 } } 
 }
98. Architecture View Repo View Model 
 SwiftUI ComposeView Shared
99. iOS Interop
100. • Compose in SwiftUI Interop
101. • Compose in SwiftUI • SwiftUI in Compose Interop
102. Interop View in Compose
103. Interop SwiftUI View View in Compose
104. Interop Compose View SwiftUI View Provide
105. Interop shared src commonMain androidMain iOSMain App Screen
106. Interop fun AppScreen(createUIView: () -> UIView): UIViewController = ComposeUIViewController { Column( horizontalAlignment = Alignment.CenterHorizontally ) { Text("How to use SwiftUI inside Compose") UIKitView( factory = createUIView, modifier = Modifier.size(300.dp).border(2.dp, Color.Blue), ) } }
107. Interop fun AppScreen(createUIView: () -> UIView): UIViewController = ComposeUIViewController { Column( horizontalAlignment = Alignment.CenterHorizontally ) { Text("How to use SwiftUI inside Compose") UIKitView( factory = createUIView, modifier = Modifier.size(300.dp).border(2.dp, Color.Blue), ) } }
108. Interop fun AppScreen(createUIView: () -> UIView): UIViewController = ComposeUIViewController { Column( horizontalAlignment = Alignment.CenterHorizontally ) { Text(“View in Compose”) UIKitView( factory = createUIView, modifier = Modifier.size(300.dp).border(2.dp, Color.Blue), ) } }
109. Interop fun AppScreen(createUIView: () -> UIView): UIViewController = ComposeUIViewController { Column( horizontalAlignment = Alignment.CenterHorizontally ) { Text(“View in Compose”) UIKitView( factory = createUIView, modifier = Modifier.size(300.dp).border(2.dp, Color.Blue), ) } }
110. Interop App Screen SwiftUI View Provide
111. androidApp iOSApp desktopApp shared Interop
112. Interop struct ComposeView: UIViewControllerRepresentable { 
 func makeUIViewController( ... ) -> UIViewController { AppScreen( VStack { Text(“Compose View”) } ) } }
113. Interop struct ComposeView: UIViewControllerRepresentable { 
 func makeUIViewController( ... ) -> UIViewController { AppScreen( VStack { Text(“Compose View”) } ) } }
114. Interop struct ComposeView: UIViewControllerRepresentable { 
 func makeUIViewController( ... ) -> UIViewController { AppScreen( VStack { Text(“SwiftUI in Compose”) } ) } } SwiftUI in Compose Compose View
115. • Compose in SwiftUI • SwiftUI in Compose • UIKit in Compose Interop
116. https: / / github.com/chrisbanes/tivi Tivi
117. Problem • Tivi App • Modal in Compose
118. Problem • Tivi App • Modal in Compose • Show iOS date picker from Compose
119. Interop shared src commonMain androidMain iOSMain Expect Declaration
120. Interop shared src commonMain androidMain iOSMain Actual Declaration Actual Declaration
121. Interop @Composable expect fun TimePickerDialog( onDismissRequest: () -> Unit, onTimeChanged: (LocalTime) -> Unit, selectedTime: LocalTime )
122. Interop shared src commonMain androidMain iOSMain Actual Declaration
123. Interop @Composable actual fun TimePickerDialog(…) { DatePickerViewController(backgroundColor).apply { ... confirmButton.setTitle(confirmLabel, UIControlStateNormal) } }
124. Interop @Composable actual fun TimePickerDialog(…) { DatePickerViewController(backgroundColor).apply { ... confirmButton.setTitle(confirmLabel) } }
125. Interop class DatePickerViewController( ... ) : UIViewController { }
126. Interop class DatePickerViewController( ... ) : UIViewController { val datePicker = UIDatePicker() val stack = UIStackView() override fun viewDidLoad() { super.viewDidLoad() . .. view.addSubview(stack) } }
127. Interop class DatePickerViewController( ... ) : UIViewController { val datePicker = UIDatePicker() val stack = UIStackView() override fun viewDidLoad() { super.viewDidLoad() . .. view.addSubview(stack) } }
128. Interop shared src commonMain androidMain iOSMain Actual Declaration
129. Interop @Composable actual fun TimePickerDialog(…) { }
130. Interop @Composable actual fun TimePickerDialog(…) { androidx.compose.material3.DatePickerDialog(…) { TimePicker( state = timePickerState, modifier = Modifier .padding(top = 32.dp) .align(Alignment.CenterHorizontally), ) } }
131. Problem • Tivi App • Modal in Compose • Show iOS date picker from Compose
132. • Compose in SwiftUI • SwiftUI in Compose • UIKit in Compose Interop
134. Roadmap • Navigation • Transitions • Text selection and input • Accessibility • Dialogs and popups
135. Building Shared UIs Across Platforms with Compose • Setup & Architecture • Internals • Interop with iOS
136. Thank You! www.codingwithmohit.com @heyitsmohit