Slide 1
Slide 1 text
Kotlin and Compose
The adventure of
Through the Multiplatform World
@cafonsomota
Slide 2
Slide 2 text
👨💻 Android GDE
đź—Ł Founder @GDGCoimbra
✍ Author @rwenderlich
đź—ş Loves travel, photography and running
🍻 Looking to taste a Sans Culottes with all of you
@cafonsomota
Slide 3
Slide 3 text
🎬 Slides
speakerdeck.com/cmota/the-adventure-of-kotlin-and-compose-through-multiplatform
đź’» Code
github.com/cmota/unsplash
đź“š Book
raywenderlich.com/books/kotlin-multiplatform-by-tutorials/v1.0
🍿 YouTube
bit.ly/cmota-youtube
Materials @cafonsomota
Slide 4
Slide 4 text
How to develop an App?
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Type
Is it a PoC?
Do you need to build an MVP?
Are you going to target more than one platforms?
Duration
What’s the project timeline?
How long is it going to take? 1yr? 5yrs? Forever?
@cafonsomota
requirements
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
Team
Team
Are you going to have a team?
Team background
Which language is your team familiar with? Do they want to learn new things?
Team size
Can you have developers focused on each platform you’re targeting?
@cafonsomota
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
Project
Constraints
Time: It hasn’t started yet, and you’re already behind schedule?
Budget: Can you hire/allocate more people?
@cafonsomota
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Platform
How many platforms are you going to target?
Android? iOS? Watch? Desktop? Web?
@cafonsomota
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
@chiziaruhoma
Slide 21
Slide 21 text
Be careful with the demo e
ff
ect!
Framework dependent
Missing features
Slower performance
Commitment to one framework
Frameworks
@cafonsomota
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
What is…
@cafonsomota
Kotlin Multiplatform
Slide 24
Slide 24 text
What is…
@cafonsomota
Kotlin Multiplatform
is an SDK
Slide 25
Slide 25 text
What is…
@cafonsomota
Kotlin Multiplatform
is an SDK
developed in Kotlin
Slide 26
Slide 26 text
What is…
@cafonsomota
Kotlin Multiplatform
is an SDK
developed in Kotlin
allows you to share your business logic
Slide 27
Slide 27 text
What is…
@cafonsomota
Kotlin Multiplatform
is an SDK
developed in Kotlin
allows you to share your business logic
you decide what to share
Slide 28
Slide 28 text
What is…
@cafonsomota
Kotlin Multiplatform
is an SDK
developed in Kotlin
allows you to share your business logic
you decide what to share
UI is developed natively (or, you can use a fw)
Slide 29
Slide 29 text
Kotlin Multiplatform
@cafonsomota
KMP
*diagram adapted from @AielloBrady
Slide 30
Slide 30 text
Kotlin Multiplatform
@cafonsomota
KMP
*diagram adapted from @AielloBrady
KMM
Native
WASM JS JVM
Slide 31
Slide 31 text
Kotlin Multiplatform
@cafonsomota
KMP
*diagram adapted from @AielloBrady
Native Linux
Windows (MinGW)
macOS
iOS
tvOS
watchOS
WASM JS JVM
KMM
Slide 32
Slide 32 text
Kotlin Multiplatform
@cafonsomota
KMP
*diagram adapted from @AielloBrady
Native
Android
WASM JS JVM
KMM
Linux
Windows (MinGW)
macOS
iOS
tvOS
watchOS
Slide 33
Slide 33 text
Kotlin Multiplatform
@cafonsomota
*Android Studio: Kotlin Multiplatform Mobile (plugin)
How to Start
Slide 34
Slide 34 text
src/commonMain/sample/Platform.kt
:shared
expect object Platform {
val name: String
}
Platform-specific code
@cafonsomota
Slide 35
Slide 35 text
src/commonMain/sample/Platform.kt
:shared
expect object Platform {
val name: String
}
You need to de
fi
ne actual per target
actual for Android
actual for Desktop
actual for JS
Platform-specific code
@cafonsomota
Slide 36
Slide 36 text
src/commonMain/sample/Platform.kt
:shared
expect object Platform {
val name: String
}
src/androidMain/sample/Platform.kt
actual object Platform {
actual val name: String = "android"
}
Platform-specific code
@cafonsomota
Slide 37
Slide 37 text
src/commonMain/sample/Platform.kt
:shared
expect object Platform {
val name: String
}
src/androidMain/sample/Platform.kt
actual object Platform {
actual val name: String = “android”
}
Platform-specific code
@cafonsomota
Slide 38
Slide 38 text
src/commonMain/sample/Platform.kt
:shared
src/androidMain/sample/Platform.kt
src/desktopMain/sample/Platform.kt
src/webMain/sample/Platform.kt
actual object Platform {
actual val name: String = “desktop”
}
actual object Platform {
actual val name: String = “web”
}
Platform-specific code
@cafonsomota
expect object Platform {
val name: String
}
actual object Platform {
actual val name: String = “android”
}
Slide 39
Slide 39 text
android iOS
Room CoreData
Retro
fi
t Alamo
fi
re
GSON/ Moshi JSONSerialization
MVP, MVVM, MVI MVVM, ELM
RxJava RxSwift
Tests Tests
Activity UIViewController
RecyclerView UITableView
web
There are a lot of
different frameworks
here… 

- redux
- Fetch
- json-api-serializer
…
Slide 40
Slide 40 text
SQLDelight
ktor
kotlinx.serialization
MVP
kotlinx.coroutines
kotlin.test
Activity View
LazyColumn LazyHStack
android iOS web
Slide 41
Slide 41 text
Powered by JetBrains
kotlinx: Coroutines, serialization, datetime, atomicfu, etc.
network: Ktor
Community
settings: github.com/russhwolf/multiplatform-settings
database: github.com/cashapp/sqldelight
dependency injection: github.com/InsertKoinIO/koin
Others
curated list: github.com/terrakok/kmm-awesome
Kotlin Multiplatform
@cafonsomota
Libraries
Slide 42
Slide 42 text
Suggestions
@cafonsomota
Kotlin Multiplatform
New Kotlin/Native Memory Model
Multi-thread Coroutines on Native (Kotlin 1.6.10+)
For iOS developers
export your libraries for iOS builds
More time to focus on building UI and creating new features
No Core Data :)
Reduce build times: generate only required frameworks
CI/DI
Each shared module on it’s own repo
Create swift package (see: cmota/unsplash repo)
Slide 43
Slide 43 text
It’s Kotlin ❤
Low risk
Decide what’s worth to share across platforms
Faster development
Consistency across platforms
One tech-stack
Strong community support
Kotlin Multiplatform
@cafonsomota
Key Takeaways
Slide 44
Slide 44 text
Apps in production
@cafonsomota
Kotlin Multiplatform
Slide 45
Slide 45 text
Apps in production
@cafonsomota
Kotlin Multiplatform
Net
fl
ix Android and iOS Studio Apps - now powered
by Kotlin Multiplatform
*net
fl
ixtechblog.com/net
fl
ix-android-and-ios-studio-apps-kotlin-multiplatform-d6d4d8d25d23
Slide 46
Slide 46 text
WANTED
For Multiplatform development
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
developer.android.com/jetpack/compose
Slide 49
Slide 49 text
Apps in production
@cafonsomota
Jetpack Compose
Slide 50
Slide 50 text
Apps in production
@cafonsomota
Jetpack Compose
Twitter going all in on Jetpack Compose for feature
development: greater productivity, less bugs
*android-developers.googleblog.com/2022/04/twitter-going-all-in-on-jetpack-compose.html
Slide 51
Slide 51 text
Apps in production
@cafonsomota
Jetpack Compose
The
fi
rst thing that stood out was how quickly I was
able to create reusable UI, and the small amount of
code that was required.
*https://www.youtube.com/watch?v=kLA1QwDjioc
Slide 52
Slide 52 text
compose.animation
compose.foundation
compose.material
compose.material3
compose.ui
compose.runtime
compose.compiler
Jetpack Compose
@cafonsomota
Slide 53
Slide 53 text
compose.animation
compose.foundation
compose.material
compose.material3
compose.ui
compose.runtime
compose.compiler
Compose Compiler
Compose Runtime
Compose UI Toolkit (Android)
Compose Animation
Compose UI
Compose Foundation
Compose Material
Jetpack Compose
Compose Material 3
Slide 54
Slide 54 text
Jetpack Compose
compose.animation
compose.foundation
compose.material
compose.material3
compose.ui
compose.runtime
compose.compiler
Compose Compiler
Compose Runtime
Compose UI Toolkit (Android)
Compose Animation
Compose UI
Compose Foundation
Compose Material
Compose Material 3
Slide 55
Slide 55 text
Written in Kotlin
Transforms @Composable into UI
Doesn’t use the Annotation Processor
The plugin works at system/code generation level
Doesn’t impact build times
Open source
Available in the AOSP
Compose Compiler
Compose Runtime
Compose UI Toolkit (Android)
Compose Animation
Compose Foundation
Compose Material
Compose Material 3
android.googlesource.com/platform/frameworks/support/+/HEAD/compose/compiler
Compose UI
Compose Compiler
Slide 56
Slide 56 text
Platform agnostic
Doesn’t know what Android or UI are
Tree management solution
Compose Compiler
Compose Runtime
Compose UI Toolkit (Android)
Compose Animation
Compose Foundation
Compose Material
Compose Material 3
Compose UI
Compose Runtime
Slide 57
Slide 57 text
compose.ui
Handles input management, Drawing, Layouts, etc.
compose.foundation
Contains Basic building: Column, Text, Image, etc.
compose.material
Material design system to use on components
compose.material3
Material design 3 system to use on components
compose.animation
Animations to use easily and out side of the box
Compose Compiler
Compose Runtime
Compose UI Toolkit (Android)
Compose Animation
Compose Foundation
Compose Material
Compose Material 3
Compose UI
Compose UI Toolkit
Slide 58
Slide 58 text
Compose UI
Web
Compose Compiler
Compose Runtime
Compose UI
Android
Compose UI
Desktop
Compose UI
Console
Compose UI
iOS
Compose
Slide 59
Slide 59 text
Suggestions
@cafonsomota
Jetpack Compose
Accompanist libraries
github.com/google/accompanist
Kotlin and Compose versions don’t go side-by-side
Be careful when updating Kotlin!
Slide 60
Slide 60 text
It’s Kotlin ❤
Low risk
Start small, and then decide what’s worth to migrate to compose
Faster development
Code reuse
Simpler to implement your apps design system
Jetpack Compose
@cafonsomota
Key Takeaways
Slide 61
Slide 61 text
WANTED
For Multiplatform development
Slide 62
Slide 62 text
How to develop a
Multiplatform App?
Slide 63
Slide 63 text
Multiplatform development
Unsplash
Native Flutter Other
Kotlin Multiplatform
Slide 64
Slide 64 text
Multiplatform development
Unsplash
Native Flutter Other
Kotlin Multiplatform
Slide 65
Slide 65 text
:androidApp
@cafonsomota
Slide 66
Slide 66 text
:androidWearApp
@cafonsomota
Slide 67
Slide 67 text
:desktopApp
@cafonsomota
Slide 68
Slide 68 text
:webApp
Slide 69
Slide 69 text
:iOSApp
@cafonsomota
microsoftedge
Masamasa3
eberhardgross
Slide 70
Slide 70 text
Multiplatform development
@cafonsomota
Unsplash
Business logic
Developed with Kotlin Multiplatform
Shared across all platforms
UI
Developed with Compose
Shared across Android and Desktop
Watch, Web and iOS also use Compose
Slide 71
Slide 71 text
Challenges
@cafonsomota
Multiplatform development
How to share everything?
Handling resources
Android uses the R class to reference images, strings, etc.
Di
ff
erent platforms use di
ff
erent components
Android: Lifecycle, Navigation, ViewModels, LiveData, etc.
Slide 72
Slide 72 text
Challenges
@cafonsomota
Multiplatform development
Kotlin Multiplatform
to the rescue!
Slide 73
Slide 73 text
Challenges
@cafonsomota
Multiplatform development
Kotlin Multiplatform
to the rescue!
create your platform-speci
fi
c implementation
Slide 74
Slide 74 text
Challenges
@cafonsomota
Multiplatform development
Kotlin Multiplatform
to the rescue!
create your platform-speci
fi
c implementation
use libraries that support Android/ Desktop
Slide 75
Slide 75 text
Challenges
@cafonsomota
Multiplatform development
Kotlin Multiplatform
to the rescue!
create your platform-speci
fi
c implementation
use libraries that support Android/ Desktop
add Multiplatform support to existing libraries
Slide 76
Slide 76 text
Accompanist libraries (by Syer10)
Set of UI libraries: github.com/Syer10/accompanist
Kamel
Async media loading library: github.com/alialbaali/Kamel
See: github.com/alialbaali/Kamel/pull/14 (support for Ktor 2.0.0)
moko-resources
Provides access to resources: github.com/icerockdev/moko-resources
PreCompose
ViewModel, LiveData, etc.: github.com/Tlaster/PreCompose
Kotlin Multiplatform
@cafonsomota
Libraries
Android Desktop
Android Desktop JS Native
Android Desktop
Android Desktop
Slide 77
Slide 77 text
Resources
Imagine that you want to show an image
@cafonsomota
Kotlin Multiplatform
SharING Image resources
Slide 78
Slide 78 text
Hello world!
Resources
Imagine that you want to show an image
Kotlin Multiplatform
SharING Image resources
Slide 79
Slide 79 text
Hello world!
Resources
Imagine that you want to show an image
Kotlin Multiplatform
SharING Image resources
Android
Image(
painterResource(id = R.drawable.kotlin),
stringResource(id = R.string.kotlin)
)
Slide 80
Slide 80 text
Hello world!
Image(
painterResource(id = R.drawable.kotlin),
stringResource(id = R.string.kotlin)
)
Resources
Imagine that you want to show an image
R class is Android speci
fi
c
How to access an image in a Desktop app?
Kotlin Multiplatform
SharING Image resources
Android
Slide 81
Slide 81 text
Hello world!
Image(
painter = painterResource(“images/kotlin.png”),
contentDescription = “Kotlin Logo”
)
Kotlin Multiplatform
SharING Image resources
Desktop
Resources
Imagine that you want to show an image
R class is Android speci
fi
c
How to access an image?
Slide 82
Slide 82 text
Resources
Imagine that you want to show an image
R class is Android speci
fi
c
How to access an image?
Implementation
shared-ui/commonMain contains the expect implementation
shared-ui/androidMain contains the xml
fi
les (vectors) and actual implementation
shared-ui/desktopMain contains the images (png’s) and actual implementation
@cafonsomota
Kotlin Multiplatform
SharING Image resources
Slide 83
Slide 83 text
@Composable
public expect fun icAbout(): Painter
shared-ui/commonMain/Icons.kt
Kotlin Multiplatform
SharING Image resources
Slide 84
Slide 84 text
@Composable
public expect fun icAbout(): Painter
shared-ui/commonMain/Icons.kt
Kotlin Multiplatform
SharING Image resources
Slide 85
Slide 85 text
shared-ui/commonMain/Icons.kt
Kotlin Multiplatform
SharING Image resources
@Composable
public actual fun icAbout() = painterResource(R.drawable.ic_about)
shared-ui/androidApp/Icons.kt
@Composable
public expect fun icAbout(): Painter
Slide 86
Slide 86 text
shared-ui/commonMain/Icons.kt
Kotlin Multiplatform
SharING Image resources
@Composable
public actual fun icAbout() = painterResource(R.drawable.ic_about)
shared-ui/androidApp/Icons.kt
@Composable
public actual fun icAbout() = painterResource("images/ic_about.png")
shared-ui/desktopApp/Icons.kt
@Composable
public expect fun icAbout(): Painter
Slide 87
Slide 87 text
@Composable
public expect fun icBrand(): Painter
@Composable
public expect fun icLauncher(): Painter
@Composable
public expect fun icMore(): Painter
@Composable
public expect fun icHome(): Painter
@Composable
public expect fun icSearch(): Painter
shared-ui/desktopApp/Icons.kt
Kotlin Multiplatform
SharING Image resources
shared-ui/commonMain/Icons.kt
Slide 88
Slide 88 text
Resources
Imagine that you want to show some text
@cafonsomota
Kotlin Multiplatform
SharING Strings
Slide 89
Slide 89 text
Hello world!
Resources
Imagine that you want to show some text
Kotlin Multiplatform
SharING Strings
Hello World 🌍
Slide 90
Slide 90 text
Hello world!
Text(
text = stringResource(id = R.string.hello_world)
)
Kotlin Multiplatform
Android
Resources
Imagine that you want to show some text
SharING Strings
Hello World 🌍
Slide 91
Slide 91 text
Hello world!
Resources
Imagine that you want to show some text
R class is Android speci
fi
c
How to access a string resource in a Desktop app?
Kotlin Multiplatform
Android
Text(
text = stringResource(id = R.string.hello_world)
)
SharING Strings
Hello World 🌍
Slide 92
Slide 92 text
Hello world!
Kotlin Multiplatform
Desktop
SharING Strings
Resources
Imagine that you want to show some text
R class is Android speci
fi
c
How to access a string resource in a Desktop app?
Text(
text = “Hello World 🌍”
)
Hello World 🌍
Slide 93
Slide 93 text
Hello world!
Kotlin Multiplatform
Desktop
SharING Strings
Resources
Imagine that you want to show some text
R class is Android speci
fi
c
How to share a string between Android and Desktop?
Text(
text = “Hello World 🌍”
)
Hello World 🌍
Slide 94
Slide 94 text
Hello world!
mako-resources
github.com/icerockdev/moko-resources
Implementation
1. resources-generator to classpath
2. strings.xml to commonMain/resources/MR.base
3. platform-speci
fi
c implementation of getString
Kotlin Multiplatform
SharING Strings
Slide 95
Slide 95 text
public expect fun getString(resId: StringResource): String
Kotlin Multiplatform
SharING Strings
shared-ui/commonMain/Resources.kt
Slide 96
Slide 96 text
Kotlin Multiplatform
SharING Strings
public expect fun getString(resId: StringResource): String
shared-ui/commonMain/Resources.kt
Slide 97
Slide 97 text
shared-ui/commonMain/Resources.kt
Kotlin Multiplatform
shared-ui/androidApp/Resources.kt
SharING Strings
actual fun getString(resId: StringResource): String {
return StringDesc.Resource(resId).toString(appContext)
}
public expect fun getString(resId: StringResource): String
Slide 98
Slide 98 text
Kotlin Multiplatform
actual fun getString(resId: StringResource): String {
return StringDesc.Resource(resId).localized()
}
shared-ui/desktopApp/Resources.kt
SharING Strings
shared-ui/commonMain/Resources.kt
actual fun getString(resId: StringResource): String {
return StringDesc.Resource(resId).toString(appContext)
}
shared-ui/androidApp/Resources.kt
public expect fun getString(resId: StringResource): String
Slide 99
Slide 99 text
Hello world!
mako-resources
github.com/icerockdev/moko-resources
Implementation
1. resources-generator to classpath
2. strings.xml to commonMain/resources/MR.base
3. platform-speci
fi
c implementation of getString
Kotlin Multiplatform
SharING Strings
Text(
text = getString(MR.strings.hello_world)
)
Hello World 🌍
Slide 100
Slide 100 text
@cafonsomota
Web
Multiplatform development
Where are we?
Slide 101
Slide 101 text
@cafonsomota
Web
Multiplatform development
Where are we?
Is in an initial stage and the paradigm is di
ff
erent
It’s focused on DOM rendering
Only a set of components are available: Box, Button, Column, Row, Slider, Text
Slide 102
Slide 102 text
Div({
style {
position(Position.Relative)
width(100.percent)
height(400.px)
flexGrow(1.0)
marginBottom(10.px)
}
}) {
Image(resource = image)
}
Web
Multiplatform development
Slide 103
Slide 103 text
@Composable
fun Column(content: @Composable ()
->
Unit) {
Div({
style {
display(DisplayStyle.Flex)
alignItems(AlignItems.Center)
flexGrow(1.0)
}
}) {
content()
}
}
webApp/components/Column.kt
Web
Multiplatform development
Slide 104
Slide 104 text
Sharing logic
Works without any issue
The generated JS
fi
le might be up to several MBs
Sharing UI
It’s going to be time consuming to share everything
You’re going to need to create several components
Most of the libraries don’t support it (yet)
@cafonsomota
Web
Multiplatform development
Slide 105
Slide 105 text
@cafonsomota
iOS
Multiplatform development
Where are we?
Slide 106
Slide 106 text
iOS
Multiplatform development
Where are we?
microsoftedge
Masamasa3
Slide 107
Slide 107 text
iOS
Multiplatform development
microsoftedge
Masamasa3
Sharing logic
Works without any issue
Don’t forget to enable the new K/N Memory Model
Sharing UI
We will get there
Slide 108
Slide 108 text
Allows you to quickly create a Desktop app
Unfortunately not everyone has an Android
More people can use and test your app
With a small cost of sharing your resources
You gain new users
You can reach more users in the Desktop market
You/Your company can sell it to a client
New platforms on it’s way to be supported
Web is giving its
fi
rst steps.
iOS seems to be almost here!
Multiplatform development
@cafonsomota
Key Takeaways
Slide 109
Slide 109 text
Key Takeaways
Slide 110
Slide 110 text
🟢 Kotlin Multiplatform Mobile is stable-ish
🟢 Compose Android is stable
🟡 Compose Desktop is stable-ish
đźź Compose Web is alpha
đź”´ Compose iOS is starting
đźź Documentation and samples
🟢 Community and support
@cafonsomota
Key Takeaways
Multiplatform development
Slide 111
Slide 111 text
Resources
Slide 112
Slide 112 text
Kotlin Slack
Kotlin Multiplatform by Tutorials
raywenderlich.com/books/kotlin-multiplatform-by-tutorials/v1.0
Kotlin by:
touchlab.co/kamp-kit-touchlab/
kmp.icerock.dev/
Kotlin 1.4 Online Event
youtu.be/pD58Dw17CLk
Resources
Kotlin Multiplatform
Slide 113
Slide 113 text
Jetpack Compose samples (Google)
github.com/android/compose-samples
A curated list of Jetpack Compose resources
github.com/jetpack-compose/jetpack-compose-awesome
foso.github.io/Jetpack-Compose-Playground/
Community
twitch.tv/intelligibabble


jetpackcompose.app
joebirch.co/tag/jetpack-compose/
jorgecastillo.dev/
Resources
Compose
Slide 114
Slide 114 text
Questions and Answers
Slide 115
Slide 115 text
WANTED
For Multiplatform development
The Adventure of Kotlin and Compose
Through the Multiplatform World
@cafonsomota
Slide 116
Slide 116 text
WANTED
For Multiplatform development
The Adventure of Kotlin and Compose
Through the Multiplatform World
@cafonsomota