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

KMM with jetpack compose and SwiftUI

KMM with jetpack compose and SwiftUI

Karan Dhillon

May 12, 2021
Tweet

More Decks by Karan Dhillon

Other Decks in Education

Transcript

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

    View Slide

  2. Issue with KMM plugin on AS 4.2

    View Slide

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

    View Slide

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

    View Slide

  5. View Slide

  6. Meet the new kids on the block

    View Slide

  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

    View Slide

  8. KMM - KMP, but more emphasis
    on mobile

    View Slide

  9. Important bits
    A Kotlin Mobile Multiplatform project consists of three components:
    • Shared module

    • Android application

    • iOS application

    View Slide

  10. Shared module (buildscript)

    View Slide

  11. Shared module (buildscript)

    View Slide

  12. Shared module (buildscript)

    View Slide

  13. Shared module (buildscript)

    View Slide

  14. Shared module (buildscript)

    View Slide

  15. Shared module (buildscript)

    View Slide

  16. Shared module (buildscript)

    View Slide

  17. Shared module (buildscript)

    View Slide

  18. Shared module (buildscript)

    View Slide

  19. Shared module (buildscript)

    View Slide

  20. Shared module (buildscript)

    View Slide

  21. Meet the project

    View Slide

  22. Meet the project

    View Slide

  23. Shared module (buildscript) Root module (buildscript)

    View Slide

  24. Shared module (buildscript) Root module (buildscript)

    View Slide

  25. Shared module (buildscript) Root module (buildscript)

    View Slide

  26. Shared module (buildscript) Root module (buildscript)

    View Slide

  27. Shared module (buildscript) Root module (buildscript)

    View Slide

  28. Shared module (buildscript) Root module (buildscript)

    View Slide

  29. Shared module (buildscript) Root module (buildscript)

    View Slide

  30. Shared module (buildscript) Root module (buildscript)

    View Slide

  31. Shared module (buildscript) Root module (buildscript)

    View Slide

  32. Shared module (buildscript) Root module (buildscript)

    View Slide

  33. Shared module (buildscript) Root module (buildscript)

    View Slide

  34. Shared module (buildscript) Root module (buildscript)

    View Slide

  35. Shared module (buildscript) Root module (buildscript)

    View Slide

  36. Shared module (buildscript) Root module (buildscript)

    View Slide

  37. Shared module (buildscript) Root module (buildscript)

    View Slide

  38. Shared module (buildscript) Root module (buildscript)

    View Slide

  39. Shared module (buildscript) Root module (buildscript)

    View Slide

  40. Goal : create a facade over networking and
    cache service

    View Slide

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

    View Slide

  42. View Slide

  43. View Slide

  44. View Slide

  45. View Slide

  46. View Slide

  47. View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. Now, we create the cache service

    View Slide

  54. Shared module (buildscript)

    View Slide

  55. Shared module (buildscript)

    View Slide

  56. Shared module (buildscript)

    View Slide

  57. Shared module (buildscript)

    View Slide

  58. Shared module (buildscript)

    View Slide

  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

    View Slide

  60. AppDatabase.sq

    View Slide

  61. AppDatabase.sq

    View Slide

  62. AppDatabase.sq

    View Slide

  63. AppDatabase.sq

    View Slide

  64. AppDatabase.sq

    View Slide

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

    View Slide

  66. DatabaseDriverFactory (commonMain)

    View Slide

  67. DatabaseDriverFactory (commonMain)

    View Slide

  68. DatabaseDriverFactory (commonMain)

    View Slide

  69. DatabaseDriverFactory (androidMain)

    View Slide

  70. DatabaseDriverFactory (androidMain)

    View Slide

  71. DatabaseDriverFactory (androidMain)

    View Slide

  72. DatabaseDriverFactory (androidMain)

    View Slide

  73. DatabaseDriverFactory (androidMain)

    View Slide

  74. DatabaseDriverFactory (androidMain)

    View Slide

  75. DatabaseDriverFactory (iosMain)

    View Slide

  76. DatabaseDriverFactory (iosMain)

    View Slide

  77. DatabaseDriverFactory (iosMain)

    View Slide

  78. DatabaseDriverFactory (iosMain)

    View Slide

  79. DatabaseDriverFactory (iosMain)

    View Slide

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

    View Slide

  81. Database (commonMain)

    View Slide

  82. Database (commonMain)

    View Slide

  83. Database (commonMain)

    View Slide

  84. Database (commonMain)

    View Slide

  85. Database (commonMain)

    View Slide

  86. Database (commonMain)

    View Slide

  87. Database (commonMain)

    View Slide

  88. Database (commonMain)

    View Slide

  89. Database (commonMain)

    View Slide

  90. Database (commonMain)

    View Slide

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

    View Slide

  92. SpaceXSDK (commonMain)

    View Slide

  93. SpaceXSDK (commonMain)

    View Slide

  94. SpaceXSDK (commonMain)

    View Slide

  95. SpaceXSDK (commonMain)

    View Slide

  96. SpaceXSDK (commonMain)

    View Slide

  97. SpaceXSDK (commonMain)

    View Slide

  98. SpaceXSDK (commonMain)

    View Slide

  99. SpaceXSDK (commonMain)

    View Slide

  100. SpaceXSDK (commonMain)

    View Slide

  101. SpaceXSDK (commonMain)

    View Slide

  102. SpaceXSDK (commonMain)

    View Slide

  103. SpaceXSDK (commonMain)

    View Slide

  104. Time for jetpack compose

    View Slide

  105. build.gradle.kts (androidApp)

    View Slide

  106. build.gradle.kts (androidApp)

    View Slide

  107. build.gradle.kts (androidApp)

    View Slide

  108. build.gradle.kts (androidApp)

    View Slide

  109. build.gradle.kts (androidApp)

    View Slide

  110. build.gradle.kts (androidApp)

    View Slide

  111. build.gradle.kts (androidApp)

    View Slide

  112. MainActivity (androidApp)

    View Slide

  113. MainActivity (androidApp)

    View Slide

  114. MainActivity (androidApp)

    View Slide

  115. MainActivity (androidApp)

    View Slide

  116. MainActivity (androidApp)

    View Slide

  117. MainActivity (androidApp)

    View Slide

  118. MainActivity (androidApp)

    View Slide

  119. MainActivity (androidApp)

    View Slide

  120. Building with SwiftUI

    View Slide

  121. RocketLaunchRow.swift (iosApp)

    View Slide

  122. RocketLaunchRow.swift (iosApp)

    View Slide

  123. RocketLaunchRow.swift (iosApp)

    View Slide

  124. RocketLaunchRow.swift (iosApp)

    View Slide

  125. RocketLaunchRow.swift (iosApp)

    View Slide

  126. RocketLaunchRow.swift (iosApp)

    View Slide

  127. Pros (and Cons?)

    View Slide

  128. Pros (and Cons?)
    • Maximum code sharing

    • Expect/Actual pattern

    • Concurrency in Kotlin/Native

    • Single framework for shared module

    View Slide

  129. Contact
    • Twitter: @karandhillon95

    • Blog: https://kdhillon.com

    View Slide