Mobile App Development Using Kotlin Multiplatform Mobile (KMM) and Compose Multiplatform

Introduction

Hi, we're Yao, Bahng, and Lai from the Global Development Division. We're mobile app engineers, usually developing Global KINTO App.
A few months ago, we investigated Kotlin Mltiplatform Mobile (KMM) as a preliminary activity for the future of Global KINTO App. See our previous article on this. The results of our previous investigation indicate that KMM is an excellent solution for rapid product development. Now that KMM has been revealed as a new approach compatible with Compose UI, we decided to investigate it further.
Based on that investigation, this article discusses app development using Kotlin Multiplatform Mobile (KMM) and Compose Multiplatform.
Before getting into the main topic, let's first clarify three points:

• What is KMP?
• What is KMM?
• What is the relationship between KMP and KMM?

The answers are as follows:

• KMP: Kotlin Multiplatform, referring to the technology used to develop applications across multiple platforms using Kotlin, along with its entire ecosystem.
• KMM: Kotlin Multiplatform for Mobile. One of the primary use cases for KMP is code sharing between mobile platforms. In addition to KMP, several technologies specifically for mobile app development are collectively referred to as KMM.
  The graph below illustrates the relationship between KMP and KMM.
  

Reference:

-- JetBrains "Kotlin brand assets | Kotlin. (n.d.-c). Kotlin Help.", "Get started with Kotlin Multiplatform for mobile | Kotlin. (n.d.). Kotlin Help." Accessed June 1, 2023

Cross-Platform

You may wonder about the advantages of cross-platform development, particularly when considering Kotlin Multiplatform Mobile (KMM) as cross-platform solutions. Here are the benefits:

• Cost-effective: Cross-platform development allows the use of a single codebase across multiple platforms, eliminating the need for separate platform development teams and reducing the cost of app development.
• Faster deployment: By leveraging a single codebase, developers can create and launch applications on multiple platforms simultaneously, significantly reducing development time and accelerating time to release.
• Simplified maintenance and updates: By using a single codebase, apps can be easily maintained and updated, allowing changes to be made once and propagated across all platforms. This streamlines the maintenance process and ensures that all users have access to the latest features.
• Consistent user experience: By using cross-platform development tools and frameworks, a consistent look and feel can be maintained across different platforms, providing a unified user experience. This can lead to improved user satisfaction and user retention.
• Shared resources and skills: Developers familiar with cross-platform tools and languages can create apps for multiple platforms. This allows for more efficient use of resources and maximizes the return on investment in developer skills and training.

History of Cross-Platform Development Tools for Mobile

• In 2009, PhoneGap was created and later renamed Apache Cordova.
• In 2011, Xamarin was created by Mono and later acquired by Microsoft.
• In 2015, React Native was created by Facebook (Meta).
• In the mid-2010s, designer Frances Berriman and Google Chrome engineer Alex Russell coined the term "progressive web app (PWA)," and Google made several efforts to popularize it. In 2017, Flutter was created by Google.
• In 2021, KMM was created by JetBrains.
  This means that KMM is currently the most recent cross-platform solution available.

Logo source:

-- Apache "Artwork - Apache Cordova. (n.d.)." Accessed June 1, 2023 -- Microsoft "Conceptdev. (n.d.). Xamarin documentation - Xamarin. Microsoft Learn" Accessed June 1, 2023 -- Meta "Introduction · React native." Accessed June 1, 2023 -- Google "Progressive web apps. (n.d.). web.dev." Accessed June 1, 2023 -- Google "Flutter documentation. (n.d.)." Accessed June 1, 2023 -- JetBrains "Kotlin Multiplatform for Cross-Platform development" Accessed June 1, 2023

Why is KMM Different?

• Shared business logic: KMM reduces code duplication and maintains consistency between Android and iOS by allowing code related to business logic, networking, and data storage to be shared across platforms.
• True native UI: KMM allows the use of platform-specific tools and languages (e.g. XML for Android and SwiftUI or UIKit for iOS) for UI development, resulting in a more native look and feel compared to other cross-platform solutions.
• Performance: Kotlin code is compiled into native binaries for each platform, resulting in high-performance applications that are comparable to native development.
• Seamless integration: KMM can be integrated into existing projects, developers can adopt it incrementally and migrate sharing logic to Kotlin without having to completely rewrite their apps.
• Interoperability with native libraries: KMM seamlessly interoperates with both Android and iOS native libraries, facilitating the use of existing libraries and frameworks.
• Benefits of the Kotlin language: Kotlin is a modern and concise language that provides similar functionality to existing alternatives while reducing redundant code, with tool support from JetBrains.
  The above points are explained in detail below.

(1) Shared Business Logic

• KMM is used when implementing the data, business, and presentation layers in new projects.
• Flexibility: KMM allows developers to determine the scope of code they want to share, offering a flexible implement balanced with platform-specific code as needed.
• Consistency assurance: While differences in UI can be easily detected in QA testing, inconsistencies between Android and iOS are difficult to detect in logic. By using KMM, the same code can be used, thus ensuring consistency.

(2) Truly Native UI

• KMM supports native UI, uses native UI components, and follows platform-specific design patterns.
  • Android: xml, Jetpack Compose, etc.
  • iOS: UIKit, SwiftUI, etc.
• UI performance: KMM uses native UI components, and since the Kotlin code is compiled into native binaries for each platform, its performance is generally comparable to native apps.
• Easy platform updates: KMM makes it easy for developers to update new platform features and designs. Because it uses the native UI framework for each platform.

(3) Performance

• No JavaScript bridge is required; no reliance on third-party libraries.
• Uses the system's default rendering engine, reducing resource consumption compared to other cross-platform solutions.
• Native code compilation: KMM compiles Kotlin code into native binaries for each platform. This native code compilation enhances app efficiency and overall performance.
  • Android: Standard Kotlin/JVM
  • iOS: Kotlin/Native Compiler (Objective-C)

(4) Seamless Integration

• No need to bridge native modules or rewrite existing code.
• Phased adoption: KMM can be gradually introduced into existing native Android and iOS projects. This allows teams to share business logic, network, and data storage code across platforms in phases, reducing the risks associated with a complete technology switch.
• Multiple approaches to using KMM modules in iOS
  • CocoaPods Gradle plugin and git submodules
  • Framework
  • Swift Package Manager (SPM): Starting with Kotlin 1.5.30, KMM modules are available in iOS projects using the Swift Package Manager.

(5) Interoperability with Native Libraries

• Access to native APIs and libraries: KMM provides direct access to native APIs and libraries, facilitating easy integration with platform-specific functions and hardware components such as sensors and Bluetooth.
• Seamless integration with platform-specific code: KMM allows for writing platform-specific code as needed, which is useful when dealing with complex native libraries or accessing features not available through shared Kotlin code.
• Kotlin/Native: KMM uses Kotlin/Native for iOS. This allows seamless interoperability with Objective-C and Swift code. This means that existing iOS libraries and frameworks can be used without additional bridging or wrapping code.

(6) Kotlin Language Benefits

• Language features: Modern, static typing, null safety, extension functions, data classes, SmartCast, interoperability with Java
• Tools and support: Kotlin provides exceptional support and first-class integration in Android Studio and IntelliJ IDEA.
• Industry adoption: Kotlin has seen rapid adoption since becoming the official programming language for Android development. Many backend developers also use Kotlin.

What Kind of People are Using KMM?

In fact, several companies have adopted Kotlin Multiplatform Mobile (KMM) for mobile app development. Here are some notable examples:

• Netflix: Netflix uses KMM in some of its internal tools to share code between Android and iOS apps.
• VMware: VMware uses KMM for cross-platform development of Workspace ONE Intelligent Hub app (employee management tool for Android and iOS).
• Yandex: Yandex, a Russian multinational technology company, has adopted KMM in several of its mobile apps, including Yandex Maps and Yandex Disk.
• Quizlet: Quizlet, an online learning platform, uses KMM to share code between Android and iOS apps, improving development efficiency.
  These companies represent diverse industries, and their adoption of KMM demonstrates the flexibility and usefulness of technology in different contexts. As KMM becomes more popular, it's likely that even more companies will adopt KMM to meet their cross-platform mobile development needs.

Reference:

-- JetBrains "Case studies. (n.d.). Kotlin Multiplatform." Accessed June 1, 2023

How to Easily Create a KMM Project

Given these benefits, would you like to create a KMM project and give it a try? The following is a guide on how to do this.

• Download the latest Android Studio.
• In Android Studio, select File > New > New Project.
• Select Kotlin Multiplatform App in the list of project templates, and click Next.
• Specify the Name of the new project and click Next.
• In the iOS framework distribution, select the Regular framework.
• Keep the default names for Applications and Shared folders. Click Finish.

-- JetBrains "Create your first cross-platform app | Kotlin. (n.d.). Kotlin Help." Accessed June 1, 2023

Mobile App Architecture Using KMM

The following graph is an example of one of common KMM patterns.

This architecture takes full advantage of KMM's characteristic code sharing. Data persistence, including cache, database, network, use cases, and view model are all implemented in KMM. For UI, both Android and iOS use native UI components. Support is provided for both older frameworks such as XML and UIKit, and newer frameworks such as Jetpack Compose and SwiftUI.
This architecture allows business logic modules written in Kotlin to be imported into iOS as SDKs. This allows iOS developers to focus on UI development for efficient development. Here's some iOS code for a simple screen with an FAQ list. Except for the common UI Utility Class, this is all that needs to be implemented.

#FaqView.swift
struct FaqView: View {
    private let viewModel = FaqViewModel()
    @State var state: FaqContractState
    init() {
        state = viewModel.createInitialState()
    }
    var body: some View {
        NavigationView {
            listView()
        }
        .onAppear {
            viewModel.uiState.collect(collector: Collector<FaqContractState> {
                self.state = $0
            }
            ) { possibleError in
                print("finished with possible error")
            }
        }
    }
    private func listView() -> AnyView {        
        manageResourceState(
            resourceState: state.uiState,
            successView: { data in
                guard let list = data as? [Faq] else {
                    return AnyView(Text("error"))
                }
                return AnyView(
                    List {
                        ForEach(list, id: \.self) { item in
                            Text(item.description)
                        }
                    }
                )
            },
            onTryAgain: {
                viewModel.setEvent(event: FaqContractEvent.Retry())
            },
            onCheckAgain: {
                viewModel.setEvent(event: FaqContractEvent.Retry())
            }
        )
    }
}

That's not all about KMM. KMM has even more potential!

Architecture That Shares UI Code

In addition to business logic code, KMM can also share UI code using Compose Multiplatform.

As we discussed earlier, Kotlin Multiplatform Mobile (KMM) is primarily used for implementing shared business logic, but it also supports shared UI development. Compose Multiplatform is a declarative framework for sharing UI across multiple platforms using Kotlin. Based on Jetpack Compose, it was developed by JetBrains and open source contributors. Combining KMM with Compose Multiplatform allows for the building of both logic code and UI using the Kotlin language.
Reference:

-- JetBrains "Kotlin brand assets | Kotlin. (n.d.-c). Kotlin Help.", "Compose multiplatform UI framework | JetBrains. (n.d.). JetBrains: Developer Tools for Professionals and Teams." Accessed June 1, 2023

Comparison of Different Patterns of KMM Architecture

Assuming a mobile project is being developed, the estimated workloads for each client are as follows: UI: 2 people, Presentation: 1 person, Business/Domain: 1 person, Data/Core: 1 person

The workloads saved from this point is based on the percentage of code written by KMM.

KMM can reduce workloads by up to 50%.
The biggest advantage of KMM compared to other cross-platform solutions is its flexibility in code sharing. How much code to share with KMM is entirely up to us. Other cross-platform solutions do not offer this level of flexibility.

Summary

Cons of KMM

Of course, every tool has its drawbacks. KMM is no exception.

• Limited platform support: Kotlin Multiplatform Mobile can target multiple platforms, but not all platforms are supported. For example, it does not currently support web or desktop applications.
• Learning cost: If you are not familiar with Kotlin, there is a learning cost to effectively use it for multi-platform development.
• Framework compatibility: Kotlin Multiplatform Mobile can be used with various frameworks, but is not compatible with all of them. This limits your options and may require you to work within certain constraints.
• Maintenance overhead: Maintaining a multiplatform codebase can be more complex than maintaining a separate codebase for each platform. This added complexity can lead to increased overhead in testing, debugging, and maintenance.
• Tool limitations: Some tools and libraries may not be compatible with Kotlin Multiplatform Mobile, making development more complicated or requiring the search for alternative solutions.

Applications

As mentioned above, integrating KMM's architecture into a project can be considered in various situations, each with it’s pros and cons.

With the technical benefits covered, let's get back to the actual development process. Like most mobile development teams, ours is small. Given our limited engineering resources, when faced with a significant change, such as upgrading from version 1.0 to 2.0, we need to collaborate with other divisions and both onsite and offshore outsourcing teams to ensure a quick release.
However, there are several problems in this process:

1. Seamless collaboration between different teams is challenging.
2. With more developers and different teams in different offices, communication costs increase.
3. It becomes difficult to maintain consistency across different teams.
4. Working with external teams makes it difficult to manage the security of sensitive information.
   KMM can address almost all of these problems by developing core modules, defining protocols, and adopting a separate approach for UI and logic development:
5. Allows each team to focus on their part. Can greatly facilitate collaboration.
6. Reduces the time and cost required for communication.
7. By having the core modules developed by the KMM team on a consistent basis, most inconsistencies are eliminated in advance.
8. Although KMM supports a single codebase, the separation of the UI and logic layers allows for the use of multiple repositories. The core modules are developed by the KMM team and the SDK is provided to external teams. This eliminates the need for the source code to be disclosed to external teams and reduces the risk of leaking confidential information. This is difficult to achieve with other cross-platform technology solutions.
   
   In conclusion, it can be said that KMM brings significant benefits not only in terms of technical advantages but also in fostering cooperation across divisions and companies.

Conclusion

Given the importance of KMM in new projects and its potential for significant workload savings, we have already integrated KMM into new projects for the next major release. We will continue to monitor new technologies and tools related to KMM and seek opportunities to further enhance efficiency.