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.
   

   View Slide

2. Copyright © 2022 Coupang, Inc. All right reserved. ࢎਊػ ݽٚ ௢౿ ࢚಴৬ ௢౿ ۽Ҋ ߂ ࢲ࠺झ ݃௼ח ޷Ҵ ߂ ӝఋ Ҵоী ١۾غ
   য ੓ח Coupang, inc. ߂/ژח Ӓ ҅ৌࢎ(ాடೞৈ “௢౿”੉ۄ ೣ)੄ ੤࢑ੑפ׮. Ӓ ৻ ৈӝࢲ ঱әػ ഥࢎח ध߹ ݾ੸ਵ۽݅ ঱әػ Ѫ
   ਵ۽, ௢౿਷ ࢎਊػ ӝসݺ੉ ز ഥࢎ੄ ١۾ ࢚಴ੌ ࣻ ੓ਵݴ ೧׼ ഥࢎо ױةਵ۽ ز ࢚಴ী ؀ೠ ة੼੸ ࣗਬӂਸ о૓׮ח Ѫਸ ੋ੿
   ೤פ׮.
   
   ৈӝী ನೣػ ੿ࠁח ੐૒ਗਵ۽ࢲ ੷੗ ࠄੋ੄ ѐੋ੸ ҃೷ਸ ߄ఔਵ۽ ೠ Ѫਵ۽ ௢౿੄ Ѽ೧ա ੄Ѽਸ աఋղח Ѫ੉ ইשਸ ߋഃ نפ
   ׮. ௢౿਷ ৈӝী ನೣػ ੿ࠁ੄ ੸੺ࢿ੉ա ҕ੿ࢿ, ੿ഛࢿ, উ੿ࢿী ؀೧ ഛੋೞ૑ ঋওਵݴ, Ӓী ؀ೠ যځೠ ૓ࣿب ೞ૑ ঋणפ׮.
   

   View Slide

3. 1. Introduction
   

   View Slide

4. View Slide

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ܳ Ӓې೗ ۨ੉য۽ ࢎਊ.
   

   View Slide

6. ݣ౭ ߔূ٘੄ Kotlin
   • ׮নೠ ߔূ٘ܳ ૑ਗ
   
   • JVM ߔূ٘
   
   • Java bytecodeо ఋѶ
   
   • JavaScript ߔূ٘
   
   • Native ߔূ٘
   
   • LLVM ӝ߈ (LLVM bitcode)
   

   View Slide

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

   View Slide

8. View Slide

9. View Slide

10. 2. Kotlin Multiplatform
    

    View Slide

11. 11
    ݒ֙ ݣ౭೒ۖಬ ۄ੉࠳۞ܻח ૐо.
    

    View Slide

12. 12
    ௏ౣܽ ݣ౭೒ۖಬ਷ ই૒ ߬ఋ ױ҅
    

    View Slide

13. 13
    Kotlin Multiplatform ۄ੉࠳۞ܻ
    

    View Slide

14. 14
    Kotlin Multiplatformਸ ਤ೧ ೙ਃೠ Ѫ
    Android Studio ݣ౭೒ۖಬ গ೒ܻா੉࣌ਸ ٜ݅Ҋ दޛۨ੉ఠա ೞ٘ਝযܳ प೯.
    

    View Slide

15. 15
    Kotlin Multiplatformਸ ਤ೧ ೙ਃೠ Ѫ
    Xcode
    Xcodeח ߔӒۄ਍٘ীࢲ ࣻ೯ ؽ.
    
    
    Kotlin/Nativeо ੄ઓೞח ߡ੹ਸ ࢸ஖೧ঠ ೣ.
    

    View Slide

16. 16
    Kotlin Multiplatformਸ ਤ೧ ೙ਃೠ Ѫ
    Kotlin
    Multiplatform
    Mobile
    উ٘۽੉٘ झౚ٣য়ীࢲ Kotlin Multiplatform Mobile ೒۞Ӓੋ ࢸ஖.
    

    View Slide

17. 17
    Kotlin Multiplatformਸ ਤ೧ ೙ਃೠ Ѫ
    JDK Android Studioী ੄೧ ࢸ஖.
    Kotlin Plugin Android Studioী ࢸ஖. সؘ੉౟ܳ ೧ࢲ ߡ੹ਸ ୭नച ೧ঠ.
    

    View Slide

18. 18
    Kotlin Multiplatformਸ ਤ೧ ೙ਃೠ Ѫ
    KDoctor KMPܳ ਤ೧ ೙ਃೠ ജ҃੉ ੓ח૑ ੼Ѩೞח জ.
    

    View Slide

19. View Slide

20. 20
    Kotlin Multiplatformਸ ਤ೧ ೙ਃೠ Ѫ
    CocoaPods KMP਷ SPM(SwiftPackageManager)ܳ ૑ਗೞ૑ ঋ਺. (؀୓ ৵!)
    

    View Slide

21. 21
    Kotlin Multiplatform Appਵ۽ ࢜ ೐۽ં౟ܳ ݅ٞ.
    

    View Slide

22. 22
    ಁః૑ ֎੐਷ উ٘۽੉٘/੗߄ জ୊ۢ بݫੋ੄ ৉ࣽਵ۽ ૑੿ೣ.
    

    View Slide

23. 23
    জ ֎੐
    ӝࠄਵ۽ androidApp, iosApp, shared۽ জ ֎੐੉ ੿೧૗.
    
    
    iOS framework distribution਷ Regular۽ Cocoapods -_-ਸ ࢶఖೡ ࣻ ੓਺.
    

    View Slide

24. 24
    androidApp উ٘۽੉٘ ҙ۲ ௏٘ח androidApp ইې ਤ஖ೣ
    

    View Slide

25. 25
    উ٘۽੉٘ח
    
    
    Compose۽ ࢤࢿ ؽ
    

    View Slide

26. 26
    iosApp iOS ҙ۲ ௏٘ח iOSAppী ਤ஖ೣ.
    

    View Slide

27. 27
    iOSח SwiftUI۽
    
    
    Compose ইתפ׮.
    

    View Slide

28. View Slide

29. 29
    ߡ੹ ୊ܻח যڌѱ ೮ਸөਃ?
    expect৬ actual
    shared/src/
    commonMain
    iOS৬ Androidীࢲ ݽف ࢎਊೡ ੋఠಕ੉झܳ expect ఃਕ٘۽ ݅ٞ.
    

    View Slide

30. 30
    ߡ੹ ୊ܻח যڌѱ ೮ਸөਃ?
    expect৬ actual
    shared/src/
    androidMain
    Android੄ ҳഅਸ actual ఃਕ٘ܳ ࠢৈ ҳഅ
    

    View Slide

31. 31
    ߡ੹ ୊ܻח যڌѱ ೮ਸөਃ?
    expect৬ actual
    shared/src/
    iOSMain
    iOS੄ ҳഅਸ actual ఃਕ٘ܳ ࠢৈ ҳഅ
    

    View Slide

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ܳ ૑੿೧ঠ ೣ.
    
    
    

    View Slide

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 ೐۽ಌ౭ח ݫੋझۨ٘ীࢲ݅ ࠅ ࣻ ੓਺.
    

    View Slide

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
    
    
    

    View Slide

35. 3. Compose for iOS
    

    View Slide

36. 36
    Compose Multiplatform iOS Android Application
    మ೒݁ਸ ੉ਊ೧ࢲ द੘೧ঠ
    మ೒݁ https://github.com/JetBrains/compose-multiplatform-ios-android-template
    

    View Slide

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)ܳ ૑ਗೞ૑ ঋ਺.
    

    View Slide

38. 38
    Compose for iOSܳ ਤ೧ ೙ਃೠ Ѫ
    

    View Slide

39. 39
    shared/src/
    commonMain
    

    View Slide

40. 40
    androidApp/
    src/
    commonMain
    

    View Slide

41. 41
    iosApp/iosApp
    

    View Slide

42. 42
    iosApp/iosApp
    

    View Slide

43. 43
    Shared/
    commonMain/
    resources
    

    View Slide

44. 44
    sharedApp/
    src/iosMain
    

    View Slide

45. 45
    ୊਺ ߸҃೧ࠁח Compose for iOS
    TextField ୶о TextFieldܳ ୶оೞח ؘݽܳ ೤द׮.
    

    View Slide

46. 4. Compose for Desktop
    

    View Slide

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 ੉࢚ীࢲ ࢎਊоמ.
    

    View Slide

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 ੉࢚.
    

    View Slide

49. 49
    Compose Multiplatform desktop application
    New Project۽ द੘ೞӝ
    

    View Slide

50. View Slide

51. View Slide

52. 5. Compose for Web
    

    View Slide

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 ੉࢚ীࢲ ࢎਊоמ.
    

    View Slide

54. 54
    WASM ৘ઁ https://github.com/Kotlin/kotlin-wasm-examples
    

    View Slide

55. View Slide

56. View Slide

57. 6. Compose Multiplatformਊ ۄ੉࠳۞ܻٜ
    

    View Slide

58. View Slide

59. 59
    Glide, Coil੄ ؀উ Kamel
    Kamel https://github.com/Kamel-Media/Kamel
    

    View Slide

60. 60
    Retro
    fi
    t, HttpClient -> Ktor (1/3, commonMain)
    Ktor https://ktor.io/
    

    View Slide

61. 61
    Ktor (2/3, androidMain)
    

    View Slide

62. 62
    Ktor (3/3, iosMain)
    

    View Slide

63. 63
    GSON -> kotlinx.serialization (1/3)
    kotlinx.serializ
    ation
    https://github.com/Kotlin/kotlinx.serialization
    

    View Slide

64. 64
    kotlinx.serialization (2/3)
    

    View Slide

65. 65
    kotlinx.serialization + Ktor content negotiation (3/3)
    

    View Slide

66. 66
    Android ViewModel -> moko-mvvm
    moko-mvvm https://github.com/icerockdev/moko-mvvm
    

    View Slide

67. 67
    ؀উ ۄ੉࠳۞ܻ
    preCompose https://github.com/Tlaster/PreCompose
    Compose
    ImageLoder
    https://github.com/qdsfdhvh/compose-imageloader
    

    View Slide

68. Fin.
    

    View Slide