Introduction to Compose Multiplatform with KMP

Compose multi-platform

Hello World!

Have you ever wondered how you can build beautiful, responsive, and native-like applications for multiple platforms with just one codebase with Kotlin?

Enter Jetpack Compose Multiplatform, a revolutionary toolkit that is changing the way we think about cross-platform development. Whether you’re an Android specialist or a developer curious about exploring iOS and desktop platforms, this modern approach simplifies your workflow while delivering a seamless user experience across devices.

Let’s go deeper.

Compose Multiplatform Architecture

Modern app development often requires creating and maintaining applications for multiple platforms, such as iOS and Android. Traditionally, this has involved maintaining separate codebases for each platform, which increases development time, complexity, and costs. Kotlin Multiplatform (KMP), combined with Compose Multiplatform, offers a solution to this challenge by enabling cross-platform development with shared code.

This architecture leverages the capabilities of Kotlin Multiplatform to share business logic and Compose Multiplatform to share the UI layer between iOS and Android. At the same time, it preserves the flexibility to integrate platform-specific components where necessary.

Architecture of Compose Multiplatform

Basics

1.Shared Business Logic with Kotlin Multiplatform

KMP Logic

• Core Layer: This layer encapsulates the shared business logic of the application, such as network requests, data processing, and shared models. It’s written once using Kotlin and reused on both Android and iOS.
• Platform-Specific Logic: Despite sharing most of the business logic, there are cases where platform-specific features (e.g., iOS Keychain or Android Room Database) are required. KMP allows platform-specific code to be implemented while remaining compatible with the shared module.

2.Shared UI with Compose Multiplatform

Compose multi-platform logic

• Kotlin Compose Multiplatform enables sharing of the UI layer across platforms. This means that you can write the UI once and render it on both iOS and Android using Jetpack Compose-based technology.
• On Android, it integrates directly with native Android views.
• On iOS, it renders as native UI components, making it feel seamless for users.

3.Platform-Specific UI (Optional):

• Android uses Android Views and Jetpack Compose for its native UI development.
• iOS uses UIKit or SwiftUI for platform-specific UI implementations.
• Developers can opt for fully shared UI (Compose Multiplatform) or use platform-specific widgets alongside shared business logic.

4.Platform APIs:

Platform specific codes

• The architecture integrates platform-specific APIs for features that aren’t feasible to share across platforms:
• iOS APIs: CoreBluetooth, Foundation, CoreData, etc.
• Android APIs: Bluetooth, Room, Core Libraries, etc.
• These APIs are accessed via expect/actual mechanisms in Kotlin Multiplatform, allowing the shared code to call platform-specific implementations.

Key Benefits of Multiplatform Development

1. Code Reusability: Write once, use across platforms, saving time and effort.

2. Consistency: Maintain a unified design and functionality across devices.

3. Efficiency: Reduce development and maintenance costs by sharing code.

4. Faster Time-to-Market: Develop and deploy applications quickly across all targeted platforms.

Create your multiplatform project

1. Set up environment

You will need following tools and softwares

• Android Studio
• XCode
• JDK
• Kotlin multi-platform plugin
• Kotlin plugin

After setting up environment to make sure everything works as expected:

1. Install KDoctor(only on MacOS)

brew install kdoctor

2. After the installation is completed, call KDoctor in the console

kdoctor

3. If KDoctor diagnoses any problems while checking your environment, review the output for issues and possible solutions

👉 More detail: https://www.jetbrains.com/help/kotlin-multiplatform-dev/multiplatform-setup.html#possible-issues-and-solutions

2. Create project with wizard

Kotlin Multi-platform Wizard help developers to create their project template.

After download open the project in Android Studio and start your multi-platform journey.

Project Structure:

Kotlin Multi-platform project includes three modules

• composeApp is for code that will be shared across your Compose Multiplatform applications.
  It contains several subfolders:
  — `commonMain` is for code that’s common for all targets.
  — Other folders are for platform-specific Kotlin code. that will be compiled for only the platform indicated in the folder name.
• iosApp contains iOS applications. Even if you’re sharing your UI with Compose Multiplatform,
  you need this entry point for your iOS app. This is also where you should add SwiftUI code for your project.

Resources to Learn More

• Official Documentation: Compose Multiplatform
• GitHub Repository: JetBrains/Compose Multiplatform
• Tutorials: JetBrains Compose Multiplatform Tutorials
• Sample Projects: Kotlin Multiplatform Samples

Find Me

LinkedIn: https://www.linkedin.com/in/bayar-%C5%9Fahintekin-b70540104/?originalSubdomain=tr

Github: https://github.com/bayarsahintekin0

About Sisal

LinkedIn: https://www.linkedin.com/company/sisal-digital-hub-t%C3%BCrkiye

Medium: https://medium.com/sisaldigitalhubturkiye/about

Reference:

Sources:

Jetpack Compose Multiplatform Android & iOS

Introduction to Kotlin Multiplatform | Kotlin