Compose Multiplatform 101

Compose Multiplatform 101: A declarative framework for sharing UIs across Multiplatform with Kotlin.

Transcript

1. Dalinaum (Leonaro YongUk Kim) @ Coupang Pay Compose Multiplatform 101 A declarative framework for sharing UIs across Multiplatform with Kotlin.
2. Copyright © 2022 Coupang, Inc. All right reserved. ࢎਊػ ݽٚ ௢౿ ࢚಴৬ ௢౿ ۽Ҋ ߂ ࢲ࠺झ ݃௼ח ޷Ҵ ߂ ӝఋ Ҵоী ١۾غ য ੓ח Coupang, inc. ߂/ژח Ӓ ҅ৌࢎ(ాடೞৈ “௢౿”੉ۄ ೣ)੄ ੤࢑ੑפ׮. Ӓ ৻ ৈӝࢲ ঱әػ ഥࢎח ध߹ ݾ੸ਵ۽݅ ঱әػ Ѫ ਵ۽, ௢౿਷ ࢎਊػ ӝসݺ੉ ز ഥࢎ੄ ١۾ ࢚಴ੌ ࣻ ੓ਵݴ ೧׼ ഥࢎо ױةਵ۽ ز ࢚಴ী ؀ೠ ة੼੸ ࣗਬӂਸ о૓׮ח Ѫਸ ੋ੿ ೤פ׮. ৈӝী ನೣػ ੿ࠁח ੐૒ਗਵ۽ࢲ ੷੗ ࠄੋ੄ ѐੋ੸ ҃೷ਸ ߄ఔਵ۽ ೠ Ѫਵ۽ ௢౿੄ Ѽ೧ա ੄Ѽਸ աఋղח Ѫ੉ ইשਸ ߋഃ نפ ׮. ௢౿਷ ৈӝী ನೣػ ੿ࠁ੄ ੸੺ࢿ੉ա ҕ੿ࢿ, ੿ഛࢿ, উ੿ࢿী ؀೧ ഛੋೞ૑ ঋওਵݴ, Ӓী ؀ೠ যځೠ ૓ࣿب ೞ૑ ঋणפ׮.
3. 1. Introduction
5. Compose Multiplatform੉ۆ? • Google੄ Jetpack Composeী ӝ߈ೠ JetBrains੄ য়೑ࣗझ ೐۽ં౟ • Kotlin Multiplatformী ੄ઓ. • Androidח Kotlin/JVM, ART (Android Runtime)ী ӝ߈ೞৈ ز੘ೣ. • iOSח Kotlin/Native ӝࣿী ӝ߈ೞৈ ֎੉౭࠳ ௏٘۽ ࠽٘. • Desktop਷ JVM (Java virtual machine)ী ӝ߈ೞৈ ز੘. (ઑӘ पݎ. ֎੉౭࠳ ইש) • Web਷ Kotlin/WASM ী ӝ߈ೞৈ ز੘. • SKIKOܳ Ӓې೗ ۨ੉য۽ ࢎਊ.
6. ݣ౭ ߔূ٘੄ Kotlin • ׮নೠ ߔূ٘ܳ ૑ਗ • JVM ߔূ٘ • Java bytecodeо ఋѶ • JavaScript ߔূ٘ • Native ߔূ٘ • LLVM ӝ߈ (LLVM bitcode)
7. Web Assembly • അ؀੸ੋ ਢ ࠳ۄ਋੷о ଻ఖೞҊ ੓ח झ ఖ ӝ߈੄ о࢚ ݠन. • JVM਷ झఖ ӝ߈, উ٘۽੉٘ Dalvik਷ ۨ ૑झఠ ӝ߈੄ о࢚ݠन. • WAPM ࢎ੉౟ ١ীࢲ рױೠ ౵੉ॆ ௏٘, C ঱য ௏٘١ਸ ਢ ࠳ۄ਋੷ী प೯೧ࠅ ࣻ ੓਺. • https://wapm.io/python/python (module (func (export "addTwo") (param i32 i32) (result i32) local.get 0 local.get 1 i32.add))
10. 2. Kotlin Multiplatform
11. 11 ݒ֙ ݣ౭೒ۖಬ ۄ੉࠳۞ܻח ૐо.
12. 12 ௏ౣܽ ݣ౭೒ۖಬ਷ ই૒ ߬ఋ ױ҅
13. 13 Kotlin Multiplatform ۄ੉࠳۞ܻ
14. 14 Kotlin Multiplatformਸ ਤ೧ ೙ਃೠ Ѫ Android Studio ݣ౭೒ۖಬ গ೒ܻா੉࣌ਸ ٜ݅Ҋ दޛۨ੉ఠա ೞ٘ਝযܳ प೯.
15. 15 Kotlin Multiplatformਸ ਤ೧ ೙ਃೠ Ѫ Xcode Xcodeח ߔӒۄ਍٘ীࢲ ࣻ೯ ؽ. Kotlin/Nativeо ੄ઓೞח ߡ੹ਸ ࢸ஖೧ঠ ೣ.
16. 16 Kotlin Multiplatformਸ ਤ೧ ೙ਃೠ Ѫ Kotlin Multiplatform Mobile উ٘۽੉٘ झౚ٣য়ীࢲ Kotlin Multiplatform Mobile ೒۞Ӓੋ ࢸ஖.
17. 17 Kotlin Multiplatformਸ ਤ೧ ೙ਃೠ Ѫ JDK Android Studioী ੄೧ ࢸ஖. Kotlin Plugin Android Studioী ࢸ஖. সؘ੉౟ܳ ೧ࢲ ߡ੹ਸ ୭नച ೧ঠ.
18. 18 Kotlin Multiplatformਸ ਤ೧ ೙ਃೠ Ѫ KDoctor KMPܳ ਤ೧ ೙ਃೠ ജ҃੉ ੓ח૑ ੼Ѩೞח জ.
20. 20 Kotlin Multiplatformਸ ਤ೧ ೙ਃೠ Ѫ CocoaPods KMP਷ SPM(SwiftPackageManager)ܳ ૑ਗೞ૑ ঋ਺. (؀୓ ৵!)
21. 21 Kotlin Multiplatform Appਵ۽ ࢜ ೐۽ં౟ܳ ݅ٞ.
22. 22 ಁః૑ ֎੐਷ উ٘۽੉٘/੗߄ জ୊ۢ بݫੋ੄ ৉ࣽਵ۽ ૑੿ೣ.
23. 23 জ ֎੐ ӝࠄਵ۽ androidApp, iosApp, shared۽ জ ֎੐੉ ੿೧૗. iOS framework distribution਷ Regular۽ Cocoapods -_-ਸ ࢶఖೡ ࣻ ੓਺.
24. 24 androidApp উ٘۽੉٘ ҙ۲ ௏٘ח androidApp ইې ਤ஖ೣ
25. 25 উ٘۽੉٘ח Compose۽ ࢤࢿ ؽ
26. 26 iosApp iOS ҙ۲ ௏٘ח iOSAppী ਤ஖ೣ.
27. 27 iOSח SwiftUI۽ Compose ইתפ׮.
29. 29 ߡ੹ ୊ܻח যڌѱ ೮ਸөਃ? expect৬ actual shared/src/ commonMain iOS৬ Androidীࢲ ݽف ࢎਊೡ ੋఠಕ੉झܳ expect ఃਕ٘۽ ݅ٞ.
30. 30 ߡ੹ ୊ܻח যڌѱ ೮ਸөਃ? expect৬ actual shared/src/ androidMain Android੄ ҳഅਸ actual ఃਕ٘ܳ ࠢৈ ҳഅ
31. 31 ߡ੹ ୊ܻח যڌѱ ೮ਸөਃ? expect৬ actual shared/src/ iOSMain iOS੄ ҳഅਸ actual ఃਕ٘ܳ ࠢৈ ҳഅ
32. 32 KMP for iOSীࢲ ݅աѱ غח ࢚ടٜ ObjC അ੤ Kotlin਷ ObjC݅ ૑ਗ೧ࢲ ઁցܼ ௿ېझ݅ ૑ਗೞҊ ੋఠಕ੉झܳ ૑ਗೞ૑ ޅೣ. Abstract class ܳ ؀न ࢎਊ೧ঠ ೣ. (ઁցܼ੄ ؀࢚ਵ۽ ௿ېझ݅ оמೠ Ѫب ױ੼) 
 @HinddenFromObjC, @ObjcName ఃਕ٘ܳ ੸ӓ੸ਵ۽ ഝਊೞ੗. @ObjcName(swiftName=“_”) APIܳ झਤ೐౟ ׹ѱ ೞӝ ਤ೧ ੗઱ ࢎਊೡ Ѫ੐. plane.fuel(volume: .Gallons(gallons: 12.5)) ؀न plane.fuel(.Gallons(12.5)) 
 ੢ӝ੸ਵ۽ח ௏౟ܽ੉ Swiftܳ ߄۽ ఋѱ౴ೡ Ѫ੐. Swiftܳ ObjeCܳ ઁ৻ೞҊ ߄ੋ٘ೡ ࣻ হ঻ӝী ߊ ࢤೠ ޙઁ. SourceKitten৬ э਷ بҳٜ۽ ઺р ௏٘ܳ ࢤࢿೞ੗. ۄੋ ؘ݃ী஢੉ ѻ਷ য۰਑ Suspend suspendח ௒ߔ(completion handler)੉ غҊ ௒ߔ਷ Swiftীࢲ async۽ ഐ୹ оמೞ૑݅ ஂࣗо ࠛ оמೣ. 
 Flowب ੜ ૑ਗغ૑ ঋ਺. Flowо ੋఠಕ੉झ੉Ҋ KMPਸ ੜ૑ਗೞ૑ ޅೣ. (ৈ۞ߣ੄ நझ౟о ೙ਃ) 
 KMP-NativeCoroutines ۄ੉࠳۞ܻܳ ഝਊ೧ঠ ೣ. https://github.com/rickclephas/KMP-NativeCoroutines 
 ௏ౣܽ ৘৻о झਤ೐౟ ೩ٜ۞ ੹׳ غ૑ ঋਸ ࣻ ੓য @Throws ఃਕ٘۽ Errorܳ ૑੿೧ঠ ೣ.
33. 33 KMP for iOSীࢲ ݅աѱ غח ࢚ടٜ CocoaPods ই૒ ҕध੸ਵ۽ SPM(Swift Package Manager)ܳ ૑ਗೞ૑ ঋ਺. Gradle API ࣻળীࢲ ੿ܻػ ੉റ ী ૑ਗೠ׮Ҋ ೣ. (঱ઁ?) CocoaPodsח ੄ઓࢿਸ ࣗझ۽ оઉ৬ э੉ ࠽٘ী ࢎਊೞӝী ݒ਋ ࠺ബਯ੸. TouchLab੄ ۄ੉࠳۞ܻ KMMBridgeܳ ࢎਊ೤द׮. https://github.com/touchlab/KMMBridge 
 
 SPMਸ ؀਽ೞӝ ਤ೧ࢲח Git ܻನ૑షܻ৬ झక౮ ౵ੌ ੷੢ࣗо ೙ਃೞ׮. (AWS?) Frozen Global Objectח ӝࠄਵ۽ frozen. ੽Ӕೡ ࣻ ੓૑݅ ߸҃ೡ ࣻ হ਺. @ThreadLocalਸ ࠢ੉ݶ freeze ഐ୹ উೣ. Atomicೠ ੗ܐҳઑ੄ ࢎਊ੉ ೙ਃೡ ࣻ ੓׮. 
 freeze() ഛ੢ ೣࣻܳ ੉ਊ೧ ؘ੉ఠܳ ঴ܾ ࣻ ੓Ҋ ಽ ࣻח হ਺. Global ೐۽ಌ౭ח ݫੋझۨ٘ীࢲ݅ ࠅ ࣻ ੓਺.
34. 34 KMP for iOSীࢲ ݅աѱ غח ࢚ടٜ Memory Management झఖ ౟ۨ੉झ ٣ߡӦ য۵Ҋ, ݫݽܻ ݒפ૑ݢ౟о ই૒ উ੿੸੉૑ח ঋ਺. 
 https://youtrack.jetbrains.com/issue/KT-55512 ଵҊ Kotlin Multiplatform Mobileਸ ഝਊೠ ؘ݃ী஢ ٘ۄ੉ߡজ ѐߊ ੉ঠӝ Kotlin/Multiplatform for iOS developers : state & future by Salomon Brys
35. 3. Compose for iOS
36. 36 Compose Multiplatform iOS Android Application మ೒݁ਸ ੉ਊ೧ࢲ द੘೧ঠ మ೒݁ https://github.com/JetBrains/compose-multiplatform-ios-android-template
37. 37 Compose for iOSܳ ਤ೧ ೙ਃೠ Ѫ Android Studio Android জҗ iOS জܳ प೯ೡ ࣻ ੓ח ѐߊ ജ҃. Xcode Xcodeח ߔӒۄ਍٘ীࢲ ࣻ೯ ؽ. Kotlin/Nativeо ੄ઓೞח ߡ੹ਸ ࢸ஖೧ঠ ೣ. Kotlin Multiplatform Mobile উ٘۽੉٘ झౚ٣য়ীࢲ Kotlin Multiplatform Mobile ೒۞Ӓੋ ࢸ஖. CocoaPods Compose for iOSب SPM(SwiftPackageManager)ܳ ૑ਗೞ૑ ঋ਺.
38. 38 Compose for iOSܳ ਤ೧ ೙ਃೠ Ѫ
39. 39 shared/src/ commonMain
40. 40 androidApp/ src/ commonMain
41. 41 iosApp/iosApp
42. 42 iosApp/iosApp
43. 43 Shared/ commonMain/ resources
44. 44 sharedApp/ src/iosMain
45. 45 ୊਺ ߸҃೧ࠁח Compose for iOS TextField ୶о TextFieldܳ ୶оೞח ؘݽܳ ೤द׮.
46. 4. Compose for Desktop
47. 47 Compose for Desktop੄ ౠ૚ Cross- Platform ݣ౭೒ۖಬ੉ ইצ ௼۽झ೒ۖಬਵ۽ ࠙ܨ. 
 JVM੉ ఋѶ੉Ҋ JVM ؋ী ৈ۞ ೒ۖಬীࢲ بח Ѫਸ ௼۽झ೒ۖಬਵ۽ ࢸݺ. SKIKO SKIA੄ ௏ౣܽ ߄ੋ٬ SKIKOী ੄೧ ۪؊݂. https://github.com/JetBrains/skiko SKIA੄ ಪ౟ ۪؊݂੉ ਍৔୓ઁ ݃׮ ׳ۄ झ௼ܽ ࢫ పझ౟ܳ ೞ૑ ݈੗. Compose Multiplatform IDE support ੋభܻઁ੉ ই੉٣যա উ٘۽੉٘ झౚ٣য়ী ࢸ஖. https://plugins.jetbrains.com/plugin/16541-compose-multiplatform-ide-support IntelliJ IDEA ੋభܻઁ੉ ই੉٣য 2020.3 ੉࢚ীࢲ ࢎਊоמ.
48. 48 Compose for Desktop੄ ౠ૚ ଵҊ৔࢚ You can do desktop too! By Victor Kropp https://www.youtube.com/watch?v=Mgf_9kxM1BA JDK 15 JDK11ਵ۽ ೐۽ં౟ ࢤࢿ оמ. ֎੉౭࠳ ߓನ ಁః૚ਸ ਤ೧ࢲח 15 ੉࢚.
49. 49 Compose Multiplatform desktop application New Project۽ द੘ೞӝ
52. 5. Compose for Web
53. 53 Compose for Web੄ ౠ૚ WebAssembly JavaScriptܳ ॳ૑ ঋҊ WebAssembly۽ प೯. Kotlin/WASM੉ ఋѶ. Compose HTML HTMLਸ ࢤࢿೞח Kotlin/JS੄ ۄ੉࠳۞ܻب ੓਺. Compose for Webҗ ޖҙ. Compose Multiplatform IDE support ੋభܻઁ੉ ই੉٣যա উ٘۽੉٘ झౚ٣য়ী ࢸ஖. https://plugins.jetbrains.com/plugin/16541-compose-multiplatform-ide-support IntelliJ IDEA ੋభܻઁ੉ ই੉٣য 2020.3 ੉࢚ীࢲ ࢎਊоמ.
54. 54 WASM ৘ઁ https://github.com/Kotlin/kotlin-wasm-examples
57. 6. Compose Multiplatformਊ ۄ੉࠳۞ܻٜ
59. 59 Glide, Coil੄ ؀উ Kamel Kamel https://github.com/Kamel-Media/Kamel
60. 60 Retro fi t, HttpClient -> Ktor (1/3, commonMain) Ktor https://ktor.io/
61. 61 Ktor (2/3, androidMain)
62. 62 Ktor (3/3, iosMain)
63. 63 GSON -> kotlinx.serialization (1/3) kotlinx.serializ ation https://github.com/Kotlin/kotlinx.serialization
64. 64 kotlinx.serialization (2/3)
65. 65 kotlinx.serialization + Ktor content negotiation (3/3)
66. 66 Android ViewModel -> moko-mvvm moko-mvvm https://github.com/icerockdev/moko-mvvm
67. 67 ؀উ ۄ੉࠳۞ܻ preCompose https://github.com/Tlaster/PreCompose Compose ImageLoder https://github.com/qdsfdhvh/compose-imageloader
68. Fin.