Tweet
Tweet

Slide 1

Slide 1 text

Dalinaum (Leonaro YongUk Kim) @ Coupang Pay Compose Multiplatform 101 A declarative framework for sharing UIs across Multiplatform with Kotlin.

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

1. Introduction

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

2. Kotlin Multiplatform

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

13 Kotlin Multiplatform ۄ੉࠳۞ܻ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

19

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

27 iOSח SwiftUI۽ Compose ইתפ׮.

Slide 28

Slide 28 text

28

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

3. Compose for iOS

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

37 Compose for iOSܳ ਤ೧ ೙ਃೠ Ѫ Android Studio Android জҗ iOS জܳ प೯ೡ ࣻ ੓ח ѐߊ ജ҃. Xcode Xcodeח ߔӒۄ਍٘ীࢲ ࣻ೯ ؽ. Kotlin/Nativeо ੄ઓೞח ߡ੹ਸ ࢸ஖೧ঠ ೣ. Kotlin Multiplatform Mobile উ٘۽੉٘ झౚ٣য়ীࢲ Kotlin Multiplatform Mobile ೒۞Ӓੋ ࢸ஖. CocoaPods Compose for iOSب SPM(SwiftPackageManager)ܳ ૑ਗೞ૑ ঋ਺.

Slide 38

Slide 38 text

38 Compose for iOSܳ ਤ೧ ೙ਃೠ Ѫ

Slide 39

Slide 39 text

39 shared/src/ commonMain

Slide 40

Slide 40 text

40 androidApp/ src/ commonMain

Slide 41

Slide 41 text

41 iosApp/iosApp

Slide 42

Slide 42 text

42 iosApp/iosApp

Slide 43

Slide 43 text

43 Shared/ commonMain/ resources

Slide 44

Slide 44 text

44 sharedApp/ src/iosMain

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

4. Compose for Desktop

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

48 Compose for Desktop੄ ౠ૚ ଵҊ৔࢚ You can do desktop too! By Victor Kropp https://www.youtube.com/watch?v=Mgf_9kxM1BA JDK 15 JDK11ਵ۽ ೐۽ં౟ ࢤࢿ оמ. ֎੉౭࠳ ߓನ ಁః૚ਸ ਤ೧ࢲח 15 ੉࢚.

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

50

Slide 51

Slide 51 text

51

Slide 52

Slide 52 text

5. Compose for Web

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

55

Slide 56

Slide 56 text

56

Slide 57

Slide 57 text

6. Compose Multiplatformਊ ۄ੉࠳۞ܻٜ

Slide 58

Slide 58 text

58

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

61 Ktor (2/3, androidMain)

Slide 62

Slide 62 text

62 Ktor (3/3, iosMain)

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

64 kotlinx.serialization (2/3)

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

Fin.