"Kotlin Multiplatform dans le monde réel", Paris Android User Group, 2023-05-23

Transcript

1. Alexandre Gressier Kotlin Multiplatform dans le monde réel @_gressier 23 mai 2023
2. Kotlin Multiplatform Concept
3. Kotlin Multiplatform Concept
4. Kotlin Multiplatform Concept Android → Kotlin iOS → Objective-C
5. Kotlin Multiplatform
6. Kotlin Multiplatform • Un module de code Kotlin partagé entre plusieurs plateformes • Compilé avec Kotlin/JVM pour Android et Kotlin/Native pour iOS • Génération d’un header Objective-C pour iOS • Permet d’utiliser les APIs de la plateforme via le mécanisme expect/actual • KMM en beta (mais stable fi n 2023)
7. Kotlin Multiplatform Partager du code autant que l’on le souhaite Exemple 1 Exemple 2
8. Kotlin Multiplatform …et même l’UI Exemple 3
9. Kotlin Multiplatform …et même l’UI
10. Le projet de base
11. Créer un projet Kotlin Multiplatform Avec Android Studio + Plugin KMM
12. Créer un projet Kotlin Multiplatform Avec Android Studio + Plugin KMM
16. Structure du projet de base
17. Structure du projet de base • Une application Android Jetpack Compose (mais peut utiliser les Views/XML) • Une application SwiftUI (mais peut utiliser UIKit) • Un module shared qui montre comment Kotlin peut appeler les APIs iOS • Un projet Gradle
18. Structure du projet de base
19. Structure du projet de base
20. Structure du projet de base
21. Comment le module partagé est-il intégré côté iOS ?
22. Comment le module partagé est-il intégré côté iOS ?
23. Comment le module partagé est-il intégré côté iOS ?
24. Comment le module partagé est-il intégré côté iOS ?
25. OK… Mais comment partager plusieurs modules ?
26. Modularisation
27. Nouveau module partagé
28. Nouveau module partagé
29. Nouveau module partagé
30. Nouveau module partagé
31. Nouveau module partagé
32. Problème
33. Problème
36. Solution N’exporter qu’un seul module qui embarque tous les autres
37. Solution kotlin { sourceSets { val commonMain by getting { dependencies { api(project(":core:di")) api(project(":core:ui:resources")) } } } // .. . core/build.gradle.kts
38. Solution / / . .. listOf( iosArm64(), iosX64(), iosSimulatorArm64(), ).forEach { it.binaries.framework { export(project(":core:di")) export(project(":core:ui:resources")) // + Dépendances transitives à exposer export(project(":core:ui:state")) export(project(":core:domain:primitives")) export(project(":core:domain:model")) } } core/build.gradle.kts
39. Système de build
40. Gradle • Gère : • L’application Android • Les autres modules (KMP ou non) • Ne gère pas : • L’application iOS
41. Gradle
42. Simplifier sa configuration Convention Plugins
43. Convention Plugins
44. Convention Plugins android { namespace = MODULE_PACKAGES compileSdk = TARGET_ANDROID_SDK_VERSION sourceSets["main"].manifest.srcFile("src/androidMain/AndroidManifest.xml") defaultConfig { minSdk = MIN_ANDROID_SDK_VERSION targetSdk = TARGET_ANDROID_SDK_VERSION } compileOptions { sourceCompatibility = JVM_BYTECODE_VERSION targetCompatibility = sourceCompatibility } packagingOptions { resources { excludes += "/META-INF/{AL2.0,LGPL2.1}" } } } gradle/plugins/src/main/…/plugins/lib/android-multiplatform.gradle.kts
45. Convention Plugins plugins { multiplatforge("lib.android-multiplatform") multiplatforge("ksp") multiplatforge("ksp.log") multiplatforge(“deps.arrow") id("kotlin-parcelize") } core/build.gradle.kts
46. Convention Plugins
47. Gradle Pro Tip bit.ly/43p3aBF
48. Convention Plugins fun PluginDependenciesSpec.multiplatforge(module: String): PluginDependencySpec = id("com.multiplatforge.gradle.plugins.$module")
49. OK… Mais qu’en est-il du projet iOS ?
50. Problème 😡
51. Problème
52. Tuist • Comme Gradle, décrire la con fi guration d’un projet avec du code • Génère un projet Xcode • Con fi guration écrite en Swift tuist.io
53. Tuist
54. Tuist let project = Project( name: name, targets: [ Target( name: name, platform: .iOS, product: .app, bundleId: "\(group).\(name)", infoPlist: .extendingDefault(with: [ "CFBundleShortVersionString": "1.0", "CFBundleVersion": "1", "UIMainStoryboardFile": "", "UILaunchStoryboardName": "LaunchScreen" ]), sources: ["src/main/swift / ** "], resources: ["src/resources /** "], dependencies: [ .project(target: "AmigoFootballData", path: " .. / .. /libs/data"), .project(target: "AmigoFootballUIComponents", path: " .. / .. /libs/ui/components"), .external(name: "Stinsen"), ] ), ] )
55. Tuist $ tuist edit # Éditer les fichiers de build via Xcode $ tuist generate # Génère le projet et workspace Xcode $ tuist build # Build le projet $ tuist test # Lance les tests
56. Plugins Tuist extension MainCommand { struct SwiftLintCommand: ParsableCommand { static var configuration = CommandConfiguration( commandName: "swiftlint", abstract: "Lints the code of your projects using SwiftLint." ) @Option( name: .shortAndLong, help: "The path to the directory that contains the workspace or project whose code will be linted.", completion: .directory ) var path: String? @Argument( help: "The target to be linted. When not specified all the targets of the graph are linted." ) var target: String? // ... func run() throws { try SwiftLintService() .run( path: path, targetName: target, strict: strict ) } } }
57. Concurrence
58. Coroutines VS Async/Await suspend fun fetchData(): List<Int> { // TODO: fetch data } suspend fun compute(records: List<Int>): Int { // TODO: compute } suspend fun saveData(result: Int): Boolean { // TODO: save data } suspend fun doWork() { val records = fetchData() val result = compute(records) val response = saveData(result) println(“Response: $response") } func fetchData() async -> [Int] { // TODO: fetch data } func compute(_ records: [Int]) async -> Int { // TODO: compute } func saveData(_ result: Int) async -> Bool { // TODO: save data } func doWork() async { let records = await fetchData() let result = await compute(records) let response = await saveData(result) print("Response: \(response)") }
59. Coroutines VS Async/Await suspend fun main() { doWork() } scope.launch { doWork() } LaunchedEffect(key) { doWork() } static func main() async { await doWork() } Task { await doWork() } .task { await doWork() }
60. Convergence entre Kotlin et Swift Pro Tip bit.ly/3WtMsP4
61. Limitations Kotlin → Objective-C • Les fonctions suspend sont transpilées en rajoutant un handler dans le cas où la fonction se termine • Mais : • Pas de support pour la cancellation • Les Flows perdent leur type générique (Objective-C ne supporte pas les génériques pour les interfaces)
62. KMP-NativeCoroutines • Permet de palier ces deux problèmes • Plugin compilateur (KSP) utilisé via Gradle • Modi fi e le header généré pour le module partagé • Supporte Async/Await, Combine, ou RxSwift github.com/rickclephas/KMP-NativeCoroutines
63. KMP-NativeCoroutines plugins { id("com.google.devtools.ksp") version "1.8.20-1.0.10" id("com.rickclephas.kmp.nativecoroutines") version "1.0.0-ALPHA-7" }
64. KMP-NativeCoroutines
65. KMP-NativeCoroutines class RandomLettersGenerator { @NativeCoroutines suspend fun getRandomLetters(): String { // TODO: générer des lettres aléatoires } } Kotlin - Fonction suspend
66. KMP-NativeCoroutines @ObjCName(name = "getRandomLetters") fun RandomLettersGenerator.getRandomLettersNative() = nativeSuspend { getRandomLetters() } Code généré
67. KMP-NativeCoroutines let handle = Task { do { let letters = try await asyncFunction( for: randomLettersGenerator.getRandomLetters() ) print("Got random letters: \(letters)") } catch { print("Failed with error: \(error)") } } handle.cancel() Swift - Fonction suspend
68. KMP-NativeCoroutines let handle = Task { do { let sequence = asyncSequence( for: randomLettersGenerator.getRandomLettersFlow() ) for try await letters in sequence { print("Got random letters: \(letters)") } } catch { print("Failed with error: \(error)") } } handle.cancel() Swift - Flow
69. Persistance
70. SQLDelight • Génère du code Kotlin à partir de requêtes SQL • Multiplatforme : utilise l’implémentation respective d’SQLite pour Android ou iOS • Fichiers .sq (pas .sql) : SQL + labels • Supporte les migrations github.com/cashapp/sqldelight
71. SQLDelight plugins { id("app.cash.sqldelight") version "2.0.0-alpha05" } sqldelight { databases { create("Database") { packageName.set(“com.multiplatforge") } } } Con fi guration
72. SQLDelight CREATE TABLE hockeyPlayer ( player_number INTEGER NOT NULL, full_name TEXT NOT NULL ); CREATE INDEX hockeyPlayer_full_name ON hockeyPlayer(full_name); INSERT INTO hockeyPlayer (player_number, full_name) VALUES (15, 'Ryan Getzlaf'); Schéma src/commonMain/sqldelight/com/multiplatforge/hockey/data/Player.sq
73. SQLDelight selectAll: SELECT * FROM hockeyPlayer; insert: INSERT INTO hockeyPlayer(player_number, full_name) VALUES (?, ?); insertFullPlayerObject: INSERT INTO hockeyPlayer(player_number, full_name) VALUES ?; Requêtes src/commonMain/sqldelight/com/multiplatforge/hockey/queries/Player.sq
74. SQLDelight val database = Database(driver) val playerQueries: PlayerQueries = database.playerQueries println(playerQueries.selectAll().executeAsList()) // -> [HockeyPlayer(15, "Ryan Getzlaf")] playerQueries.insert(player_number = 10, full_name = "Corey Perry") println(playerQueries.selectAll().executeAsList()) // -> [HockeyPlayer(15, "Ryan Getzlaf"), HockeyPlayer(10, "Corey Perry")] val player = HockeyPlayer(10, "Ronald McDonald") playerQueries.insertFullPlayerObject(player) Requêtes - Kotlin
75. CoreData ou SQLDelight ?
76. Autres alternatives • Realm (MongoDB) : github.com/realm/realm-kotlin
77. ViewModels
78. ViewModels • Conteneur d’état dont le périmètre est généralement un seul écran • Exécute de la logique métier • Android : • A un cycle de vie • Persiste l’état à malgré les changements de con fi guration • Fourni un scope pour lancer des coroutines • Principe similaire sous iOS avec SwiftUI
79. ViewModels
80. @Composable fun LoginScreen() { var username by remember { mutableStateOf("") } var password by remember { mutableStateOf("") } Column { TextField(value = username, onValueChange = { username = it }) TextField(value = password, onValueChange = { password = it }) Button( onClick = { println("Username: $username, Password: $password") } ) { Text("Sign In") } } } Sans ViewModel Android
81. struct LoginView: View { @State private var username: String = "" @State private var password: String = "" var body: some View { VStack { TextField("Username", text: $username) SecureField("Password", text: $password) Button("Sign In") { print("Username: \(username), Password: \(password)") } } } } Sans ViewModel iOS
82. class LoginViewModel : ViewModel() { var username by mutableStateOf("") var password by mutableStateOf("") } Avec ViewModel Android
83. @Composable fun LoginScreen( vm: LoginViewModel ) { Column { TextField(value = vm.username, onValueChange = { vm.username = it }) TextField(value = vm.password, onValueChange = { vm.password = it }) Button( onClick = { println("Username: ${vm.username}, Password: ${vm.password}") } ) { Text("Sign In") } } } Avec ViewModel Android
84. extension LoginView { @MainActor class ViewModel: ObservableObject { @Published var username = "" @Published var password = "" } } Avec ViewModel iOS
85. struct LoginView: View { @StateObject private var vm = ViewModel() var body: some View { VStack { TextField("Username", text: $vm.username) SecureField("Password", text: $vm.password) Button("Sign In") { print("Username: \(vm.username), Password: \(vm.password)") } } } } Avec ViewModel iOS
86. Est-il possible de partager le ViewModel ?
87. KMM-ViewModel github.com/rickclephas/KMM-ViewModel • Par le même auteur que KMP-NativeCoroutines (Rick Clephas) • Utilise le vrai AAC ViewModel pour Android • Dépendance Gradle pour le code Kotlin commun dependencies { api("com.rickclephas.kmm:kmm-viewmodel-core:1.0.0-ALPHA-8") }
88. KMM-ViewModel Code Commun open class LoginViewModel: KMMViewModel() { private val _username = MutableStateFlow<String>(viewModelScope, null) val username = _username.asStateFlow() private val _password = MutableStateFlow<String>(viewModelScope, null) val password = _password.asStateFlow() }
89. @Composable fun LoginScreen( vm: LoginViewModel ) { Column { TextField(value = vm.username, onValueChange = { vm.username = it }) TextField(value = vm.password, onValueChange = { vm.password = it }) Button( onClick = { println("Username: ${vm.username}, Password: ${vm.password}") } ) { Text("Sign In") } } } KMM-ViewModel Utilisation côté Android
90. KMM-ViewModel Utilisation côté iOS import SwiftUI import KMMViewModelSwiftUI import shared struct ContentView: View { @StateViewModel var vm = LogInViewModel() // . .. }
91. Autres alternatives • MOKO MVVM : github.com/icerockdev/moko-mvvm • D-KMP ViewModel : github.com/dbaroncelli/D-KMP-sample
92. Ressources
93. MOKO Resources • Convertit des resources dé fi nies dans un format similaire à Android vers iOS • Plugin Gradle • Supporte entre autres : • Strings/Traductions • Polices • Couleurs • Images • Fichiers Textes github.com/icerockdev/moko-resources
94. MOKO Resources
95. MOKO Resources
96. MOKO Resources
97. MOKO Resources resources/MR/base/strings.xml <resources> <string name="helloWorld">Hello, world! < / string> <string name="mainHeadline">Find your next match </ string> </ resources> Généré (iOS) : en.lproj/Localizable.strings "helloWorld" = "Hello, world!"; "mainHeadline" = "Find your next match";
98. MOKO Resources
99. MOKO Resources Utilisation côté Android en Kotlin: Utilisation côté iOS en Swift : let string = MR.strings().helloWorld.desc().localized() val string = MR.strings.helloWorld.desc().toString(context = this)
100. Debugging
101. xcode-kotlin • Ajoute un support pour debugger du code Kotlin/Native dans Xcode • Installation via CLI : • $ brew install xcode-kotlin • $ xcode-kotlin install github.com/touchlab/xcode-kotlin
102. xcode-kotlin
103. xcode-kotlin
104. xcode-kotlin
105. xcode-kotlin
106. xcode-kotlin
107. Bonus
108. Android Studio est l’IDE pour faire du KMP
109. Android Studio est l’IDE pour faire du KMP
110. AppCode 💀 est l’IDE pour faire du KMP
111. IntelliJ IDEA est l’IDE pour faire du KMP
113. KMM Tooling Experiment bit.ly/3Mqsbpe
114. KMM Tooling Experiment • Plugin IntelliJ IDEA • Support Swift/Objective-C (comme AppCode) • Cross Kotlin/Swift/Objective-C : • Auto-complétion • Navigation symboles • Refactoring • Debugging • Run con fi gurations pour toutes les plateformes (dont iOS)
115. KMM Tooling Experiment
116. KMM Tooling Experiment
117. KMM Tooling Experiment
118. KMM Tooling Experiment
119. KMM Tooling Experiment
120. KMM Tooling Experiment
121. KMM Tooling Experiment
122. KMM Tooling Experiment
123. L’écosystème Kotlin Multiplatform n’est encore qu’à ses débuts
124. Encore plus de Kotlin Multiplatform • Navigation • Réseau (HTTP avec Ktor Client, GraphQL avec Apollo-Kotlin) • Génération de code Swift à partir de Kotlin (KSP) • Utilisation de librairies Swift depuis Kotlin (pour iOS uniquement) • CI/CD : ne builder/tester/deployer que les modules pour lesquels il y a des changements • UI partagée : Compose Multiplatform, Flutter… • …
125. Kotlin Multiplatform dans le monde réel
126. Merci ! :) Questions ?