Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
KMM with jetpack compose and SwiftUI
Search
Karan Dhillon
May 12, 2021
Education
1
680
KMM with jetpack compose and SwiftUI
Karan Dhillon
May 12, 2021
Tweet
Share
More Decks by Karan Dhillon
See All by Karan Dhillon
Jetpack compose for beginners
karandhillon
1
130
Kotlin Goes Global - Android Worldwide
karandhillon
0
200
Kotlin goes global
karandhillon
2
85
Other Decks in Education
See All in Education
Data Management and Analytics Specialisation
signer
PRO
0
1.4k
GitHubとAzureを使って開発者になろう
ymd65536
1
160
チーム開発における責任と感謝の話
ssk1991
0
120
演習問題
takenawa
0
14k
サンキッズゾーン 春日井駅前 ご案内
sanyohomes
0
760
学習効果が高いフィードバックの仕方(ルース・バトラーの実験)
hysmrk
4
140
2025.05.10 技術書とVoicyとわたし #RPALT
kaitou
1
250
万博非公式マップとFOSS4G
barsaka2
0
850
生成AIとの上手な付き合い方【公開版】/ How to Get Along Well with Generative AI (Public Version)
handlename
0
590
日本の情報系社会人院生のリアル -JAIST 修士編-
yurikomium
1
110
[FUN Open Campus 2025] 何でもセンシングしていいですか?
pman0214
0
230
2025年度春学期 統計学 第8回 演習(1) 問題に対する答案の書き方(講義前配付用) (2025. 5. 29)
akiraasano
PRO
0
130
Featured
See All Featured
The Invisible Side of Design
smashingmag
301
51k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Visualization
eitanlees
146
16k
How to Ace a Technical Interview
jacobian
279
23k
Agile that works and the tools we love
rasmusluckow
329
21k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.4k
A designer walks into a library…
pauljervisheath
207
24k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Transcript
Karan Dhillon, 12 May 2021 KMM with Jetpack Compose and
Swift UI Build declarative UIs with maximum code sharing
Issue with KMM plugin on AS 4.2
dependencies { classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.0-release-764") classpath("com.android.tools.build:gradle:4.2.0") }
dependencies { classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.0") classpath("com.android.tools.build:gradle:4.2.0") }
None
Meet the new kids on the block
• KMM - Kotlin Multiplatform Mobile • Jetpack Compose -
Android’s modern toolkit for building native UI • SwiftUI - UI toolkit by Apple to design apps in a declarative manner
KMM - KMP, but more emphasis on mobile
Important bits A Kotlin Mobile Multiplatform project consists of three
components: • Shared module • Android application • iOS application
Shared module (buildscript)
Shared module (buildscript)
Shared module (buildscript)
Shared module (buildscript)
Shared module (buildscript)
Shared module (buildscript)
Shared module (buildscript)
Shared module (buildscript)
Shared module (buildscript)
Shared module (buildscript)
Shared module (buildscript)
Meet the project
Meet the project
Shared module (buildscript) Root module (buildscript)
Shared module (buildscript) Root module (buildscript)
Shared module (buildscript) Root module (buildscript)
Shared module (buildscript) Root module (buildscript)
Shared module (buildscript) Root module (buildscript)
Shared module (buildscript) Root module (buildscript)
Shared module (buildscript) Root module (buildscript)
Shared module (buildscript) Root module (buildscript)
Shared module (buildscript) Root module (buildscript)
Shared module (buildscript) Root module (buildscript)
Shared module (buildscript) Root module (buildscript)
Shared module (buildscript) Root module (buildscript)
Shared module (buildscript) Root module (buildscript)
Shared module (buildscript) Root module (buildscript)
Shared module (buildscript) Root module (buildscript)
Shared module (buildscript) Root module (buildscript)
Shared module (buildscript) Root module (buildscript)
Goal : create a facade over networking and cache service
Goal : create a facade over networking and cache service
First, lets take care of networking
None
None
None
None
None
None
None
None
None
None
None
Now, we create the cache service
Shared module (buildscript)
Shared module (buildscript)
Shared module (buildscript)
Shared module (buildscript)
Shared module (buildscript)
By default, SQLDelight plugin reads .sq files from the sqldelight
folder We create the package specified in the packageName parameter Inside it, we create the .sq file with the name of our database
AppDatabase.sq
AppDatabase.sq
AppDatabase.sq
AppDatabase.sq
AppDatabase.sq
To initialize AppDatabase, we needs to pass an SqlDriver instance
to it
DatabaseDriverFactory (commonMain)
DatabaseDriverFactory (commonMain)
DatabaseDriverFactory (commonMain)
DatabaseDriverFactory (androidMain)
DatabaseDriverFactory (androidMain)
DatabaseDriverFactory (androidMain)
DatabaseDriverFactory (androidMain)
DatabaseDriverFactory (androidMain)
DatabaseDriverFactory (androidMain)
DatabaseDriverFactory (iosMain)
DatabaseDriverFactory (iosMain)
DatabaseDriverFactory (iosMain)
DatabaseDriverFactory (iosMain)
DatabaseDriverFactory (iosMain)
Now that we have a SqlDriverFactory, we can proceed with
initializing AppDatabase
Database (commonMain)
Database (commonMain)
Database (commonMain)
Database (commonMain)
Database (commonMain)
Database (commonMain)
Database (commonMain)
Database (commonMain)
Database (commonMain)
Database (commonMain)
With networking and cache service done, we can finally create
our facade
SpaceXSDK (commonMain)
SpaceXSDK (commonMain)
SpaceXSDK (commonMain)
SpaceXSDK (commonMain)
SpaceXSDK (commonMain)
SpaceXSDK (commonMain)
SpaceXSDK (commonMain)
SpaceXSDK (commonMain)
SpaceXSDK (commonMain)
SpaceXSDK (commonMain)
SpaceXSDK (commonMain)
SpaceXSDK (commonMain)
Time for jetpack compose
build.gradle.kts (androidApp)
build.gradle.kts (androidApp)
build.gradle.kts (androidApp)
build.gradle.kts (androidApp)
build.gradle.kts (androidApp)
build.gradle.kts (androidApp)
build.gradle.kts (androidApp)
MainActivity (androidApp)
MainActivity (androidApp)
MainActivity (androidApp)
MainActivity (androidApp)
MainActivity (androidApp)
MainActivity (androidApp)
MainActivity (androidApp)
MainActivity (androidApp)
Building with SwiftUI
RocketLaunchRow.swift (iosApp)
RocketLaunchRow.swift (iosApp)
RocketLaunchRow.swift (iosApp)
RocketLaunchRow.swift (iosApp)
RocketLaunchRow.swift (iosApp)
RocketLaunchRow.swift (iosApp)
Pros (and Cons?)
Pros (and Cons?) • Maximum code sharing • Expect/Actual pattern
• Concurrency in Kotlin/Native • Single framework for shared module
Contact • Twitter: @karandhillon95 • Blog: https://kdhillon.com