Compose Multiplatform – One Design System

What is about: When the product is built for multiple operating systems, we could like to have one design system with great consistency, efficiency, and maintainability, so it can be easily applied for multiple platforms.

Is Compose Multiplatform a good solution? We will find it out.

Transcript

1. Compose Multiplatform – One Design System Lei Wang Android Developer App Foundation Team
2. © 2022 PayPal Inc. Confidential and proprietary. 2 Design System Migration • Each request of change = • 2 Code base update • 2 PRs for each OS UI Lib • PRs in Total • Android: 35 • iOS: 23 • Human Errors • Out of date information • Miss communication Before After
3. © 2022 PayPal Inc. Confidential and proprietary. One Design System for all - Compose Multiplatform ? • One souce of code? + kotlin? • Performance Compose Multiplatform vs Native SwiftUI? • Development tools sufficient? • Easy to migration existing compose code? 3
4. © 2022 PayPal Inc. Confidential and proprietary. 4 OttoTheme Android Compose Compose Multiplatform
5. © 2022 PayPal Inc. Confidential and proprietary. 5 Android iOS
6. © 2022 PayPal Inc. Confidential and proprietary. 6 Android iOS
7. © 2022 PayPal Inc. Confidential and proprietary. 7 Resource API migration Android Compose Compose Multiplatform
8. © 2022 PayPal Inc. Confidential and proprietary. 8 Android iOS How to excute
9. © 2022 PayPal Inc. Confidential and proprietary. Whatelse can this Compose Multiplatform do? • Difficulity to setup a project? • Other resources support? Image, Localization, Files • UI Test Framework? 9
10. © 2022 PayPal Inc. Confidential and proprietary. Project Setup • Easy setup (5mins) • Easy work Android Studio • Well explain tutorial officially 10
11. © 2022 PayPal Inc. Confidential and proprietary. How the structure looks? 11 composeApp - a Kotlin module contains share code for all the platforms. - Build with Gradle. androidMain, iosMain - A source set is a platform specification - Independent dependencies for different platforms. commonMain - Common shared source set iosApp: - Xcode project that builds into an iOS application. - Depends on shared module as an iOS framework.
12. © 2022 PayPal Inc. Confidential and proprietary. Multiplatform Resources • Types • Fonts -> /font • Images -> /drawable • Strings -> /values • Other File Sources -> /files • Qualifiers • Language and Regions • Screen Density • ldpi ~ mdpi ~ hdpi ~ xhdpi ~ xxhdpi ~ xxxhdpi • Light/Dark Theme • -light (-notnight) • -dark (-night) • All resource types (except for raw files in the files directory) support qualifiers 12
13. © 2022 PayPal Inc. Confidential and proprietary. Multiplatform Resources-Usage • Import • androidx.compose.ui.res.* -> org.jetbrains.compose.resources.* • R.type.xxxx -> Res.type.xxxx • R.string.xxx -> Res.string.xxx • R.plurals.xxx -> Res.plurals.xxx • R.drawable.xxx -> Res.drawable.xxx • R.font.xxx -> Res.font.xxx 13
14. © 2022 PayPal Inc. Confidential and proprietary. Multiplatform Resources-Problems • Image resource format • Accept .png, .jpg, .bmp, .webp, .xml(AndroidDrawableVector) • .svg not for Android • String resource special symbols • Accept \n, \t, \uxxx(Unicode char) • Not \(backslash) • Needs to be generate in internal Res object before usage 14
15. © 2022 PayPal Inc. Confidential and proprietary. UI Testing • Same finders, assertions, actions and matchers as Jetpack Compose Testing API • This may change in the future as it is Experimental • Doesn’t rely on Junit TestRule, instead, runComposeUiTest function and invoke on ComposeUiTest receiver • Option1: CmdLine Run • iOS: ./gradlew :composeApp:iosSimulatorArm64Test • Android: ./gradlew :composeApp:connectedAndroidTest • Option2: IDE Run test task • Only for iOS 15
16. © 2022 PayPal Inc. Confidential and proprietary. Conclusion • One souce of code? • Yes • Performance Compose Multiplatform vs Native SwiftUI? • It is slight slower in iOS • Development tools sufficient? • No need to switching between IDE • Debugging not work for iOS • Move Previews to androidMain • Easy to migration existing compose code? • Almost 100% copy/paste of existing Compose code • Small migration work • Resource API updates(Font) • Compose multiplatform for iOS (Beta) 16
17. Thank You