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

KMM - Share code between Native Android and Native iOS

KMM - Share code between Native Android and Native iOS

This slide is used at Google I/O Extended Vietnam 2021

Yoyo Coder

July 04, 2021
Tweet

More Decks by Yoyo Coder

Other Decks in Programming

Transcript

  1. Thuy Phan - Android Engineer @LINE
    @yoyocoder
    KMM - Share code between
    Native Android and Native iOS
    About speaker
    1

    View full-size slide

  2. 1. You would like to create a new mobile app for Android and iOS with native look and
    feel but you don’t want to write the same code twice.
    2. You have existing app for Android and iOS, you want to share code between 2
    platforms at minimal cost.
    Problem
    2

    View full-size slide

  3. 3
    02 What is KMM?
    01 Approaches for a mobile app
    03 What to share?
    04 When to use KMM
    05 Conclusion

    View full-size slide

  4. 4
    Do you need a mobile app as
    cheaply as possible?
    Are you okay with having
    limited performance if it
    reduces time-to-market
    Are you ready to have two dev
    teams working on separate
    codebases for each platform
    Then, you need to
    choose from these
    options
    Are you building an
    ecommerce app?
    Are hardware functionalities
    like camera or GPS a must?
    Hybrid app Cross-platform
    app
    Progressive web
    app
    Native app
    Yes
    No No
    No
    No Yes
    Yes
    Yes
    No
    Yes

    View full-size slide

  5. 5
    02 What is KMM?
    01 Approaches for a mobile app
    03 What to share?
    04 When to use KMM
    05 Conclusion

    View full-size slide

  6. What is KMM
    6
    Kotlin Multiplatforms
    Mobile Features
    +

    View full-size slide

  7. 7
    Shared Module
    .jar .framework
    App App
    Kotlin/JVM Kotlin/Native

    View full-size slide

  8. Version >= 4.2
    Kotlin Multiplatform Mobile plugin
    Tooling
    8
    Version >= 11.3

    View full-size slide

  9. Switch IDEs?
    11

    View full-size slide

  10. 12
    An Kotlin module that builds
    into the Android application.
    An Xcode project that builds
    into the iOS application.
    The code that works
    on both platforms,
    including the expect
    declarations.
    Android-specific parts,
    including actual
    implementations.
    iOS-specific parts, including
    actual implementations.

    View full-size slide

  11. 13
    expect class Platform() {
    val platform: String
    }
    actual class Platform actual constructor() {
    actual val platform: String =
    "Android ${android.os.Build.VERSION.SDK_INT}"
    }
    import platform.UIKit.UIDevice
    actual class Platform actual constructor() {
    actual val platform: String =
    UIDevice.currentDevice.systemName() +
    " " +
    UIDevice.currentDevice.systemVersion
    }
    shared/androidMain shared/iosMain
    shared/commonMain

    View full-size slide

  12. 14
    02 What is KMM?
    01 Approaches for a mobile app
    03 What to share?
    04 When to use KMM
    05 Conclusion

    View full-size slide

  13. Business / Domain
    (Entities, Use Cases, Interacters)
    Data / Core
    (Repositories, HTTP Clients, Cache)
    Architecture
    15
    Android
    iOS
    UI
    (Views)
    Presentation
    (Presenters, View Models, Controllers)

    View full-size slide

  14. Business logic and core
    Shared code
    Android specific APIs
    CameraX
    MLKit
    Room
    Biometric
    Play Services
    Lots of community and libraries
    16
    View View
    Native code
    iOS specific APIs
    AVFoundation
    CoreML
    Local Authentication
    Accounts
    Cloudkit
    Lots of community and libraries

    View full-size slide

  15. Ktor
    17
    Android Engine
    Threadpool +
    HttpURLConnection
    iOS Engine
    NSURLSession

    View full-size slide

  16. SQLDelight
    18
    SQLDelight
    Android Driver
    Native Driver

    View full-size slide

  17. 1. You would like to create a new mobile app for Android and iOS with native look and
    feel but you don’t want to write the same code twice.
    2. You have existing app for Android and iOS, you want to share code between 2
    platforms at minimal cost.
    Problem
    19

    View full-size slide

  18. 20
    Write shared code in KMM Module Take code written in Kotlin for Android
    Refactor it to be compatible with iOS
    Implement Native UI on Android/iOS Project
    New Project Existing Project
    Connect .framework to iOS project and .jar to Android Project
    Take a new feature

    View full-size slide

  19. // sample code in shared/commonMain
    class Greeting {
    fun greeting(): String {
    return "Hello, ${Platform().platform}!"
    }
    }
    Unit testing
    21

    View full-size slide

  20. 22
    expect class Platform() {
    val platform: String
    }
    actual class Platform actual constructor() {
    actual val platform: String =
    "Android ${android.os.Build.VERSION.SDK_INT}"
    }
    import platform.UIKit.UIDevice
    actual class Platform actual constructor() {
    actual val platform: String =
    UIDevice.currentDevice.systemName() +
    " " +
    UIDevice.currentDevice.systemVersion
    }
    shared/androidMain shared/iosMain
    shared/commonMain

    View full-size slide

  21. // in shared/commonTest
    class CommonGreetingTest {
    @Test
    fun testExample() {
    assertTrue(
    Greeting().greeting().contains("Hello"),
    "Check 'Hello' is mentioned"
    )
    }
    }
    Unit testing
    23

    View full-size slide

  22. // in shared/androidTest
    class AndroidGreetingTest {
    @Test
    fun testExample() {
    assertTrue(
    "Check Android is mentioned",
    Greeting().greeting().contains("Android")
    )
    }
    }
    Unit testing
    24

    View full-size slide

  23. // in shared/iosTest
    class IosGreetingTest {
    @Test
    fun testExample() {
    assertTrue(
    Greeting().greeting().contains("iOS"),
    "Check iOS is mentioned"
    )
    }
    }
    Unit testing
    25

    View full-size slide

  24. No different from the usual process described in the Android developer
    documentation from Google and the iOS developer documentation from Apple.
    Test & Deploy
    26

    View full-size slide

  25. 27
    02 What is KMM?
    01 Approaches for a mobile app
    03 What to share?
    04 When to use KMM
    05 Conclusion

    View full-size slide

  26. ● Incrementally share code between platforms but the native UI.
    ● Your project isn't going to be released very soon.
    ● You don't care about KMM being in alpha status right now.
    ● Your app is complex, tied strongly to multi-thread or has background
    processing.
    When to use KMM
    28

    View full-size slide

  27. Who uses KMM
    29

    View full-size slide

  28. 30
    02 What is KMM?
    01 Approaches for a mobile app
    03 What to share?
    04 When to use KMM
    05 Conclusion

    View full-size slide

  29. ● KMM is still Alpha.
    ● 100% native look and feel on every new OS version.
    ● Single codebase for the business logic.
    ● Get all the cross-platform benefits in your existing project.
    ● Use iOS and Android features without any overhead.
    ● Use Kotlin for cross-platform code.
    Conclusion
    31

    View full-size slide

  30. Thank you!
    https://kotlinlang.org/docs/m
    obile/home.html
    https://kotlinlang.org/lp/mobi
    le/case-studies/
    Resources
    32
    Thuy Phan - Android Engineer @LINE
    @yoyocoder

    View full-size slide