Building Kotlin Multiplatform App with Compose Multiplatform

Hi everyone;

My name is Mehmet Burak Akgün and I mostly work on Android projects. This blog will include a Compose for iOS demo (and all other available platforms as well) and an example concept for a Kotlin multiplatform app. The article then will touch on how to view fetched MidJourney images from a server using pagination.

Designed to rapidly and simply design native user interfaces for desktop, web, iOS, and Android platforms, Compose Multiplatform is letting you create code once and utilise it on other platforms, this saves you time and reduces the necessity of maintaining codes. This blog post will walk over merging Kotlin Multiplatform with Jetpack Compose and installing Compose Multiplatform.

Setting Up Environment

Of course, it is beneficial to follow along with Jetbrains’ documentation. They have explained how to install the environment very nicely, but since it is newly released, it may be necessary to deep dive into some things. First, check the installation with KDoctor.

For instance, even though I had XCode installed on my computer, I ran into a problem for which there was no fix in the docs or online at places like StackOverflow. I was forced to look for solutions on Jetbrains’ Slack channel as a result. Fortunately, someone had already posed a query along these lines. Since the JetBrains staff is quite active in offering support on their Slack channel. I advise everyone to take this approach.

Setting Up a Compose Multiplatform iOS Project

Before you may start a Compose Multiplatform iOS project on your PC, Xcode installation is needed. Install Xcode, open Android Studio, decide on “Compose Multiplatform” as the project template, and then launch a fresh project. The Android Studio wizard does not let us build Compose Multiplatform using iOS projects as of this present. Still, this template will help us to do it. https://github.com/JetBrains/compose-multiplatform-ios-android-template The common module of the projects includes the business logic and UI codes applied by the Android and iOS applications.

To include the shared module as a dependency so you may use it in your iOS app, add it to the Podfile, and run pod install in your Xcode project. Your iOS project may then benefit from the standard UI code.

Kotlin Multiplatform and Jetpack Compose

Kotlin Multiplatform Developers may generate cross-platform interoperable business logic and code. UI frameworks such as Compose Multiplatform enable declarative UI of Android applications. After Compose Multiplatform is created, developers are now able to construct expressive native UI for iOS or Android and other platforms with only one codebase.

Kotlin Multiplatform and JetBrains Compose allow developers to create common UI and business logic constructs in Kotlin and then let native iOS and Android developers’ experiences materialize. This approach enables developers to enable simpler code modifications and save a lot of time.

Before this, Kotlin Multiplatform helped us with consolidation in terms of domain/data/di and shared libraries. However, with this new version, there is no longer a need to write in SwiftUI(ofc if you want, you can still write), and because this requirement has been eliminated, we can now also write fully shared ViewModels under shared/common.

Previously, whether we wrote our ViewModels in Swift or Kotlin with 3rd party libraries(like KMM-ViewModels), we had to handle observables like, @Published objects or Bindings<T> within the UIViewController on the Swift end.

MidJourney Images Compose Multiplatform Mobile Application

The breathtaking photos produced by MidJourney are displayed in this application. It was created with Compose Multiplatform and works with both iOS and Android and also (Wear OS, TV, Automotive, Phone, Desktop, Web).

This app, called Midjourney Images Compose Multiplatform, may be found on GitHub at https://github.com/mbakgun/midjourney-images-compose-multiplatform

MVVM-based application created with Kotlin with JetBrains Compose. Network request states, endless pagination, image loading, offline mode, and image caching processes were performed.

Consumer apps do not have any complex structures or operations. They use the common UI layer (including ViewModel) and are responsible for creating MjImagesApp. MjImagesApp and the dependency of this Composable, MjImagesViewModel, works as same on Android and iOS platforms.

Design

The MidJourney Images Compose Multiplatform Mobile Application’s conceptual structure is composed of distinct domain, data, and user interface layers. The application uses Kotlin Coroutines for asynchronous programming and Ktor for networking. The domain layer’s task is to map, or filter, and paginize. In addition to that, server pictures are gathered by the data layer. The layer on the user interface that displays the photos is made of JetBrains Compose.

Taking into consideration every aspect, the app’s design facilitates testing, management, and growth. https://developer.android.com/topic/architecture

Libraries

- [Ktor](https://ktor.io/)
- [Koin](https://insert-koin.io/)
- [Kotlinx Serialization](https://kotlinlang.org/docs/serialization.html)
- [Kotlinx Coroutines](https://kotlinlang.org/docs/coroutines-overview.html)
- [Coil](https://github.com/qdsfdhvh/compose-imageloader)
- [Multiplatform Settings](https://github.com/russhwolf/multiplatform-settings)

The Kotlin web framework Ktor provides developers client and server APIs to enable them to asynchronous servers and clients in their networked applications. It was used in the MidJourney Images Compose Multiplatform Mobile applications for networking needs.

Designed to be lightweight and help in the creation of better apps, Koin is a Kotlin dependency injection framework. It was included in the app to provide a cross-platform dependency injection technique.

The app runs deserializing and serializing JSON data and the Kotlinx-Serialization package is one method to translate Kotlin objects from and into JSON format.

Kotlinx-Coroutines is the library for asynchronous Kotlin programming. It was applied to offer concurrency and simultaneous handling of several jobs. It reduces thread blocking and increases efficiency.

The Coil library lets users of Jetpack/JetBrains Compose display pictures fast and effortlessly. From a server, the user views the loaded pictures that are shown in the program. It also provides us with advanced storage image techniques. Coil compose Image loader supports Kotlin coroutines as well.

The well-selected libraries guarantee the flawless running of the MidJourney Images Compose Multiplatform Mobile Application.

Tests

The unit tests for the shared/common code can be run under the shared/common folder. The unit tests written for this project are located in this directory. The Compose UI tests, on the other hand, were added under the androidTests folder. If there is platform-specific logic in the iOS and Android front end, it makes sense, and is necessary to test it separately. The Maestro tests are written under the maestro package.

Limitations

1. Making sure that all libraries used in the project enable development on both the iOS and JVM, Web platforms (should you wish to use them in shared/common settings), has become a major barrier in developing a Kotlin Multiplatform Mobile (previously KMM) application. Libraries have to be built on every platform. If a library cannot be developed for iOS, it cannot be used in the common path either. Conversely, the Kotlin Multiplatform ecosystem is growing rapidly and increasingly more libraries and tools allowing Kotlin Multiplatform are accessible for daily use. Consequently, it is becoming easier to create outstanding Kotlin Multiplatform applications and find libraries supporting Web, iOS, and JVM platforms. Please note that if a library was not created for iOS, it may still be used in a Kotlin Multiplatform application under shared/Android or shared/iOS instead of the common path using expect/actual. This helps programmers to keep developing outstanding Kotlin Multiplatform apps utilizing a tool essential for their job.
2. You may have noticed a slight visual difference between the Android and iOS applications. This difference is due to my use of LazyVerticalStaggeredGrid for Android and LazyVerticalGrid for iOS. During the build process, I encountered an issue that I was not able to resolve as of today. Specifically, I was not able to use LazyStaggeredGrid for Jetpack Compose for iOS.

Such small situations can always occur for a framework that is in alpha version. And this blocker has opened up a nice area for the use of expect/actual functions, which were introduced with Kotlin Multiplatform.

As a small note, the fix for this issue will be available soon. I had contacted Dima Avdeev [JetBrains] via Slack and thanks him for the quick action.

Update : Thanks to the team, it was fixed.

Recently added support for Android Automotive

Conclusion

It brings me great pleasure to inform you that I did not find any performance problems during exhaustive testing of the MidJourney Images Compose Multiplatform Mobile Application on my very own iPhone device. The program ran without any faults or delays and could carry out its purposes satisfactorily.
Furthermore, one should be aware of the fact that the compiler converts the Kotlin code used in the application into Objective-C. Using native code execution on iOS devices guarantees also the best possible speed and compatibility.

Compose Multiplatform generally makes it simple from one codebase to generate native user interfaces for iOS and Android. Kotlin Multiplatform and JetBrains Compose taken together will let developers create native user interfaces for both platforms. Kotlin and Compose let them create the same UI code and business logic. Writing this kind helps them save a lot of time and reduce the maintenance required on the code. If you want native user experiences for iOS and Android, Compose Multiplatform is a smart consideration. It will grow much better when the open-source community and the JetBrains team publish fresh new releases. As of today framework is still in alpha, and also it has a few flaws.

Lastly, it is worth noting that in a Kotlin Multiplatform project, sharing common composables on the UI side is much easier with other Android platforms such as Android Automotive, Wear OS, Android TV, Desktop, and Web.

This project has web support and if you want to test the ‘Compose for Web (JS)’ in your browser, please open the demo.

Recently I’ve added WASM support, you can also check the WASM demo.

Thanks for your time 🌸 That’s all 🙏
Happy Kotlin / Compose