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
670
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
120
Kotlin Goes Global - Android Worldwide
karandhillon
0
190
Kotlin goes global
karandhillon
2
76
Other Decks in Education
See All in Education
JOAI2025講評 / joai2025-review
upura
0
120
OJTに夢を見すぎていませんか? ロールプレイ研修の試行錯誤/tryanderror-in-roleplaying-training
takipone
1
130
生成AIとの上手な付き合い方【公開版】/ How to Get Along Well with Generative AI (Public Version)
handlename
0
440
SkimaTalk Tutorial for Students
skimatalk
0
1.7k
Info Session MSc Computer Science & MSc Applied Informatics
signer
PRO
0
180
生成AI
takenawa
0
1.8k
Sponsor the Conference | VizChitra 2025
vizchitra
0
420
2025年度春学期 統計学 第3回 クロス集計と感度・特異度,データの可視化 (2025. 4. 24)
akiraasano
PRO
0
110
女子商アプリ開発の軌跡
asial_edu
0
390
Gesture-based Interaction - Lecture 6 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.7k
Implicit and Cross-Device Interaction - Lecture 10 - Next Generation User Interfaces (4018166FNR)
signer
PRO
2
1.7k
America and the World
oripsolob
0
500
Featured
See All Featured
Speed Design
sergeychernyshev
30
980
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
6
680
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Facilitating Awesome Meetings
lara
54
6.4k
Into the Great Unknown - MozCon
thekraken
39
1.8k
A Tale of Four Properties
chriscoyier
159
23k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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