Slide 1

Slide 1 text

Karan Dhillon, 12 May 2021 KMM with Jetpack Compose and Swift UI Build declarative UIs with maximum code sharing

Slide 2

Slide 2 text

Issue with KMM plugin on AS 4.2

Slide 3

Slide 3 text

dependencies { classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.0-release-764") classpath("com.android.tools.build:gradle:4.2.0") }

Slide 4

Slide 4 text

dependencies { classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.0") classpath("com.android.tools.build:gradle:4.2.0") }

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Meet the new kids on the block

Slide 7

Slide 7 text

• 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

Slide 8

Slide 8 text

KMM - KMP, but more emphasis on mobile

Slide 9

Slide 9 text

Important bits A Kotlin Mobile Multiplatform project consists of three components: • Shared module • Android application • iOS application

Slide 10

Slide 10 text

Shared module (buildscript)

Slide 11

Slide 11 text

Shared module (buildscript)

Slide 12

Slide 12 text

Shared module (buildscript)

Slide 13

Slide 13 text

Shared module (buildscript)

Slide 14

Slide 14 text

Shared module (buildscript)

Slide 15

Slide 15 text

Shared module (buildscript)

Slide 16

Slide 16 text

Shared module (buildscript)

Slide 17

Slide 17 text

Shared module (buildscript)

Slide 18

Slide 18 text

Shared module (buildscript)

Slide 19

Slide 19 text

Shared module (buildscript)

Slide 20

Slide 20 text

Shared module (buildscript)

Slide 21

Slide 21 text

Meet the project

Slide 22

Slide 22 text

Meet the project

Slide 23

Slide 23 text

Shared module (buildscript) Root module (buildscript)

Slide 24

Slide 24 text

Shared module (buildscript) Root module (buildscript)

Slide 25

Slide 25 text

Shared module (buildscript) Root module (buildscript)

Slide 26

Slide 26 text

Shared module (buildscript) Root module (buildscript)

Slide 27

Slide 27 text

Shared module (buildscript) Root module (buildscript)

Slide 28

Slide 28 text

Shared module (buildscript) Root module (buildscript)

Slide 29

Slide 29 text

Shared module (buildscript) Root module (buildscript)

Slide 30

Slide 30 text

Shared module (buildscript) Root module (buildscript)

Slide 31

Slide 31 text

Shared module (buildscript) Root module (buildscript)

Slide 32

Slide 32 text

Shared module (buildscript) Root module (buildscript)

Slide 33

Slide 33 text

Shared module (buildscript) Root module (buildscript)

Slide 34

Slide 34 text

Shared module (buildscript) Root module (buildscript)

Slide 35

Slide 35 text

Shared module (buildscript) Root module (buildscript)

Slide 36

Slide 36 text

Shared module (buildscript) Root module (buildscript)

Slide 37

Slide 37 text

Shared module (buildscript) Root module (buildscript)

Slide 38

Slide 38 text

Shared module (buildscript) Root module (buildscript)

Slide 39

Slide 39 text

Shared module (buildscript) Root module (buildscript)

Slide 40

Slide 40 text

Goal : create a facade over networking and cache service

Slide 41

Slide 41 text

Goal : create a facade over networking and cache service First, lets take care of networking

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

Now, we create the cache service

Slide 54

Slide 54 text

Shared module (buildscript)

Slide 55

Slide 55 text

Shared module (buildscript)

Slide 56

Slide 56 text

Shared module (buildscript)

Slide 57

Slide 57 text

Shared module (buildscript)

Slide 58

Slide 58 text

Shared module (buildscript)

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

AppDatabase.sq

Slide 61

Slide 61 text

AppDatabase.sq

Slide 62

Slide 62 text

AppDatabase.sq

Slide 63

Slide 63 text

AppDatabase.sq

Slide 64

Slide 64 text

AppDatabase.sq

Slide 65

Slide 65 text

To initialize AppDatabase, we needs to pass an SqlDriver instance to it

Slide 66

Slide 66 text

DatabaseDriverFactory (commonMain)

Slide 67

Slide 67 text

DatabaseDriverFactory (commonMain)

Slide 68

Slide 68 text

DatabaseDriverFactory (commonMain)

Slide 69

Slide 69 text

DatabaseDriverFactory (androidMain)

Slide 70

Slide 70 text

DatabaseDriverFactory (androidMain)

Slide 71

Slide 71 text

DatabaseDriverFactory (androidMain)

Slide 72

Slide 72 text

DatabaseDriverFactory (androidMain)

Slide 73

Slide 73 text

DatabaseDriverFactory (androidMain)

Slide 74

Slide 74 text

DatabaseDriverFactory (androidMain)

Slide 75

Slide 75 text

DatabaseDriverFactory (iosMain)

Slide 76

Slide 76 text

DatabaseDriverFactory (iosMain)

Slide 77

Slide 77 text

DatabaseDriverFactory (iosMain)

Slide 78

Slide 78 text

DatabaseDriverFactory (iosMain)

Slide 79

Slide 79 text

DatabaseDriverFactory (iosMain)

Slide 80

Slide 80 text

Now that we have a SqlDriverFactory, we can proceed with initializing AppDatabase

Slide 81

Slide 81 text

Database (commonMain)

Slide 82

Slide 82 text

Database (commonMain)

Slide 83

Slide 83 text

Database (commonMain)

Slide 84

Slide 84 text

Database (commonMain)

Slide 85

Slide 85 text

Database (commonMain)

Slide 86

Slide 86 text

Database (commonMain)

Slide 87

Slide 87 text

Database (commonMain)

Slide 88

Slide 88 text

Database (commonMain)

Slide 89

Slide 89 text

Database (commonMain)

Slide 90

Slide 90 text

Database (commonMain)

Slide 91

Slide 91 text

With networking and cache service done, we can finally create our facade

Slide 92

Slide 92 text

SpaceXSDK (commonMain)

Slide 93

Slide 93 text

SpaceXSDK (commonMain)

Slide 94

Slide 94 text

SpaceXSDK (commonMain)

Slide 95

Slide 95 text

SpaceXSDK (commonMain)

Slide 96

Slide 96 text

SpaceXSDK (commonMain)

Slide 97

Slide 97 text

SpaceXSDK (commonMain)

Slide 98

Slide 98 text

SpaceXSDK (commonMain)

Slide 99

Slide 99 text

SpaceXSDK (commonMain)

Slide 100

Slide 100 text

SpaceXSDK (commonMain)

Slide 101

Slide 101 text

SpaceXSDK (commonMain)

Slide 102

Slide 102 text

SpaceXSDK (commonMain)

Slide 103

Slide 103 text

SpaceXSDK (commonMain)

Slide 104

Slide 104 text

Time for jetpack compose

Slide 105

Slide 105 text

build.gradle.kts (androidApp)

Slide 106

Slide 106 text

build.gradle.kts (androidApp)

Slide 107

Slide 107 text

build.gradle.kts (androidApp)

Slide 108

Slide 108 text

build.gradle.kts (androidApp)

Slide 109

Slide 109 text

build.gradle.kts (androidApp)

Slide 110

Slide 110 text

build.gradle.kts (androidApp)

Slide 111

Slide 111 text

build.gradle.kts (androidApp)

Slide 112

Slide 112 text

MainActivity (androidApp)

Slide 113

Slide 113 text

MainActivity (androidApp)

Slide 114

Slide 114 text

MainActivity (androidApp)

Slide 115

Slide 115 text

MainActivity (androidApp)

Slide 116

Slide 116 text

MainActivity (androidApp)

Slide 117

Slide 117 text

MainActivity (androidApp)

Slide 118

Slide 118 text

MainActivity (androidApp)

Slide 119

Slide 119 text

MainActivity (androidApp)

Slide 120

Slide 120 text

Building with SwiftUI

Slide 121

Slide 121 text

RocketLaunchRow.swift (iosApp)

Slide 122

Slide 122 text

RocketLaunchRow.swift (iosApp)

Slide 123

Slide 123 text

RocketLaunchRow.swift (iosApp)

Slide 124

Slide 124 text

RocketLaunchRow.swift (iosApp)

Slide 125

Slide 125 text

RocketLaunchRow.swift (iosApp)

Slide 126

Slide 126 text

RocketLaunchRow.swift (iosApp)

Slide 127

Slide 127 text

Pros (and Cons?)

Slide 128

Slide 128 text

Pros (and Cons?) • Maximum code sharing • Expect/Actual pattern • Concurrency in Kotlin/Native • Single framework for shared module

Slide 129

Slide 129 text

Contact • Twitter: @karandhillon95 • Blog: https://kdhillon.com