Tweet
Tweet

Slide 1

Slide 1 text

Sebastian Aigner @sebi_io Compose Multiplatform: iOS, Android & Desktop Apps in 100% Kotlin @zsmb13 Márton Braun

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

What we'll build today

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Compose Multiplatform jb.gg/compose

Slide 7

Slide 7 text

1M+ users

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Jetpack Compose APIs Compose Multiplatform APIs

Slide 12

Slide 12 text

Jetpack Compose APIs Compose Multiplatform APIs

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Jetpack Compose APIs Compose Multiplatform APIs

Slide 15

Slide 15 text

Let’s see a Compose Multiplatform app in action!

Slide 16

Slide 16 text

Column Row of Buttons Scrollable Grid of Images Birds ViewModel {} JSON

Slide 17

Slide 17 text

Emulators Márton’s machine Sebastian’s machine

Slide 18

Slide 18 text

Live demo in Fleet)

Slide 19

Slide 19 text

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 ✅ ✅ ✅ ✅

Slide 20

Slide 20 text

Mix and match Compose view embedded in SwiftUI Floating SwiftUI TextField

Slide 21

Slide 21 text

Compose Multiplatform builds on Kotlin Multiplatform • Fully native on Android • Kotlin/Native binaries on iOS • No “magic switch” – transition takes work!

Slide 22

Slide 22 text

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}"

Slide 23

Slide 23 text

Kotlin Multiplatform libraries

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Compose Navigation • Making Jetpack Navigation component available in common code – Popular, well-established APIs – Minimizing the work for bringing existing Android apps to multiplatform 🧪

Slide 26

Slide 26 text

Navigation Libraries

Slide 27

Slide 27 text

Compose resources 🧑🔬 • Support for – values (strings) – drawable – font – files • Typesafe accessors via Res

Slide 28

Slide 28 text

Image Loading

Slide 29

Slide 29 text

github.com/alexzhirkevich/compose-cupertino Compose Cupertino

Slide 30

Slide 30 text

Networking

Slide 31

Slide 31 text

Persistence

Slide 32

Slide 32 text

kmp-awesome

Slide 33

Slide 33 text

Backwards Compatibility Compose Multiplatform Library Jetpack Compose Consumer Compose Multiplatform Consumer

Slide 34

Slide 34 text

It’s your turn! • App developers: Go and try Compose Multiplatform on iOS, Android, Desktop and beyond! • Library developers: Support multiplatform! ❤

Slide 35

Slide 35 text

Official JetBrains sample apps jb.gg/kmp-samples

Slide 36

Slide 36 text

Get started: jb.gg/compose

Slide 37

Slide 37 text

Try Compose Multiplatform! twitter: @sebi_io @zsmb13 github: @SebastianAigner @zsmb13 [sebastian,marton]@jetbrains.com jb.gg/compose