Unlocking Cross-Platform Development with KMM

Halo folks, this article will discuss about KMM(Kotlin Multiplatform Mobile) but before jump into KMM let rollback to the first era of cross platform technology. Many frameworks have tried to achieve multiplatform development, including:

1. PhoneGap, One of the earliest, this frameworks enabled you to write mobile apps using HTML5, CSS3 and JavaScript. It was discontinued in 2020.
2. Apache Cordova, Open source fork of PhoneGap.
3. Appcelerator Titanium, JavaScript-based SDK that supported iOS, Android, Windows and Blackberry. Discontinued and will be open-sourced by March 2022.
4. Ionic, Uses Angular, React and Vue UI frameworks.
5. Xamarin, Microsoft-owned C#-based development framework that includes the .NET runtime. The framework is compiled for iOS, so it’s faster on iOS than Android, which uses a just-in-time compilation.
6. React Native, Facebook’s mobile-based framework based on the popular React web framework. It’s web and JavaScript based. It too has a slow bridge between native and web.
7. Flutter, it works on all platforms. One of the main benefits of this framework is that you can write almost all your UI once. Some UI will need to be different based on the platform. For example, desktop and web don’t need a toolbar.

And now there is Kotlin Multiplatform Mobile. Kotlin Multiplatform Mobile (KMM) is a framework that allows you to build an application that targets Android and iOS. Unlike other multiplatform frameworks, though, it does not attempt to make all the code of the application reusable across both platforms. Instead, the UI layer, in Clean Architecture terms, is the only layer that needs to be developed natively, while allowing most of the rest of the architectural layers to be shared. The shared architecture is provided to each native app as a compiled package. This package is then accessed within the native app code. KMM has the potential to be the foundation for a number of platforms, including Android, JavaScript, Java, Kotlin and Swift iOS codebases.

Why choose KMM ?

Pros

1. Android developers are already familiar
2. No overhead
3. Shared business logic
4. Can share as much or as little as desired
5. Not sharing the UI can be a bane or a boon.
6. Interoperability with the other languages allows us to use Kotlin code in Java, Swift, or Objective-C and vice-versa
7. Expect/actual mechanism to define the structure in common code and provide the implementation is platform-specific directories
8. Ability to use platform-specific libraries
9. Has libraries for all major tasks

Cons

1. Limited platform support, KMM is still a relatively new technology, and its support for platforms other than iOS and Android is limited.
2. Learning curve, While Kotlin is easy to learn, KMM requires additional skills and knowledge in order to properly use it for mobile app development especially about modularization.
3. Integration challenges, KMM require additional effort to integrate with existing tools and libraries, especially if you’re already using other mobile development technologies.
4. Third-party library support, Not all third-party libraries are compatible with KMM, which may limit your choice of libraries or require additional effort to make them work.

To start with KMM we need prepare several skill as Developer such as:

1. Knowledge of Kotlin Language, You should have a good understanding of the Kotlin programming language. Kotlin Multiplatform is based on Kotlin, so having a solid foundation in the language will make it easier for you to work with the framework.
2. Understanding of multiplatform development, Kotlin Multiplatform is designed to enable developers to write code that can be shared across multiple platforms, such as Android, iOS, and web. Therefore, you should have an understanding of the challenges and best practices for developing software that runs on multiple platforms.
3. Familiarity with the platforms you want to target, To use Kotlin Multiplatform effectively, you should have a good understanding of the platforms you want to target. For example, if you plan to develop for Android and iOS, you should be familiar with the development environments and programming languages for both platforms.
4. Experience with build tools, Kotlin Multiplatform uses Gradle as its build system. You should have experience with Gradle or other build tools, such as Maven or Ant, to effectively build and deploy Kotlin Multiplatform projects.
5. Willingness to learn, Kotlin Multiplatform is a relatively new framework, and there may be some new concepts and practices that you need to learn. You should be willing to learn and experiment with new technologies to effectively use Kotlin Multiplatform.

Besides skill we need to prepare the tools too, such as:

1. Mac OS, it’s needed because to develop IOS UI we need XCode that provided by MAC OS
2. JDK, it provides the necessary tools and environment for compiling and running Kotlin code (Java-based virtual machine (JVM) which is part of the JDK), which KMM relies on for it’s multiplatform capabilities.
3. Android Studio version 4.1 or above, the official IDE for developing Android applications. Although KMM does not require Android-specific code to be written, Android Studio is still required to build Android applications that use KMM code.
4. XCode 11.3 or above, the official integrated development environment (IDE) for developing iOS applications. To build and deploy KMM code on iOS devices, Xcode must be installed on the Mac OS machine.

Beside the requirement above, there is a tool for diagnosing and fixing issues in Kotlin Multiplatform Mobile (KMM) projects that is KDoctor. KDoctor helps to identify and fix issues in KMM projects by analyzing the project’s dependencies, configuration files, and build files. The tool can detect a range of issues, such as incompatible Kotlin versions, incorrect project configurations, and missing dependencies. It can also provide recommendations for fixing the identified issues.

KDoctor runs the following diagnostics:

1. System, checks an operating system version
2. JDK, checks that JDK installation and JAVA_HOME setting
3. Android Studio — checks Android Studio installation, Kotlin and Kotlin Multiplatform Mobile plugins
4. Xcode — checks Xcode installation and setup
5. Cocoapods — checks ruby environment and cocoapods gem installation

Start using KDoctor :

1. Install the KDoctor through your terminal.

brew install kdoctor

2. Run the KDoctor for diagnose your environment.

kdoctor
Diagnosing Kotlin Multiplatform Mobile environment...

3. You will get this diagnosis result like below. You will see that the KDoctor show the problem come from Cocoapods and give some references that relate with the problem.

Let’s start KMM with IDE (Android Studio), with several step below :

• To make android studio support KMM, we need install the KMM plugin preferences → plugin → search KMM → install → restart IDE

• Now the android studio available to create KMM project. Let’s create new project and see on the project template. There are several option for create KMM project, you can choose the Kotlin Multiplatfrom App.

• If you have chosen the template above, the next step is package name setup. There are several package, it will be appear in KMM project like below.

• Basically KMM is share module that contain business logic of our app that will be consume by Android and IOS. So, when you see the package above you will know that androidApp contain Android Platform Code, iosApp contain IOS Platform Code and shared contain the business logic that will consumed by both platform.
• If you are android developer, for sure you already know the project manager for android is gradle. Gradle already include in KMM project because we create project on android studio. Now, we need think more about IOS. There are two option, first is using Regular Frameworks that provide by KMM or using Cocoapods Frameworks. If you don’t know how to manage Cocoapods, the best choice is Regular Framework like the picture above.
• If the project finish and already created, you need to change android view to project view. See the package structure, it will be like picture below.

• Let’s open the shared package, you will find the several package inside it.

The picture above showing som package inside shared package there is androidMain, commonMain, and iosMain. These folders contain the source code for the common, Android, and iOS-specific parts of the project, respectively.

1. androidMain, Contain the platform-specific implementation for Android respectively. This package can contain platform-specific code, such as UI-related code, that cannot be shared across platforms.
2. iosMain, Contain the platform-specific implementation for IOS respectively. This package can contain platform-specific code, such as UI-related code, that cannot be shared across platforms.
3. commonMain, Contains the Kotlin source code that is shared between all platforms. This code can be used by both the Android and iOS-specific parts of the project.

Now let’s move to the inside sample of one package androidMain. There is Platform.kt file with the following code :

class AndroidPlatform : Platform {
    override val name: String = "Android ${android.os.Build.VERSION.SDK_INT}"
}

actual fun getPlatform(): Platform = AndroidPlatform()

The code above have class AndroidPlatform that extend to Platform interface with the variable member name that basically string data type and assign with value OS version from android platform.

Let’s see on Platform interface from common package.

interface Platform {
    val name: String
}

expect fun getPlatform(): Platform

From both of the code we know, there are two keyword “Actual” and “Expect”. In KMM (Kotlin Multiplatform Mobile), “expect” and “actual” are two special keywords used to define common APIs and platform-specific implementations, respectively.

1. actual, keyword is used to provide the platform-specific implementation for the declarations made with the expect keyword. It is used in the platform-specific module to implement the expected API. When a platform-specific module implements an expect declaration, it must provide an actual implementation for that declaration.
2. expect, keyword is used to define a common API in a multiplatform project. This API contains the declarations of functions, classes, and properties that are expected to be implemented by each platform-specific module. In other words, it’s a declaration of the interface that the platform-specific implementation needs to fulfill.

These two keywords, make developers can write common code in a multiplatform project, and platform-specific code can be implemented separately, making the code reusable across different platforms.

Now, try to jump into the Greeting class that will be consumed by both of platform. Inside Greeting class there is greet() function that call platform name. Because platform already adjusted on each platform, each platform will show different OS Version.

class Greeting {
    private val platform: Platform = getPlatform()

    fun greet(): String {
        return "Hello, ${platform.name}!"
    }
}

The code below come from androidApp package:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    GreetingView(Greeting().greet())
                }
            }
        }
    }
}

@Composable
fun GreetingView(text: String) {
    Text(text = text)
}

From the code above we can know the app will show the GreetingView with parameter text as String. So Greeting().greet() call as text parameter value. Try compiling it by selecting the target platform you want to build on the app’s run menu.

It will be happen also in IOS. So the app will look like these after compile.

So in the last part of this article, when considering whether to use Kotlin Multiplatform Mobile (KMM) for building a mobile app, you can think some some key considerations:

1. Code sharing, one of the main advantages of KMM is the ability to share code between different platforms, such as Android and iOS. You should consider whether your app has significant business logic or functionality that could benefit from code sharing across multiple platforms. If your app requires a lot of platform-specific functionality, KMM may not be the best choice.
2. Application complexity, KMM may be a good choice for simple to moderately complex apps, but for more complex apps, the overhead of managing multiple targets and dealing with platform-specific issues may outweigh the benefits of code sharing.
3. Community support, KMM is a relatively new technology, so you should consider the level of community support and available resources, such as libraries and tools.
4. Development team, KMM requires developers who are comfortable with Kotlin and have experience with multiplatform development. If your development team is already experienced with Kotlin and has an interest in multiplatform development, KMM may be a good fit.
5. Timeline and budget, you should consider your project timeline and budget. KMM can be a more efficient way to build cross-platform apps, but it may also require more upfront investment in terms of development time and resources. You should weigh the potential benefits of code sharing against the costs of adopting a new technology.

That’s all for this article, hopefully useful and see you in the next series!!! Don’t forget to follow and👏🏻 for this article because it means a lot to me to be more enthusiastic about writing the next content — :).