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
610
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
96
Kotlin Goes Global - Android Worldwide
karandhillon
0
170
Kotlin goes global
karandhillon
2
62
Other Decks in Education
See All in Education
The Blockchain Game
jscottmo
0
3.4k
0521
cbtlibrary
0
130
【株式会社コノセル】会社紹介資料
koheimiyamoto
0
4.4k
2024年度春学期 統計学 第12回 分布の平均を推測する ー 区間推定 (2024. 6. 27)
akiraasano
PRO
1
150
Qualtricsで相互作用実験する「SMARTRIQS」実践編
kscscr
0
230
英語学習から海外発表までの流れ
yasulab
18
4.1k
week7@tcue2024
nonxxxizm
0
640
【基本】Oracle Database データベース・ユーザー・セキュリティ入門
oracle4engineer
PRO
1
690
ブラウザのフタを開けてHTTP体験しよう 20240608v1.0.0
fmlorg
0
130
ポケモンで音象徴
jamashita
0
380
Droid Knights 2024 Accessibility in Android
nanamare
0
310
PSYC-560 R and R Studio Setup
jdbedics
0
490
Featured
See All Featured
Optimizing for Happiness
mojombo
375
69k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Web development in the modern age
philhawksworth
205
10k
A designer walks into a library…
pauljervisheath
201
24k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
BBQ
matthewcrist
83
9.2k
Producing Creativity
orderedlist
PRO
340
39k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
Design by the Numbers
sachag
277
19k
Happy Clients
brianwarren
96
6.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
359
19k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
354
29k
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