Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)

Transcript

1. Sebastian Aigner @sebi_io Compose Multiplatform: iOS, Android & Desktop Apps in 100% Kotlin @zsmb13 Márton Braun
2. Agenda • What is Compose Multiplatform • Different targets & stability • Live Demo: From 0 to 100 with CMP • Interop and adoption • Quick ecosystem overview • What's next
3. What we'll build today
4. iOS APIs CoreBluetooth, Foundation, CoreData, … Android APIs android.bluetooth, Core Libraries, Room, … iOS-specific logic Android- specific logic UIKit widgets Jetpack Compose Android views Shared business logic with Kotlin Multiplatform SwiftUI
5. iOS APIs CoreBluetooth, Foundation, CoreData, … Android APIs android.bluetooth, Core Libraries, Room, … iOS-specific logic Android- specific logic UIKit widgets Jetpack Compose Android views Shared business logic with Kotlin Multiplatform (opt.) SwiftUI
6. Compose Multiplatform jb.gg/compose
7. 1M+ users
8. iOS APIs CoreBluetooth, Foundation, CoreData, … Android APIs android.bluetooth, Core Libraries, Room, … iOS-specific logic Android- specific logic UIKit widgets Jetpack Compose Android views Shared business logic with Kotlin Multiplatform (opt.) SwiftUI
9. iOS APIs CoreBluetooth, Foundation, CoreData, … Android APIs android.bluetooth, Core Libraries, Room, … iOS-specific logic Android- specific logic UIKit widgets (opt.) Android views Shared business logic with Kotlin Multiplatform Swift UI Shared UI with Compose Multiplatform
10. Desktop JVM APIs File pickers, notifications, … Desktop- specific logic iOS APIs CoreBluetooth, Foundation, CoreData, … Android APIs android.bluetooth, Core Libraries, Room, … iOS-specific logic Android- specific logic Shared business logic with Kotlin Multiplatform Shared UI with Compose Multiplatform Android views UIKit widgets (opt.) Swift UI
11. Jetpack Compose APIs Compose Multiplatform APIs
12. Jetpack Compose APIs Compose Multiplatform APIs
14. Jetpack Compose APIs Compose Multiplatform APIs
15. Let’s see a Compose Multiplatform app in action!
16. Column Row of Buttons Scrollable Grid of Images Birds ViewModel {} JSON
17. Emulators Márton’s machine Sebastian’s machine
18. Live demo in Fleet)
19. Demo recap ✅ Used multiplatform libraries Created a new project with the KMP wizard Automatically checked development setup with Project Preflight checks Built UI in Compose Multiplatform Deployed to iOS, Android and Desktop ✅ ✅ ✅ ✅
20. Mix and match Compose view embedded in SwiftUI Floating SwiftUI TextField
21. Compose Multiplatform builds on Kotlin Multiplatform • Fully native on Android • Kotlin/Native binaries on iOS • No “magic switch” – transition takes work!
22. expect fun getPlatform(): String actual fun getPlatform(): String = "Java ${System.getProperty("java.version")}" actual fun getPlatform(): String = "iOS ${UIDevice.currentDevice.systemVersion}" actual fun getPlatform(): String = "Android ${Build.VERSION.SDK_INT}"
23. Kotlin Multiplatform libraries
25. Compose Navigation • Making Jetpack Navigation component available in common code – Popular, well-established APIs – Minimizing the work for bringing existing Android apps to multiplatform 🧪
26. Navigation Libraries
27. Compose resources 🧑🔬 • Support for – values (strings) – drawable – font – files • Typesafe accessors via Res
28. Image Loading
29. github.com/alexzhirkevich/compose-cupertino Compose Cupertino
30. Networking
31. Persistence
32. kmp-awesome
33. Backwards Compatibility Compose Multiplatform Library Jetpack Compose Consumer Compose Multiplatform Consumer
34. It’s your turn! • App developers: Go and try Compose Multiplatform on iOS, Android, Desktop and beyond! • Library developers: Support multiplatform! ❤
35. Official JetBrains sample apps jb.gg/kmp-samples
36. Get started: jb.gg/compose
37. Try Compose Multiplatform! twitter: @sebi_io @zsmb13 github: @SebastianAigner @zsmb13 [sebastian,marton]@jetbrains.com jb.gg/compose