Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Compose Multiplatform – One Design System

Avatar for lei wang lei wang
August 26, 2024
13

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.

Avatar for lei wang

lei wang

August 26, 2024
Tweet

Transcript

  1. © 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
  2. © 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
  3. © 2022 PayPal Inc. Confidential and proprietary. 7 Resource API

    migration Android Compose Compose Multiplatform
  4. © 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
  5. © 2022 PayPal Inc. Confidential and proprietary. Project Setup •

    Easy setup (5mins) • Easy work Android Studio • Well explain tutorial officially 10
  6. © 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.
  7. © 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
  8. © 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
  9. © 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
  10. © 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
  11. © 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