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
81
Other Decks in Education
See All in Education
Are puppies a ranking factor?
jonoalderson
0
810
ANS-C01_2回不合格から合格までの道程
amarelo_n24
1
240
The Art of Note Taking
kanaya
1
130
人になにかを教えるときに考えていること(2025-05版 / VRC-LT #18)
sksat
4
1k
Sponsor the Conference | VizChitra 2025
vizchitra
0
540
マネジメント「される側」 こそ覚悟を決めろ
nao_randd
10
5.3k
新卒研修に仕掛ける 学びのサイクル / Implementing Learning Cycles in New Graduate Training
takashi_toyosaki
1
140
AIC 103 - Applications of Property Valuation: Essential Slides
rmccaic
0
190
SARA Annual Report 2024-25
sara2023
1
180
2025.05.10 技術書とVoicyとわたし #RPALT
kaitou
1
210
Constructing a Custom TeX Ecosystem for Educational Institutions—Beyond Academic Typesetting
doratex
1
8.9k
モンテカルロ法(3) 発展的アルゴリズム / Simulation 04
kaityo256
PRO
6
1.3k
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
940
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.8k
For a Future-Friendly Web
brad_frost
179
9.8k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
How to Ace a Technical Interview
jacobian
277
23k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Adopting Sorbet at Scale
ufuk
77
9.4k
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