KMM with jetpack compose and SwiftUI

Transcript

1. Karan Dhillon, 12 May 2021 KMM with Jetpack Compose and Swift UI Build declarative UIs with maximum code sharing
2. Issue with KMM plugin on AS 4.2
3. dependencies { classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.0-release-764") classpath("com.android.tools.build:gradle:4.2.0") }
4. dependencies { classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.0") classpath("com.android.tools.build:gradle:4.2.0") }
6. Meet the new kids on the block
7. • 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
8. KMM - KMP, but more emphasis on mobile
9. Important bits A Kotlin Mobile Multiplatform project consists of three components: • Shared module • Android application • iOS application
10. Shared module (buildscript)
11. Shared module (buildscript)
12. Shared module (buildscript)
13. Shared module (buildscript)
14. Shared module (buildscript)
15. Shared module (buildscript)
16. Shared module (buildscript)
17. Shared module (buildscript)
18. Shared module (buildscript)
19. Shared module (buildscript)
20. Shared module (buildscript)
21. Meet the project
22. Meet the project
23. Shared module (buildscript) Root module (buildscript)
24. Shared module (buildscript) Root module (buildscript)
25. Shared module (buildscript) Root module (buildscript)
26. Shared module (buildscript) Root module (buildscript)
27. Shared module (buildscript) Root module (buildscript)
28. Shared module (buildscript) Root module (buildscript)
29. Shared module (buildscript) Root module (buildscript)
30. Shared module (buildscript) Root module (buildscript)
31. Shared module (buildscript) Root module (buildscript)
32. Shared module (buildscript) Root module (buildscript)
33. Shared module (buildscript) Root module (buildscript)
34. Shared module (buildscript) Root module (buildscript)
35. Shared module (buildscript) Root module (buildscript)
36. Shared module (buildscript) Root module (buildscript)
37. Shared module (buildscript) Root module (buildscript)
38. Shared module (buildscript) Root module (buildscript)
39. Shared module (buildscript) Root module (buildscript)
40. Goal : create a facade over networking and cache service
41. Goal : create a facade over networking and cache service First, lets take care of networking
53. Now, we create the cache service
54. Shared module (buildscript)
55. Shared module (buildscript)
56. Shared module (buildscript)
57. Shared module (buildscript)
58. Shared module (buildscript)
59. 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
60. AppDatabase.sq
61. AppDatabase.sq
62. AppDatabase.sq
63. AppDatabase.sq
64. AppDatabase.sq
65. To initialize AppDatabase, we needs to pass an SqlDriver instance to it
66. DatabaseDriverFactory (commonMain)
67. DatabaseDriverFactory (commonMain)
68. DatabaseDriverFactory (commonMain)
69. DatabaseDriverFactory (androidMain)
70. DatabaseDriverFactory (androidMain)
71. DatabaseDriverFactory (androidMain)
72. DatabaseDriverFactory (androidMain)
73. DatabaseDriverFactory (androidMain)
74. DatabaseDriverFactory (androidMain)
75. DatabaseDriverFactory (iosMain)
76. DatabaseDriverFactory (iosMain)
77. DatabaseDriverFactory (iosMain)
78. DatabaseDriverFactory (iosMain)
79. DatabaseDriverFactory (iosMain)
80. Now that we have a SqlDriverFactory, we can proceed with initializing AppDatabase
81. Database (commonMain)
82. Database (commonMain)
83. Database (commonMain)
84. Database (commonMain)
85. Database (commonMain)
86. Database (commonMain)
87. Database (commonMain)
88. Database (commonMain)
89. Database (commonMain)
90. Database (commonMain)
91. With networking and cache service done, we can finally create our facade
92. SpaceXSDK (commonMain)
93. SpaceXSDK (commonMain)
94. SpaceXSDK (commonMain)
95. SpaceXSDK (commonMain)
96. SpaceXSDK (commonMain)
97. SpaceXSDK (commonMain)
98. SpaceXSDK (commonMain)
99. SpaceXSDK (commonMain)
100. SpaceXSDK (commonMain)
101. SpaceXSDK (commonMain)
102. SpaceXSDK (commonMain)
103. SpaceXSDK (commonMain)
104. Time for jetpack compose
105. build.gradle.kts (androidApp)
106. build.gradle.kts (androidApp)
107. build.gradle.kts (androidApp)
108. build.gradle.kts (androidApp)
109. build.gradle.kts (androidApp)
110. build.gradle.kts (androidApp)
111. build.gradle.kts (androidApp)
112. MainActivity (androidApp)
113. MainActivity (androidApp)
114. MainActivity (androidApp)
115. MainActivity (androidApp)
116. MainActivity (androidApp)
117. MainActivity (androidApp)
118. MainActivity (androidApp)
119. MainActivity (androidApp)
120. Building with SwiftUI
121. RocketLaunchRow.swift (iosApp)
122. RocketLaunchRow.swift (iosApp)
123. RocketLaunchRow.swift (iosApp)
124. RocketLaunchRow.swift (iosApp)
125. RocketLaunchRow.swift (iosApp)
126. RocketLaunchRow.swift (iosApp)
127. Pros (and Cons?)
128. Pros (and Cons?) • Maximum code sharing • Expect/Actual pattern • Concurrency in Kotlin/Native • Single framework for shared module
129. Contact • Twitter: @karandhillon95 • Blog: https://kdhillon.com