Upgrade to Pro — share decks privately, control downloads, hide ads and more …

KMM with jetpack compose and SwiftUI

KMM with jetpack compose and SwiftUI

978db08a6b77ea29844646b14066f149?s=128

Karan Dhillon

May 12, 2021
Tweet

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") }

  5. None
  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
  42. None
  43. None
  44. None
  45. None
  46. None
  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  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