Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Compose Multiplatform

Compose Multiplatform

Talk held at F/ND about Kotlin and Compose Multiplatform with focus on Compose multiplatform.

Wolfram Rittmeyer

May 18, 2024
Tweet

More Decks by Wolfram Rittmeyer

Other Decks in Programming

Transcript

  1. 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
  2. Which platforms  Desktop  Android  iOS (beta -

    well: kind of)  Web (not even in alpha)  Backend
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. Modularization  Hard to find samples  Good one: TiVi

    by Chris Banes  Will dig into this some more myself – And provide a repo eventually
  9. 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)
  10. 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
  11. 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
  12. 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
  13. Resources  unify resources like – images • vector and

    bitmap images – strings – files – fonts
  14. Testing  UI Testing since Compose MP 1.6  Work

    the same way as in Android  Separating UI testing and logic cumbersome
  15. Tooling  A throwback to Compose initial days on Android

     Still a bit flaky and susceptible to errors  No UI editor
  16. Tooling  You can create previews – But only in

    Fleet  LayoutInspector works nicely  Also App Inspection – Database Inspector – Network Inspector
  17. Configuration  You do not have variants  But you

    can still use some gradle things to help you
  18. 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
  19. 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
  20. Configuration  So with BuildConfig and DI you can do

    variants yourself  Use Interfaces  Inject proper Class depending on variant
  21. 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
  22. KMP rules  The only proper alternative for – Sharing

    logic on iOS and Android – While keeping the UI native
  23. 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
  24. 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
  25. 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
  26. 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
  27. 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
  28. 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
  29. 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
  30. Google  At Google I/O 24 Google went all in

    with KMP  Documentation  Libraries  And more of their own apps using it
  31. Left open  Testing (e.g. Kotest)  Using SwiftUI for

    certain aspects (e.g. navigation)  Integration of Compose MP in an KMP app
  32. 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
  33. 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
  34. 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
  35. 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