Compose Multiplatform

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

Transcript

1. Wolfram Rittmeyer Photo by Romain Guy Compose Multiplatform
2. 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
4. https://kotlinlang.org/docs/multiplatform.html
5. Which platforms  Desktop  Android  iOS (beta - well: kind of)  Web (not even in alpha)  Backend
6. https://blog.jetbrains.com/kotlin/2023/05/compose-multiplatform-for-ios-is-in-alpha/
7. https://kotlinlang.org/docs/multiplatform-discover-project.html#compilation-to-a-specific-target
11. Lists of KMP libraries https://github.com/terrakok/kmp-awesome https://github.com/AAkira/Kotlin-Multiplatform-Libraries
14. https://kotlinlang.org/docs/multiplatform-discover-project.html
15. :iosApp:iosApp.swift
16. :composeApp:iosMain:main.kt
17. :composeApp:androidMain:App.android.kt
18. :composeApp:jvmMain:Main.kt
19. expect / actual  Declaration using expect  Implementation using actual
20. 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
23. 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
27. 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
30. 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
31. 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
35. Modularization  Hard to find samples  Good one: TiVi by Chris Banes  Will dig into this some more myself – And provide a repo eventually
37. 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)
38. 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
39. 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
40. 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
42. Resources  unify resources like – images • vector and bitmap images – strings – files – fonts
43. Resources  follows Android folder conventions – e.g. values-ro for Romanian resources
44. Resources  follows Android folder conventions – e.g. values-ro for Romanian resources  since Compose MP 1.6
48. Testing  UI Testing since Compose MP 1.6  Work the same way as in Android
49. Testing  UI Testing since Compose MP 1.6  Work the same way as in Android  Separating UI testing and logic cumbersome
50. www.wolfram- www.wolfram- rittmeyer.de rittmeyer.de
51. Tooling  A throwback to Compose initial days on Android  Still a bit flaky and susceptible to errors  No UI editor
52. Tooling  You can create previews – But only in Fleet  LayoutInspector works nicely  Also App Inspection – Database Inspector – Network Inspector
54. Configuration  You do not have variants
55. Configuration  You do not have variants  But you can still use some gradle things to help you
56. Configuration  BuildConfig https://github.com/gmazzo/gradle-buildconfig-plugin
59. Configuration  BuildKonfig https://github.com/yshrsmz/BuildKonfig  Seems to be more powerful
60. 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
61. 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
62. Configuration  So with BuildConfig and DI you can do variants yourself
63. Configuration  So with BuildConfig and DI you can do variants yourself  Use Interfaces  Inject proper Class depending on variant
64. 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
65. https://kotlinlang.org/docs/multiplatform.html#kotlin-multiplatform-use-cases
66. KMP rules  The only proper alternative for – Sharing logic on iOS and Android – While keeping the UI native
67. 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
68. But what about Compose?
69. 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
70. 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
71. https://flic.kr/p/cXWo83 by Tsahi Levent-Levi
73. 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
74. 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
75. 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
76. 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
77. Google  At Google I/O 24 Google went all in with KMP  Documentation  Libraries  And more of their own apps using it
78. https://developer.android.com/kotlin/multiplatform
79. https://developer.android.com/kotlin/multiplatform
80. www.wolfram- www.wolfram- rittmeyer.de rittmeyer.de @Rittmeye @Rittmeye
81. Left open  Testing
82. Left open  Testing (e.g. Kotest)
83. Left open  Testing (e.g. Kotest)  Using SwiftUI for certain aspects
84. Left open  Testing (e.g. Kotest)  Using SwiftUI for certain aspects (e.g. navigation)  Integration of Compose MP in an KMP app
85. 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
86. 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
87. 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
88. https://developer.android.com/jetpack/compose (nowadays a tad different)
89. 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
90. 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