SwiftUI vs Jetpack Compose by an Android Engineer

As an Android Engineer, Jetpack Compose is a revolution. Build and maintain user interface and be compatible with older Android versions are daily challenges for engineers. These points are some of why Jetpack Compose is now an essential library. But in Apple side, SwiftUI is a great alternative in the development of user interfaces for Apple products.

I suggest you to organize a fight between SwiftUI to me right and Jetpack Compose to my left. We'll compare their design, usage, differences and next steps to define who is the best and win this battle!

Take pop corn and trolls, there will be blood!

Transcript

1. Gerard paligot
2. PLAYER SELECT
3. Jetpack compose 100% Kotlin Compiler Plugin Open source Multiplatform Developed by Google and Jetbrains
4. PLAYER SELECT
5. SwiftUI 100% Swift Embedded in the system Developed by Apple Cross platform with Apple platforms
6. Gerard paligot INSERT COIN.
7. COMPOSE SwiftUI
8. Similarities Counter example
10. @Composable fun CounterScreen() { }
11. @Composable fun CounterScreen() { Row { FloatingActionButton(onClick = { }) { Icon( imageVector = Icons.Default.Remove, contentDescription = "Decrement" ) } FloatingActionButton(onClick = { }) { Icon( imageVector = Icons.Default.Add, contentDescription = "Increment" ) } } }
12. @Composable fun CounterScreen() { Row { FloatingActionButton(onClick = { }) { ... } FloatingActionButton(onClick = { }) { ... } } }
13. @Composable fun CounterScreen() { Row( horizontalArrangement = Arrangement.spacedBy(8.dp), verticalAlignment = Alignment.CenterVertically ) { FloatingActionButton(onClick = { }) { ... } Text(text = "Count:") FloatingActionButton(onClick = { }) { ... } } }
14. @Composable fun CounterScreen() { Box( modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center ) { Row( horizontalArrangement = Arrangement.spacedBy(8.dp), verticalAlignment = Alignment.CenterVertically ) { FloatingActionButton(onClick = { }) { ... } Text(text = "Count:") FloatingActionButton(onClick = { }) { ... } } } }
15. @Composable fun CounterScreen( modifier: Modifier = Modifier ) { Box( modifier = modifier.fillMaxSize(), contentAlignment = Alignment.Center ) { Row( horizontalArrangement = Arrangement.spacedBy(8.dp), verticalAlignment = Alignment.CenterVertically ) { FloatingActionButton(onClick = { }) { ... } Text(text = "Count:") FloatingActionButton(onClick = { }) { ... } } } }
16. @Composable fun CounterScreen( modifier: Modifier = Modifier ) { var counter by remember { mutableStateOf(0) } Box( modifier = modifier.fillMaxSize(), contentAlignment = Alignment.Center ) { Row( horizontalArrangement = Arrangement.spacedBy(8.dp), verticalAlignment = Alignment.CenterVertically ) { FloatingActionButton(onClick = { counter-- }) { ... } Text(text = "Count: $counter") FloatingActionButton(onClick = { counter++ }) { ... } } } }
17. Jetpack compose Declare a component with @Composable Box, Row and Column to place elements Arrangement and alignment parameters State with remember mutableStateOf Modifier to decorate components Accessibility first
18. struct Counter: View { var body: some View { } }
19. struct Counter: View { var body: some View { HStack { Button { // Action } label: { Image(systemName: "minus") } Button { // Action } label: { Image(systemName: "plus") } } } }
20. struct Counter: View { var body: some View { HStack { Button { // Action } label: { Image(systemName: "minus") } Text("Count:") Button { // Action } label: { Image(systemName: "plus") } } } }
21. struct Counter: View { var body: some View { HStack { Button { // Action } label: { Image(systemName: "minus") } .padding() Text("Count:") Button { // Action } label: { Image(systemName: "plus") } .padding() } } }
22. struct Counter: View { @State var counter: Int = 0 var body: some View { HStack { Button { counter = counter - 1 } label: { Image(systemName: "minus") } .padding() Text("Count: \(counter)") Button { counter = counter + 1 } label: { Image(systemName: "plus") } .padding() } } }
23. SwiftUI Declare a component with protocol impl ZStack, HStack and VStack to place elements Custom components decorated automatically State with @State property
24. COMPOSE SwiftUI Hit Layout
25. COMPOSE SwiftUI Hit ARRANGEMENT
26. COMPOSE SwiftUI Hit ALIGNMENT
27. COMPOSE SwiftUI Hit less code
28. COMPOSE SwiftUI Vote for Jetpack Compose Vote for SwiftUI
29. COMPOSE SwiftUI
30. Packaging How to use the declarative UI Toolkit?
31. SwiftUI SwiftUI is packaged with the OS Because embedded in the system, runtime performance is better Need to wait new Apple system versions for new features SwiftUI available since iOS 13 (2019) in experimental First stable version since iOS 14 (2020)
32. Jetpack compose Jetpack Compose is packaged in a library New features available since API 21 (2014) In theory, runtime performance is worst than SwiftUI (or XML) But the release version make a lot of optimisation
33. COMPOSE SwiftUI Hit PACKAGING
34. COMPOSE SwiftUI Vote for Jetpack Compose Vote for SwiftUI
35. COMPOSE SwiftUI
36. Previews Check the render without running your application
37. struct Counter_Previews: PreviewProvider { static var previews: some View { Counter() } }
38. struct Counter_Previews: PreviewProvider { static var previews: some View { Counter() } } Pin a preview Preview name Live preview Selectable preview Variants Canvas Device Settings Run on device
39. struct Counter_Previews: PreviewProvider { static var previews: some View { Counter() } }
40. struct Counter_Previews: PreviewProvider { static var previews: some View { Counter() } }
41. struct Counter_Previews: PreviewProvider { static var previews: some View { Counter() } }
42. struct Counter_Previews: PreviewProvider { static var previews: some View { Counter() } }
43. struct Counter_Previews: PreviewProvider { static var previews: some View { Counter() } }
44. struct SpeakerAvatarView: View { var url: String var body: some View { AsyncImageView( url: URL(string: url)!, placeholder: { Text("...") } ) .clipShape(Circle()) } } struct SpeakerAvatarView_Previews: PreviewProvider { static var previews: some View { SpeakerAvatarView( url: SpeakerUi.companion.fake.url ) } }
45. SwiftUI Wysiwyg customization for previews Running the preview in the simulator Customization configurable as code Preview not limited to UI
46. @Preview @Composable internal fun CounterScreenPreview() { SwiftuiVsComposeTheme { CounterScreen() } }
47. @Preview @Composable internal fun CounterScreenPreview() { SwiftuiVsComposeTheme { CounterScreen() } } Interactive mode Run on device
48. @MustBeDocumented @Retention(AnnotationRetention.SOURCE) @Target( AnnotationTarget.ANNOTATION_CLASS, AnnotationTarget.FUNCTION ) @Repeatable annotation class Preview( val name: String = "", val group: String = "", @IntRange(from = 1) val apiLevel: Int = -1, val widthDp: Int = -1, val heightDp: Int = -1, val locale: String = "", @FloatRange(from = 0.01) val fontScale: Float = 1f, val showSystemUi: Boolean = false, val showBackground: Boolean = false, val backgroundColor: Long = 0, @UiMode val uiMode: Int = 0, @Device val device: String = Devices.DEFAULT )
49. object Devices { const val DEFAULT = "" const val PIXEL_3 = "id:pixel_3" const val PIXEL_3_XL = "id:pixel_3_xl" const val PIXEL_3A = "id:pixel_3a" const val PIXEL_3A_XL = "id:pixel_3a_xl" const val PIXEL_4 = "id:pixel_4" const val PIXEL_4_XL = "id:pixel_4_xl" const val AUTOMOTIVE_1024p = "id:automotive_1024p_landscape" const val WEAR_OS_LARGE_ROUND = "id:wearos_large_round" const val WEAR_OS_SMALL_ROUND = "id:wearos_small_round" const val WEAR_OS_SQUARE = "id:wearos_square" const val WEAR_OS_RECT = "id:wearos_rect" // Reference devices const val PHONE = "spec:id=reference_phone,shape=Normal,width=411,height=891,unit=dp, dpi=420" const val FOLDABLE = "spec:shape=Normal,width=673,height=841,unit=dp,dpi=480" const val TABLET = "spec:shape=Normal,width=1280,height=800,unit=dp,dpi=420" const val DESKTOP = "spec:shape=Normal,width=1920,height=1080,unit=dp,dpi=420" }
50. @Preview( showBackground = true, showSystemUi = true, device = Devices.PIXEL_XL, name = "Counter", fontScale = 2f, uiMode = UI_MODE_NIGHT_YES, ) @Composable internal fun CounterScreenPreview() { SwiftuiVsComposeTheme { CounterScreen() } }
51. @Preview( showBackground = true, showSystemUi = true, device = Devices.PIXEL_XL, name = "Counter", fontScale = 2f, uiMode = UI_MODE_NIGHT_YES, ) @Composable internal fun CounterScreenPreview() { SwiftuiVsComposeTheme { Scaffold { CounterScreen() } } }
52. @Composable fun Scaffold( modifier: Modifier = Modifier, topBar: @Composable () -> Unit = {}, bottomBar: @Composable () -> Unit = {}, snackbarHost: @Composable () -> Unit = {}, floatingActionButton: @Composable () -> Unit = {}, floatingActionButtonPosition: FabPosition = FabPosition.End, containerColor: Color = MaterialTheme.colorScheme.background, contentColor: Color = contentColorFor(containerColor), content: @Composable (PaddingValues) -> Unit )
53. @Preview( group = "Devices", name = "Pixel 4", showSystemUi = true, device = Devices.PIXEL_4 ) @Preview( group = "Devices", name = "Tablet", showSystemUi = true, device = Devices.TABLET ) @Preview( group = "Devices", name = "Desktop", showSystemUi = true, device = Devices.DESKTOP ) annotation class DevicesPreview
54. @DevicesPreview @Composable internal fun CounterScreenPreview() { SwiftuiVsComposeTheme { Scaffold { CounterScreen() } } }
55. @Composable fun SpeakerAvatar( url: String, displayName: String, modifier: Modifier = Modifier ) { }
56. @Composable fun SpeakerAvatar( url: String, displayName: String, modifier: Modifier = Modifier ) { Image( painter = rememberAsyncImagePainter( model = url, imageLoader = LocalContext.current.imageLoader ), contentDescription = displayName, contentScale = ContentScale.FillWidth, modifier = modifier.clip(CircleShape) ) }
57. @Composable fun SpeakerAvatar( url: String, displayName: String, modifier: Modifier = Modifier ) { if (LocalInspectionMode.current) { Box( modifier = modifier .background( color = MaterialTheme.colors.secondary, shape = CircleShape ) ) } else { Image( painter = rememberAsyncImagePainter( model = url, imageLoader = LocalContext.current.imageLoader ), contentDescription = displayName, contentScale = ContentScale.FillWidth, modifier = modifier.clip(CircleShape) ) } }
58. @Composable fun SpeakerAvatar( url: String, displayName: String, modifier: Modifier = Modifier ) { Image( painter = rememberAsyncImagePainter( model = url, placeholder = ColorPainter(MaterialTheme.colors.secondary), imageLoader = LocalContext.current.imageLoader ), contentDescription = displayName, contentScale = ContentScale.FillWidth, modifier = modifier.clip(CircleShape) ) }
59. Jetpack compose Configure preview with @Preview parameters Fully customizable for all kind of devices Custom preview annotations LocalInspectionMode to keep previews Limited to UI elements
60. COMPOSE SwiftUI Hit multi previews
61. COMPOSE SwiftUI Hit customizable
62. COMPOSE SwiftUI Hit wysiwyg
63. COMPOSE SwiftUI Hit not limited TO UI
64. COMPOSE SwiftUI Vote for Jetpack Compose Vote for SwiftUI
65. COMPOSE SwiftUI
66. Bottom bar navigation Navigate in your application
67. struct TabScreen: View { var body: some View { } }
68. struct TabScreen: View { var body: some View { TabView { Counter() .tabItem { Label("screenAgenda", systemImage: "calendar") } Counter() .tabItem { Label("screenSpeakers", systemImage: "person") } Counter() .tabItem { Label("screenInfo", systemImage: "info") } } } }
69. SwiftUI Just easy to use! By default, the UI match the Design System But the customization can be more tricky
70. @Composable fun BottomNavigationScreen( modifier: Modifier = Modifier ) { }
71. @Composable fun BottomNavigationScreen( modifier: Modifier = Modifier ) { Scaffold( modifier = modifier, bottomBar = { NavigationBar { } } ) { } }
72. @Composable fun BottomNavigationScreen( modifier: Modifier = Modifier ) { Scaffold( modifier = modifier, bottomBar = { NavigationBar { NavigationBarItem( selected = true, icon = { Icon( imageVector = Icons.Default.CalendarToday, contentDescription = null ) }, onClick = { }, label = { Text(text = "Agenda") }, alwaysShowLabel = false ) } } ) { } }
73. @Composable fun BottomNavigationScreen( modifier: Modifier = Modifier ) { Scaffold( modifier = modifier, bottomBar = { NavigationBar { NavigationBarItem( // ... ) } } ) { } }
74. dependencies { // Other dependencies implementation("androidx.navigation:navigation-compose:$version") }
75. NavHost NavController NavGraph Composable Composable Composable
76. @Composable fun BottomNavigationScreen( modifier: Modifier = Modifier ) { val navController = rememberNavController() Scaffold( modifier = modifier, bottomBar = { NavigationBar { NavigationBarItem( // ... ) } } ) { } }
77. @Composable fun BottomNavigationScreen( modifier: Modifier = Modifier ) { val navController = rememberNavController() Scaffold( modifier = modifier, bottomBar = { NavigationBar { NavigationBarItem( // ... ) } } ) { NavHost( navController = navController, startDestination = "agenda" ) { composable(route = "agenda") { Text(text = "Agenda") } composable(route = "speakers") { Text(text = "Speakers") } composable(route = "info") { Text(text = "Info") } }
78. @Composable fun BottomNavigationScreen( modifier: Modifier = Modifier ) { val navController = rememberNavController() Scaffold( modifier = modifier, bottomBar = { NavigationBar { NavigationBarItem( // ... ) } } ) { NavHost( navController = navController, startDestination = "agenda" ) { // ... } } }
79. @Composable fun BottomNavigationScreen( modifier: Modifier = Modifier ) { val navController = rememberNavController() Scaffold( modifier = modifier, bottomBar = { NavigationBar { NavigationBarItem( // ... onClick = { navController.navigate("agenda") { popUpTo( navController.graph.findStartDestination().id ) { saveState = true } launchSingleTop = true restoreState = true } }, ) } } ) { NavHost( navController = navController, startDestination = "agenda"
80. @Composable fun BottomNavigationScreen( modifier: Modifier = Modifier ) { val navController = rememberNavController() Scaffold( modifier = modifier, bottomBar = { NavigationBar { NavigationBarItem( // ... ) NavigationBarItem( // ... ) NavigationBarItem( // ... ) } } ) { NavHost( navController = navController, startDestination = "agenda" ) { // ... } } }
81. fun NavController.bottomBarNavigate(route: String) { }
82. fun NavController.bottomBarNavigate(route: String) { navigate(route) { popUpTo(graph.findStartDestination().id) { saveState = true } launchSingleTop = true restoreState = true } }
83. @Composable fun RowScope.BottomNavigationItem( label: String, icon: ImageVector, route: String, navController: NavController, modifier: Modifier = Modifier, ) { }
84. @Composable fun RowScope.BottomNavigationItem( label: String, icon: ImageVector, route: String, navController: NavController, modifier: Modifier = Modifier, ) { NavigationBarItem( modifier = modifier, selected = false, icon = { Icon( imageVector = icon, contentDescription = null ) }, onClick = { navController.bottomBarNavigate(route) }, label = { Text(text = label) }, alwaysShowLabel = false ) }
85. @Composable fun RowScope.BottomNavigationItem( label: String, icon: ImageVector, route: String, navController: NavController, modifier: Modifier = Modifier, ) { val navBackStackEntry by navController.currentBackStackEntryAsState() val currentDestination = navBackStackEntry?.destination val screen = currentDestination?.route NavigationBarItem( modifier = modifier, selected = screen == route, icon = { Icon( imageVector = icon, contentDescription = null ) }, onClick = { navController.bottomBarNavigate(route) }, label = { Text(text = label) }, alwaysShowLabel = false ) }
86. @Composable fun BottomNavigationScreen( modifier: Modifier = Modifier ) { val navController = rememberNavController() Scaffold( modifier = modifier, bottomBar = { NavigationBar { } } ) { NavHost( navController = navController, startDestination = "agenda" ) { // ... } } }
87. @Composable fun BottomNavigationScreen( modifier: Modifier = Modifier ) { val navController = rememberNavController() Scaffold( modifier = modifier, bottomBar = { NavigationBar { BottomNavigationItem( route = "agenda", label = "Agenda", icon = Icons.Default.CalendarToday, navController = navController ) BottomNavigationItem( // ... ) BottomNavigationItem( // ... ) } } ) { NavHost( navController = navController, startDestination = "agenda" ) { // ...
88. Jetpack compose Need to take care about the navigation Need to take care about the selected tab Need so much code compared to SwiftUI! Easy to refactor for something more concise But the customization is easier
89. COMPOSE SwiftUI Hit less code
90. COMPOSE SwiftUI MISS navigation
91. COMPOSE SwiftUI hit customization
92. COMPOSE SwiftUI Hit easy to use
93. COMPOSE SwiftUI hit refactoring
94. COMPOSE SwiftUI Vote for Jetpack Compose Vote for SwiftUI
95. COMPOSE SwiftUI
96. Platform design system How to create UI which respect platform design system?
97. Jetpack compose Material artifacts follow perfectly the Material design specifications Need more code than SwiftUI to build correct UI Partially fixed by Material 3 artifact and dynamic colors Already compatible with Desktop, Web and iOS Design decision made by Google allow Compose to add multiplatform support
98. SwiftUI Easy to use, with a bias for the Apple Design System in all components Hard to write an application with a wrong UI Compatible with all Apple OS platforms But can’t use SwiftUI for external platforms
99. COMPOSE SwiftUI hit customization Hit NO WRONG UI
100. COMPOSE SwiftUI
101. COMPOSE SwiftUI
102. Jetpack Compose SwiftUI
103. Jetpack Compose SwiftUI
104. Business Logic and Core iOS Specific API Android Specific API Jetpack Compose SwiftUi
105. COMPOSE SwiftUI
106. References 
 SwiftUI vs Jetpack Compose by an Android Engineer by Gérard Paligot 
 https://proandroiddev.com/swiftui-vs-jetpack-compose-by-an-android-engineer-6b48415f36b3 SwiftUI vs. Jetpack Compose: Why Android Wins Hands Down by Michael Long 
 https://michaellong.medium.com/swiftui-vs-jetpack-compose-why-android-wins-hands-down-b5f849b730db An iOS Engineer learns about Android’s Jetpack Compose and loves it. by Dimitri James Tsi fl itzis 
 https://medium.com/@tsif/an-ios-engineer-learns-about-androids-jetpack-compose-and-loves-it-c04fc6a53f10 SwiftUI vs. Jetpack Compos by Jeulian Bissekkou 
 https://quickbirdstudios.com/blog/swiftui-vs-android-jetpack-compose/ Conferences4Hall GitHub project 
 https://github.com/GerardPaligot/conferences4hall
107. Soundtracks 
 Title Theme - Street Fighter 2 Character Select - Street Fighter 2 Start Battle - Street Fighter 2 Guile’s Theme - Street Fighter 2 Ryu’s Theme - Street Fighter 2 Ken’s Theme - Street Fighter 2 Zangief’s Theme - Street Fighter 2 End Battle - Street Fighter 2 Credits - Street Fighter 
 Cosmonkey - Champion
108. Thank you! @GerardPaligot @GerardPaligot Gérard Paligot androiddev.social/@GerardPaligot