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
640
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
110
Kotlin Goes Global - Android Worldwide
karandhillon
0
180
Kotlin goes global
karandhillon
2
70
Other Decks in Education
See All in Education
MySmartSTEAM2425
cbtlibrary
0
110
中野区ミライ★ライター倶楽部presents『MINT』
nakamuramikumirai
0
620
COO's Perspective : Code for Everyone 2020-2024
codeforeveryone
0
260
ワクワク発見資料
akenohoshi
0
170
Казармы и гарнизоны
pnuslide
0
170
付箋を使ったカラオケでワイワイしましょう / Scrum Fest Okinawa 2024
bonbon0605
0
140
BrightonSEO, San Diego, CA 2024
mchowning
0
120
Informasi Program Coding Camp 2025 powered by DBS Foundation
codingcamp2025
0
150
Ch4_-_Cours_2.pdf
bernhardsvt
0
130
ニュースメディアにおける生成 AI の活用と開発 / UTokyo Lecture Business Introduction
upura
0
230
(説明資料)オンラインゆっくり相談室
ytapples613
PRO
0
120
AWS Well-Architected Labを活用してつよつよAWSエンジニアになろう!!! #jawsug_tokyo
masakiokuda
0
300
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Gamification - CAS2011
davidbonilla
80
5.1k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
The Language of Interfaces
destraynor
156
24k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Automating Front-end Workflow
addyosmani
1367
200k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
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