Wolfram Rittmeyer Photo by Romain Guy Compose Multiplatform

What is Compose „Jetpack Compose is built around composable functions. These functions let you define your app's UI programmatically by describing its shape and data dependencies, rather than focusing on the process of the UI's construction (...)“ https://developer.android.com/jetpack/compose/tutorial

No content

https://kotlinlang.org/docs/multiplatform.html

Which platforms  Desktop  Android  iOS (beta - well: kind of)  Web (not even in alpha)  Backend

https://blog.jetbrains.com/kotlin/2023/05/compose-multiplatform-for-ios-is-in-alpha/

https://kotlinlang.org/docs/multiplatform-discover-project.html#compilation-to-a-specific-target

No content

No content

No content

Lists of KMP libraries https://github.com/terrakok/kmp-awesome https://github.com/AAkira/Kotlin-Multiplatform-Libraries

No content

No content

https://kotlinlang.org/docs/multiplatform-discover-project.html

:iosApp:iosApp.swift

:composeApp:iosMain:main.kt

:composeApp:androidMain:App.android.kt

:composeApp:jvmMain:Main.kt

expect / actual  Declaration using expect  Implementation using actual

expect / actual  Declaration using expect  Implementation using actual  For functions and classes – Other types are in beta  Has to be in the same package – of the respective source sets

No content

No content

Interface and DI  Create an interface  Create concrete implementations for platforms  Better for more complex things  Maybe one implementation can be reused – e.g. Android and Desktop

No content

No content

No content

Modularization  Maybe the most dangerous part  Use the shared module creator from previous slide only! – Otherwise you get all kind of weird iOS build problems

No content

No content

Modularization  Maybe the most dangerous part  Use the shared module creator from previous slide only! – Otherwise you get all kind of weird iOS build problems  Also: You cannot create modules willy-nilly

Modularization  Maybe the most dangerous part  Use the shared module creator from previous slide only! – Otherwise you get all kind of weird iOS build problems  Also: You cannot create modules willy-nilly  There is a long doc about this: https://www.jetbrains.com/help/kotlin-multiplatform-dev/multiplatform-project-configuration.html

No content

No content

No content

Modularization  Hard to find samples  Good one: TiVi by Chris Banes  Will dig into this some more myself – And provide a repo eventually

No content

Kotlin – Swift Interoperability  Translation doesn’t go to Swift but to Objective-C  And only from there to Swift – Type information can get lost (generics with interfaces)

Kotlin – Swift Interoperability  Translation doesn’t go to Swift but to Objective-C  And only from there to Swift – Type information can get lost (generics with interfaces)  Coroutines and Flows do not operate as expected

Kotlin – Swift Interoperability  Translation doesn’t go to Swift but to Objective-C  And only from there to Swift – Type information can get lost (generics with interfaces)  Coroutines and Flows do not operate as expected – Callbacks – Error handling – Cancelation

Kotlin – Swift Interoperability  Libraries to the rescue – KMP-NativeCoroutines https://github.com/rickclephas/KMP-NativeCoroutines – SKIE (Swift Kotlin Interface Enhancer) https://skie.touchlab.co/  See also this article series https://medium.com/@aoriani/list/writing-swiftfriendly-kotlin-multiplatform-apis-c51c2b317fce

No content

Resources  unify resources like – images ● vector and bitmap images – strings – files – fonts

Resources  follows Android folder conventions – e.g. values-ro for Romanian resources

Resources  follows Android folder conventions – e.g. values-ro for Romanian resources  since Compose MP 1.6

No content

No content

No content

Testing  UI Testing since Compose MP 1.6  Work the same way as in Android

Testing  UI Testing since Compose MP 1.6  Work the same way as in Android  Separating UI testing and logic cumbersome

www.wolfram- www.wolfram- rittmeyer.de rittmeyer.de

Tooling  A throwback to Compose initial days on Android  Still a bit flaky and susceptible to errors  No UI editor

Tooling  You can create previews – But only in Fleet  LayoutInspector works nicely  Also App Inspection – Database Inspector – Network Inspector

No content

Configuration  You do not have variants

Configuration  You do not have variants  But you can still use some gradle things to help you

Configuration  BuildConfig https://github.com/gmazzo/gradle-buildconfig-plugin

No content

No content

Configuration  BuildKonfig https://github.com/yshrsmz/BuildKonfig  Seems to be more powerful

Configuration  BuildKonfig https://github.com/yshrsmz/BuildKonfig  Seems to be more powerful  Both are around for years  Stars / Forks and number of contributors more or less equal

Configuration  BuildKonfig https://github.com/yshrsmz/BuildKonfig  Seems to be more powerful  Both are around for years  Stars / Forks and number of contributors more or less equal  BuildKonfig is on version 0.15.1 while BuildConfig is on 5.3.5

Configuration  So with BuildConfig and DI you can do variants yourself

Configuration  So with BuildConfig and DI you can do variants yourself  Use Interfaces  Inject proper Class depending on variant

Configuration  So with BuildConfig and DI you can do variants yourself  Use Interfaces  Inject proper Class depending on variant  But more cumbersome then what we have on Android

https://kotlinlang.org/docs/multiplatform.html#kotlin-multiplatform-use-cases

KMP rules  The only proper alternative for – Sharing logic on iOS and Android – While keeping the UI native

KMP rules „(…) our initial focus is sharing the business Logic the part of the code that's most agnostic to the user“ What's new in Android, Google I/O https://www.youtube.com/watch?v=_yWxUp86TGg

But what about Compose?

But what about Compose?  IMHO best suited if – You have a distinct UI – You are a solo dev ● who does not care that much about iOS :-) ● If you care: Use a distinct UI

But what about Compose?  IMHO best suited if – You have a distinct UI – You are a solo dev ● who does not care that much about iOS :-) ● If you care: Use a distinct UI – You plan to release no too soon

https://flic.kr/p/cXWo83 by Tsahi Levent-Levi

No content

Netflix  Ktor Client for networking  SQLDelight for caching „Almost 50% of the production code in our Android and iOS apps is decoupled from the underlying platform“ https://netflixtechblog.com/netflix-android-and-ios-studio-apps-kotlin-multiplatform-d6d4d8d25d23

McDonalds  Using it at the repository and use case layer  Networking is still native  They intend to gradually move more areas to shared code https://medium.com/mcdonalds-technical-blog/mobile-multiplatform-development-at-mcdonalds-3b72c8d44ebc

Meetup  Apollo Graph QL for backend access  SQLDelight as DB  Repository layer  Interactor / UseCase layer  Koin for DI https://medium.com/making-meetup/adopting-kotlin-multiplatform-mobile-kmm-at-meetup-326b2b0a4186 https://www.youtube.com/watch?v=GtJBS7B3eyM

Instabee  Compose Multiplatform  Ktor Client (kotlinx Serialization /kotlinx DateTime)  multiplatform-settings  Compose Cupertino  Voyager for navigation https://medium.com/making-meetup/adopting-kotlin-multiplatform-mobile-kmm-at-meetup-326b2b0a4186 https://www.youtube.com/watch?v=GtJBS7B3eyM

Google  At Google I/O 24 Google went all in with KMP  Documentation  Libraries  And more of their own apps using it

https://developer.android.com/kotlin/multiplatform

https://developer.android.com/kotlin/multiplatform

www.wolfram- www.wolfram- rittmeyer.de rittmeyer.de @Rittmeye @Rittmeye

Left open  Testing

Left open  Testing (e.g. Kotest)

Left open  Testing (e.g. Kotest)  Using SwiftUI for certain aspects

Left open  Testing (e.g. Kotest)  Using SwiftUI for certain aspects (e.g. navigation)  Integration of Compose MP in an KMP app

Left open  Testing (e.g. Kotest)  Using SwiftUI for certain aspects (e.g. navigation)  Integration of Compose MP in an KMP app  expect / actual for Composables

Left open  Testing (e.g. Kotest)  Using SwiftUI for certain aspects (e.g. navigation)  Integration of Compose MP in an KMP app  expect / actual for Composables  Debugging Swift-Kotlin integration

Left open  Testing (e.g. Kotest)  Using SwiftUI for certain aspects (e.g. navigation)  Integration of Compose MP in an KMP app  expect / actual for Composables  Debugging Swift-Kotlin integration  Use of Cupertino-Style Components

https://developer.android.com/jetpack/compose (nowadays a tad different)

https://www.linkedin.com/in/wolfram-rittmeyer/ https://www.linkedin.com/in/wolfram-rittmeyer/ https://mastodon.social/@RittmeyerW https://mastodon.social/@RittmeyerW https://www.grokkingandroid.com https://www.grokkingandroid.com https://wolfram-rittmeyer.de/ https://wolfram-rittmeyer.de/ Thanks Picture by Wil Stewart Picture by Wil Stewart

Pictures / Licenses 1: Background of title slide shows a small section of a photo by Romain Guy: https://www.flickr.com/photos/romainguy/48539281152 2: Jetpack Compose logo: https://developer.android.com/jetpack/compose 3: Coffee bean and ground coffee by Tamas Pap: https://unsplash.com/photos/brown-and-black-stones-in-close-up-photography-RJPrJQXlmng 4: Cups by Annie Spratt: https://unsplash.com/photos/white-ceramic-mortar-and-pestle-QOBHnWEg-mk 5: Knobs by Adi Goldstein: https://unsplash.com/photos/black-audio-equalizer-HLS7GQ0BCOQ 6: Drawers by Jan Antonin Kolar: https://unsplash.com/photos/brown-wooden-drawer-lRoX0shwjUQ 7: Adapter by Call Me Fred: https://unsplash.com/photos/two-white-power-adapters-on-white-background-nBfTARHPxiU 8: Album by Rirri: https://unsplash.com/photos/photos-on-white-wooden-table-z4KhbVhPP7s 9: Computer / Discussion by Scott Graham: https://unsplash.com/photos/person-holding-pencil-near-laptop-computer-5fNmWej4tAA 10: iOS / Android abomination by Tsahi Levent-Levi: https://unsplash.com/photos/sL2BRR1cuvM 11: Company Spiral by Sven Read: https://unsplash.com/de/fotos/grascale-photo-of-spiral-stairs-8p17jXyfIQQ 12: Investigation by Mediamodifier: https://unsplash.com/de/fotos/black-magnifying-glass-on-white-paper-yx17UuZw1Ck 13: Final Coffee by Fahmi Fakhrudin: https://unsplash.com/photos/person-making-latte-art-nzyzAUsbV0M 14: Slide design "Fedora Photography" by Liam Doherty: https://github.com/dohliam/libreoffice-impress-templates/tree/master/fedora-slideshow/fedora-photography Licenses: 1: Public Domain 2: CC Attribution 2.5 3, 4, 5, 6, 7, 8, 9, 11, 12, 13: Unsplash License 10: CC BY 2.0 DEED 14: MIT License