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 full-size slide

  2. Issue with KMM plugin on AS 4.2

    View full-size 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 full-size slide

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

    View full-size slide

  5. Meet the new kids on the block

    View full-size slide

  6. • 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 full-size slide

  7. KMM - KMP, but more emphasis
    on mobile

    View full-size slide

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

    • Android application

    • iOS application

    View full-size slide

  9. Shared module (buildscript)

    View full-size slide

  10. Shared module (buildscript)

    View full-size slide

  11. Shared module (buildscript)

    View full-size slide

  12. Shared module (buildscript)

    View full-size slide

  13. Shared module (buildscript)

    View full-size slide

  14. Shared module (buildscript)

    View full-size slide

  15. Shared module (buildscript)

    View full-size slide

  16. Shared module (buildscript)

    View full-size slide

  17. Shared module (buildscript)

    View full-size slide

  18. Shared module (buildscript)

    View full-size slide

  19. Shared module (buildscript)

    View full-size slide

  20. Meet the project

    View full-size slide

  21. Meet the project

    View full-size slide

  22. Shared module (buildscript) Root module (buildscript)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  41. Now, we create the cache service

    View full-size slide

  42. Shared module (buildscript)

    View full-size slide

  43. Shared module (buildscript)

    View full-size slide

  44. Shared module (buildscript)

    View full-size slide

  45. Shared module (buildscript)

    View full-size slide

  46. Shared module (buildscript)

    View full-size slide

  47. 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 full-size slide

  48. AppDatabase.sq

    View full-size slide

  49. AppDatabase.sq

    View full-size slide

  50. AppDatabase.sq

    View full-size slide

  51. AppDatabase.sq

    View full-size slide

  52. AppDatabase.sq

    View full-size slide

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

    View full-size slide

  54. DatabaseDriverFactory (commonMain)

    View full-size slide

  55. DatabaseDriverFactory (commonMain)

    View full-size slide

  56. DatabaseDriverFactory (commonMain)

    View full-size slide

  57. DatabaseDriverFactory (androidMain)

    View full-size slide

  58. DatabaseDriverFactory (androidMain)

    View full-size slide

  59. DatabaseDriverFactory (androidMain)

    View full-size slide

  60. DatabaseDriverFactory (androidMain)

    View full-size slide

  61. DatabaseDriverFactory (androidMain)

    View full-size slide

  62. DatabaseDriverFactory (androidMain)

    View full-size slide

  63. DatabaseDriverFactory (iosMain)

    View full-size slide

  64. DatabaseDriverFactory (iosMain)

    View full-size slide

  65. DatabaseDriverFactory (iosMain)

    View full-size slide

  66. DatabaseDriverFactory (iosMain)

    View full-size slide

  67. DatabaseDriverFactory (iosMain)

    View full-size slide

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

    View full-size slide

  69. Database (commonMain)

    View full-size slide

  70. Database (commonMain)

    View full-size slide

  71. Database (commonMain)

    View full-size slide

  72. Database (commonMain)

    View full-size slide

  73. Database (commonMain)

    View full-size slide

  74. Database (commonMain)

    View full-size slide

  75. Database (commonMain)

    View full-size slide

  76. Database (commonMain)

    View full-size slide

  77. Database (commonMain)

    View full-size slide

  78. Database (commonMain)

    View full-size slide

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

    View full-size slide

  80. SpaceXSDK (commonMain)

    View full-size slide

  81. SpaceXSDK (commonMain)

    View full-size slide

  82. SpaceXSDK (commonMain)

    View full-size slide

  83. SpaceXSDK (commonMain)

    View full-size slide

  84. SpaceXSDK (commonMain)

    View full-size slide

  85. SpaceXSDK (commonMain)

    View full-size slide

  86. SpaceXSDK (commonMain)

    View full-size slide

  87. SpaceXSDK (commonMain)

    View full-size slide

  88. SpaceXSDK (commonMain)

    View full-size slide

  89. SpaceXSDK (commonMain)

    View full-size slide

  90. SpaceXSDK (commonMain)

    View full-size slide

  91. SpaceXSDK (commonMain)

    View full-size slide

  92. Time for jetpack compose

    View full-size slide

  93. build.gradle.kts (androidApp)

    View full-size slide

  94. build.gradle.kts (androidApp)

    View full-size slide

  95. build.gradle.kts (androidApp)

    View full-size slide

  96. build.gradle.kts (androidApp)

    View full-size slide

  97. build.gradle.kts (androidApp)

    View full-size slide

  98. build.gradle.kts (androidApp)

    View full-size slide

  99. build.gradle.kts (androidApp)

    View full-size slide

  100. MainActivity (androidApp)

    View full-size slide

  101. MainActivity (androidApp)

    View full-size slide

  102. MainActivity (androidApp)

    View full-size slide

  103. MainActivity (androidApp)

    View full-size slide

  104. MainActivity (androidApp)

    View full-size slide

  105. MainActivity (androidApp)

    View full-size slide

  106. MainActivity (androidApp)

    View full-size slide

  107. MainActivity (androidApp)

    View full-size slide

  108. Building with SwiftUI

    View full-size slide

  109. RocketLaunchRow.swift (iosApp)

    View full-size slide

  110. RocketLaunchRow.swift (iosApp)

    View full-size slide

  111. RocketLaunchRow.swift (iosApp)

    View full-size slide

  112. RocketLaunchRow.swift (iosApp)

    View full-size slide

  113. RocketLaunchRow.swift (iosApp)

    View full-size slide

  114. RocketLaunchRow.swift (iosApp)

    View full-size slide

  115. Pros (and Cons?)

    View full-size slide

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

    • Expect/Actual pattern

    • Concurrency in Kotlin/Native

    • Single framework for shared module

    View full-size slide

  117. Contact
    • Twitter: @karandhillon95

    • Blog: https://kdhillon.com

    View full-size slide