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

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