The Adventure of Kotlin and Compose Through The Multiplatform World II

Join me in this adventure through Kotlin and Compose Multiplatform and learn how you can develop apps using these technologies. You’ve got your Android app already developed? See how you can make it run on your watch and on the Desktop effortlessly. Or how you can share your business logic with iOS and speed up your development. Perhaps, you want to develop for the Web? See how you can give the first steps into Compose for the Web while also sharing your logic.

Transcript

1. Kotlin and Compose
   The adventure of
   Through the Multiplatform World
   @cafonsomota
   Volume II
   

   View Slide

2. 👨💻 Android GDE
   
   
   🗣 Founder @GDGCoimbra
   
   
   ✍ Author @rwenderlich
   
   
   🗺 Loves travel, photography and running
   
   
   🍻 Looking to taste a Moretti with all of you
   @cafonsomota
   

   View Slide

3. 🎬 Slides
   
   
   speakerdeck.com/cmota/the-adventure-of-kotlin-and-compose-through-multiplatform-II
   
   
   💻 Code
   
   
   github.com/cmota/unsplash
   
   
   📚 Book
   
   
   raywenderlich.com/books/kotlin-multiplatform-by-tutorials/v1.0
   
   
   🍿 YouTube
   
   
   bit.ly/cmota-youtube
   Materials @cafonsomota
   

   View Slide

4. How to develop an App?
   

   View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. Type
   
   
   Is it a PoC?
   
   
   Do you need to build an MVP?
   
   
   Are you going to target more than one platforms?
   
   
   Duration
   
   
   What’s the project timeline?
   
   
   How long is it going to take? 1yr? 5yrs? Forever?
   
   
   @cafonsomota
   requirements
   

   View Slide

10. View Slide

11. View Slide

12. Team
    Team
    
    
    Are you going to have a team?
    
    
    Team background
    
    
    Which language is your team familiar with? Do they want to learn new things?
    
    
    Team size
    
    
    Can you have developers focused on each platform you’re targeting?
    
    
    @cafonsomota
    

    View Slide

13. View Slide

14. View Slide

15. Project
    Constraints
    
    
    Time: It hasn’t started yet, and you’re already behind schedule?
    
    
    Budget: Can you hire/allocate more people?
    
    
    @cafonsomota
    

    View Slide

16. View Slide

17. Platform
    How many platforms are you going to target?
    
    
    Android? iOS? Watch? Desktop? Web?
    
    
    @cafonsomota
    

    View Slide

18. View Slide

19. View Slide

20. @chiziaruhoma
    
    
    

    View Slide

21. Be careful with the demo e
    ff
    ect!
    
    
    Framework dependent
    
    
    Missing features
    
    
    Slower performance
    
    
    Commitment to one framework
    Frameworks
    @cafonsomota
    

    View Slide

22. View Slide

23. What is…
    @cafonsomota
    Kotlin Multiplatform
    
    
    

    View Slide

24. What is…
    @cafonsomota
    Kotlin Multiplatform
    
    
    is an SDK
    
    
    

    View Slide

25. What is…
    @cafonsomota
    Kotlin Multiplatform
    
    
    is an SDK
    
    
    developed in Kotlin
    
    
    

    View Slide

26. What is…
    @cafonsomota
    Kotlin Multiplatform
    
    
    is an SDK
    
    
    developed in Kotlin
    
    
    allows you to share your business logic
    

    View Slide

27. What is…
    @cafonsomota
    Kotlin Multiplatform
    
    
    is an SDK
    
    
    developed in Kotlin
    
    
    allows you to share your business logic
    
    
    you decide what to share
    

    View Slide

28. What is…
    @cafonsomota
    Kotlin Multiplatform
    
    
    is an SDK
    
    
    developed in Kotlin
    
    
    allows you to share your business logic
    
    
    you decide what to share
    
    
    UI is developed natively (or, you can use a fw)
    

    View Slide

29. What is…
    @cafonsomota
    Kotlin Multiplatform
    
    
    is an SDK
    
    
    developed in Kotlin
    
    
    allows you to share your business logic
    
    
    you decide what to share
    
    
    UI is developed natively (but… can you share it? 🤔)
    

    View Slide

30. Kotlin Multiplatform
    @cafonsomota
    KMP
    *diagram adapted from @AielloBrady
    

    View Slide

31. Kotlin Multiplatform
    @cafonsomota
    KMP
    *diagram adapted from @AielloBrady
    KMM
    Native
    WASM JS JVM
    

    View Slide

32. Kotlin Multiplatform
    @cafonsomota
    KMP
    *diagram adapted from @AielloBrady
    Native Linux
    Windows (MinGW)
    macOS
    iOS
    tvOS
    watchOS
    WASM JS JVM
    KMM
    

    View Slide

33. Kotlin Multiplatform
    @cafonsomota
    KMP
    *diagram adapted from @AielloBrady
    Native
    Android
    WASM JS JVM
    KMM
    Linux
    Windows (MinGW)
    macOS
    iOS
    tvOS
    watchOS
    

    View Slide

34. Kotlin Multiplatform
    @cafonsomota
    *Android Studio: Kotlin Multiplatform Mobile (plugin)
    How to Start
    

    View Slide

35. Kotlin Multiplatform
    @cafonsomota
    KaMP Kit: github.com/touchlab/KaMPKit
    How to Start
    

    View Slide

36. src/commonMain/sample/Platform.kt
    :shared
    expect object Platform {
    
    
    val name: String
    
    
    }
    
    
    Platform-specific code
    @cafonsomota
    

    View Slide

37. src/commonMain/sample/Platform.kt
    :shared
    expect object Platform {
    
    
    val name: String
    
    
    }
    
    
    You need to de
    fi
    ne actual per target
    
    
    actual for Android
    
    
    actual for Desktop
    
    
    actual for JS
    Platform-specific code
    @cafonsomota
    

    View Slide

38. src/commonMain/sample/Platform.kt
    :shared
    expect object Platform {
    
    
    val name: String
    
    
    }
    
    
    src/androidMain/sample/Platform.kt
    actual object Platform {
    
    
    actual val name: String = "android"
    
    
    }
    
    
    Platform-specific code
    @cafonsomota
    

    View Slide

39. src/commonMain/sample/Platform.kt
    :shared
    expect object Platform {
    
    
    val name: String
    
    
    }
    
    
    src/androidMain/sample/Platform.kt
    actual object Platform {
    
    
    actual val name: String = “android”
    
    
    }
    
    
    Platform-specific code
    @cafonsomota
    

    View Slide

40. src/commonMain/sample/Platform.kt
    :shared
    src/androidMain/sample/Platform.kt
    src/desktopMain/sample/Platform.kt
    src/webMain/sample/Platform.kt
    actual object Platform {
    
    
    actual val name: String = “desktop”
    
    
    }
    
    
    actual object Platform {
    
    
    actual val name: String = “web”
    
    
    }
    
    
    Platform-specific code
    @cafonsomota
    expect object Platform {
    
    
    val name: String
    
    
    }
    
    
    actual object Platform {
    
    
    actual val name: String = “android”
    
    
    }
    
    
    

    View Slide

41. android iOS
    Room CoreData
    Retro
    fi
    t Alamo
    fi
    re
    GSON/ Moshi JSONSerialization
    RxJava RxSwift
    Tests Tests
    Activity View
    LazyColumn LazyHStack
    web
    There are a lot of
    different frameworks
    here… 

    - redux
    - Fetch
    - json-api-serializer
    …
    

    View Slide

42. SQLDelight
    ktor
    kotlinx.serialization
    kotlinx.coroutines
    kotlin.test
    Activity View
    LazyColumn LazyHStack
    android iOS web
    
    

    View Slide

43. Powered by JetBrains
    
    
    kotlinx: Coroutines, serialization, datetime, atomicfu, etc.
    
    
    network: Ktor
    
    
    Community
    
    
    I/O: github.com/square/okio
    
    
    settings: github.com/russhwolf/multiplatform-settings
    
    
    database: github.com/cashapp/sqldelight
    
    
    GraphQL: github.com/apollographql/apollo-kotlin
    
    
    sharing resources: github.com/icerockdev/moko-resources
    
    
    reactive extensions: github.com/badoo/Reaktive
    
    
    dependency injection: github.com/InsertKoinIO/koin
    
    
    Kotlin Multiplatform
    @cafonsomota
    Libraries
    

    View Slide

44. github.com/terrakok/kmm-awesome
    

    View Slide

45. Suggestions
    @cafonsomota
    Kotlin Multiplatform
    New Kotlin/Native Memory Model
    
    
    Multi-thread Coroutines on Native (Kotlin 1.6.10+)
    
    
    For iOS developers
    
    
    export your libraries for iOS builds
    
    
    More time to focus on building UI and creating new features
    
    
    No Core Data :)
    
    
    Reduce build times: generate only required frameworks
    
    
    CI/DI
    
    
    Each shared module on it’s own repo
    
    
    Create swift package (see: cmota/unsplash repo)
    

    View Slide

46. It’s Kotlin ❤
    
    
    Low risk
    
    
    Decide what’s worth to share across platforms
    
    
    Faster development
    
    
    Consistency across platforms
    
    
    One tech-stack
    
    
    Strong community support
    Kotlin Multiplatform
    @cafonsomota
    Key Takeaways
    

    View Slide

47. Apps in production
    @cafonsomota
    Kotlin Multiplatform
    

    View Slide

48. Apps in production
    @cafonsomota
    Kotlin Multiplatform
    Net
    fl
    ix Android and iOS Studio Apps - now powered
    by Kotlin Multiplatform
    *net
    fl
    ixtechblog.com/net
    fl
    ix-android-and-ios-studio-apps-kotlin-multiplatform-d6d4d8d25d23
    

    View Slide

49. WANTED
    For Multiplatform development
    

    View Slide

50. View Slide

51. developer.android.com/jetpack/compose
    

    View Slide

52. Apps in production
    @cafonsomota
    Jetpack Compose
    

    View Slide

53. Apps in production
    @cafonsomota
    Jetpack Compose
    Twitter going all in on Jetpack Compose for feature
    development: greater productivity, less bugs
    *android-developers.googleblog.com/2022/04/twitter-going-all-in-on-jetpack-compose.html
    

    View Slide

54. compose.animation
    
    
    compose.foundation
    
    
    compose.material
    
    
    compose.material3
    
    
    compose.ui
    
    
    compose.runtime
    
    
    compose.compiler
    
    
    Jetpack Compose
    @cafonsomota
    

    View Slide

55. compose.animation
    
    
    compose.foundation
    
    
    compose.material
    
    
    compose.material3
    
    
    compose.ui
    
    
    compose.runtime
    
    
    compose.compiler
    
    
    Compose Compiler
    Compose Runtime
    Compose UI Toolkit (Android)
    Compose Animation
    Compose UI
    Compose Foundation
    Compose Material
    Jetpack Compose
    Compose Material 3
    

    View Slide

56. Jetpack Compose
    compose.animation
    
    
    compose.foundation
    
    
    compose.material
    
    
    compose.material3
    
    
    compose.ui
    
    
    compose.runtime
    
    
    compose.compiler
    
    
    Compose Compiler
    Compose Runtime
    Compose UI Toolkit (Android)
    Compose Animation
    Compose UI
    Compose Foundation
    Compose Material
    Compose Material 3
    

    View Slide

57. Written in Kotlin
    
    
    Transforms @Composable into UI
    
    
    Doesn’t use the Annotation Processor
    
    
    The plugin works at system/code generation level
    
    
    Doesn’t impact build times
    
    
    Open source
    
    
    Available in the AOSP
    Compose Compiler
    Compose Runtime
    Compose UI Toolkit (Android)
    Compose Animation
    Compose Foundation
    Compose Material
    Compose Material 3
    android.googlesource.com/platform/frameworks/support/+/HEAD/compose/compiler
    Compose UI
    Compose Compiler
    

    View Slide

58. Platform agnostic
    
    
    Doesn’t know what Android or UI are
    
    
    Tree management solution
    Compose Compiler
    Compose Runtime
    Compose UI Toolkit (Android)
    Compose Animation
    Compose Foundation
    Compose Material
    Compose Material 3
    Compose UI
    Compose Runtime
    

    View Slide

59. compose.ui
    
    
    Handles input management, Drawing, Layouts, etc.
    
    
    compose.foundation
    
    
    Contains Basic building: Column, Text, Image, etc.
    
    
    compose.material
    
    
    Material design system to use on components
    
    
    compose.material3
    
    
    Material design 3 system to use on components
    
    
    compose.animation
    
    
    Animations to use easily and out side of the box
    Compose Compiler
    Compose Runtime
    Compose UI Toolkit (Android)
    Compose Animation
    Compose Foundation
    Compose Material
    Compose Material 3
    Compose UI
    Compose UI Toolkit
    

    View Slide

60. Compose UI
    Web
    Compose Compiler
    Compose Runtime
    Compose UI
    Android
    Compose UI
    Desktop
    Compose UI
    Console
    Compose UI
    iOS
    Compose
    

    View Slide

61. Suggestions
    @cafonsomota
    Jetpack Compose
    Accompanist libraries
    
    
    github.com/google/accompanist
    
    
    Kotlin and Compose versions don’t go side-by-side
    
    
    Be careful when updating Kotlin!
    
    
    

    View Slide

62. It’s Kotlin ❤
    
    
    Low risk
    
    
    Start small, and then decide what’s worth to migrate to compose
    
    
    Faster development
    
    
    Code reuse
    
    
    Simpler to implement your apps design system
    Jetpack Compose
    @cafonsomota
    Key Takeaways
    

    View Slide

63. WANTED
    For Multiplatform development
    

    View Slide

64. How to develop a
    Multiplatform App?
    

    View Slide

65. :androidApp
    @cafonsomota
    

    View Slide

66. :androidWearApp
    @cafonsomota
    

    View Slide

67. :desktopApp
    @cafonsomota
    

    View Slide

68. :iosAppCompose
    @cafonsomota
    

    View Slide

69. :webApp
    

    View Slide

70. Multiplatform development
    @cafonsomota
    Unsplash
    Business logic
    
    
    Developed with Kotlin Multiplatform
    
    
    Shared across all platforms
    
    
    UI
    
    
    Developed with Compose
    
    
    Shared across Android, Desktop, and iOS
    
    
    Web also uses Compose
    

    View Slide

71. Challenges
    @cafonsomota
    Multiplatform development
    How to share everything?
    
    
    Handling resources
    
    
    Android uses the R class to reference images, strings, etc.
    
    
    Di
    ff
    erent platforms use di
    ff
    erent components
    
    
    Android: Lifecycle, Navigation, ViewModels, LiveData, etc.
    

    View Slide

72. Challenges
    @cafonsomota
    Multiplatform development
    Kotlin Multiplatform
    
    
    to the rescue!
    
    
    

    View Slide

73. Challenges
    @cafonsomota
    Multiplatform development
    Kotlin Multiplatform
    
    
    to the rescue!
    
    
    create your platform-speci
    fi
    c implementation
    
    
    

    View Slide

74. Challenges
    @cafonsomota
    Multiplatform development
    Kotlin Multiplatform
    
    
    to the rescue!
    
    
    create your platform-speci
    fi
    c implementation
    
    
    use libraries that support the platforms that you’re targeting
    

    View Slide

75. Challenges
    @cafonsomota
    Multiplatform development
    Kotlin Multiplatform
    
    
    to the rescue!
    
    
    create your platform-speci
    fi
    c implementation
    
    
    use libraries that support the platforms that you’re targeting
    
    
    add Multiplatform support to existing libraries
    

    View Slide

76. Accompanist libraries (by Syer10)
    
    
    Set of UI libraries: github.com/Syer10/accompanist
    Kotlin Multiplatform
    @cafonsomota
    UI Libraries
    Android Desktop Native
    

    View Slide

77. Accompanist libraries (by Syer10)
    
    
    Set of UI libraries: github.com/Syer10/accompanist
    
    
    Kamel
    
    
    Async media loading library: github.com/alialbaali/Kamel
    
    
    JS/Native support is currently under develoment
    Kotlin Multiplatform
    @cafonsomota
    UI Libraries
    Android Desktop
    Android Desktop JS Native
    Native
    

    View Slide

78. Accompanist libraries (by Syer10)
    
    
    Set of UI libraries: github.com/Syer10/accompanist
    
    
    touchlab-image
    
    
    Async media loading (draft) library from touchlab DroidconKotlin
    
    
    - github.com/cmota/unsplash/touchlab-image
    
    
    Uses coil-compose and @qdsfdhvh image-loader libraries
    
    
    - github.com/coil-kt/coil (Android)
    
    
    - github.com/qdsfdhvh/compose-imageloader (Desktop and iOS)
    
    
    Kotlin Multiplatform
    @cafonsomota
    UI Libraries
    Android Desktop
    Android Desktop Native
    Native
    

    View Slide

79. moko-resources
    
    
    Provides access to resources: github.com/icerockdev/moko-resources
    Kotlin Multiplatform
    @cafonsomota
    UI Libraries
    Android Desktop JS Native
    

    View Slide

80. moko-resources
    
    
    Provides access to resources: github.com/icerockdev/moko-resources
    
    
    PreCompose
    
    
    ViewModel, Navigation, etc.: github.com/Tlaster/PreCompose
    
    
    Kotlin Multiplatform
    @cafonsomota
    UI Libraries
    Android Desktop JS Native
    Android Desktop Native
    

    View Slide

81. UI
    
    
    Imagine that you want to share your app screens
    
    
    This is currently possible between:
    
    
    - Android, Desktop, and iOS*
    @cafonsomota
    Kotlin Multiplatform
    SharING UI
    *experimental
    

    View Slide

82. Hello world!
    Kotlin Multiplatform
    Hello World 🌍
    UI
    
    
    Imagine that you want to share your app screens
    
    
    This is currently possible between:
    
    
    - Android, Desktop, and iOS*
    SharING UI
    *experimental
    

    View Slide

83. Hello world!
    Column(
    
    
    modifier = Modifier
    
    
    .fillMaxSize()
    
    
    horizontalAlignment = Alignment.CenterHorizontally,
    
    
    verticalArrangement = Arrangement.Center
    
    
    ) {
    
    
    Text(
    
    
    text = “Hello World 🌍"
    
    
    )
    
    
    }
    Kotlin Multiplatform
    Android
    Hello World 🌍
    SharING UI
    

    View Slide

84. Hello world!
    Column(
    
    
    modifier = Modifier
    
    
    .fillMaxSize()
    
    
    horizontalAlignment = Alignment.CenterHorizontally,
    
    
    verticalArrangement = Arrangement.Center
    
    
    ) {
    
    
    Text(
    
    
    text = “Hello World 🌍"
    
    
    )
    
    
    }
    Kotlin Multiplatform
    Desktop
    SharING UI
    Hello World 🌍
    

    View Slide

85. Hello world!
    Column(
    
    
    modifier = Modifier
    
    
    .fillMaxSize()
    
    
    horizontalAlignment = Alignment.CenterHorizontally,
    
    
    verticalArrangement = Arrangement.Center
    
    
    ) {
    
    
    Text(
    
    
    text = “Hello World 🌍"
    
    
    )
    
    
    }
    Kotlin Multiplatform
    iOS
    Hello World 🌍
    SharING UI
    

    View Slide

86. Hello world!
    Kotlin Multiplatform
    
    
    Create a shared-ui library
    
    
    Implementation
    
    
    1. Analyse which libraries support the platforms that you’re targeting
    
    
    2. Create a new KMP library
    
    
    3. Move your UI (Compose) code to this new shared library
    
    
    4. Migrate the platform-speci
    fi
    c code
    
    
    5. Add this library to your apps
    
    
    Kotlin Multiplatform
    SharING UI
    @cafonsomota
    

    View Slide

87. Resources
    
    
    Imagine that you want to display text
    @cafonsomota
    Kotlin Multiplatform
    SharING Strings
    

    View Slide

88. Hello world!
    Resources
    
    
    Imagine that you want to display text
    Kotlin Multiplatform
    SharING Strings
    Hello World 🌍
    

    View Slide

89. Hello world!
    Text(
    
    
    text = stringResource(id = R.string.hello_world)
    
    
    )
    Kotlin Multiplatform
    Android
    Resources
    
    
    Imagine that you want to display text
    SharING Strings
    Hello World 🌍
    

    View Slide

90. Hello world!
    Resources
    
    
    Imagine that you want to display text
    
    
    R class is Android speci
    fi
    c
    
    
    How to access a string resource in a Desktop app?
    Kotlin Multiplatform
    Android
    Text(
    
    
    text = stringResource(id = R.string.hello_world)
    
    
    )
    SharING Strings
    Hello World 🌍
    

    View Slide

91. Hello world!
    Kotlin Multiplatform
    Desktop
    SharING Strings
    Resources
    
    
    Imagine that you want to display text
    
    
    R class is Android speci
    fi
    c
    
    
    How to access a string resource in a Desktop app?
    Text(
    
    
    text = “Hello World 🌍”
    
    
    )
    Hello World 🌍
    

    View Slide

92. Hello world!
    How to share strings across all platforms?
    
    
    Android, Desktop, and iOS
    
    
    Kotlin Multiplatform
    SharING Strings
    @cafonsomota
    

    View Slide

93. Hello world!
    How to share strings across all platforms?
    
    
    Android, Desktop, and iOS
    
    
    moko-resources
    
    
    github.com/icerockdev/moko-resources
    
    
    Implementation
    
    
    1. resources-generator to classpath
    
    
    2. strings.xml to commonMain/resources/MR.base
    
    
    3. platform-speci
    fi
    c implementation of getString
    
    
    Kotlin Multiplatform
    SharING Strings
    @cafonsomota
    

    View Slide

94. shared-ui/commonMain/Resources.kt
    public expect fun getString(resId: StringResource): String
    

    View Slide

95. shared-ui/commonMain/Resources.kt
    public expect fun getString(resId: StringResource): String
    

    View Slide

96. shared-ui/commonMain/Resources.kt
    actual fun getString(resId: StringResource): String {
    
    
    return StringDesc.Resource(resId).toString(appContext)
    
    
    }
    shared-ui/androidApp/Resources.kt
    public expect fun getString(resId: StringResource): String
    

    View Slide

97. actual fun getString(resId: StringResource): String {
    
    
    return StringDesc.Resource(resId).localized()
    
    
    }
    
    
    shared-ui/desktopApp/Resources.kt
    shared-ui/commonMain/Resources.kt
    actual fun getString(resId: StringResource): String {
    
    
    return StringDesc.Resource(resId).toString(appContext)
    
    
    }
    shared-ui/androidApp/Resources.kt
    public expect fun getString(resId: StringResource): String
    

    View Slide

98. actual fun getString(resId: StringResource): String {
    
    
    return StringDesc.Resource(resId).localized()
    
    
    }
    
    
    shared-ui/desktopApp/Resources.kt
    shared-ui/commonMain/Resources.kt
    actual fun getString(resId: StringResource): String {
    
    
    return StringDesc.Resource(resId).toString(appContext)
    
    
    }
    shared-ui/androidApp/Resources.kt
    public expect fun getString(resId: StringResource): String
    actual fun getString(resId: StringResource): String {
    
    
    return StringDesc.Resource(resId).localized()
    
    
    }
    
    
    shared-ui/iosApp/Resources.kt
    

    View Slide

99. Hello world!
    Kotlin Multiplatform
    SharING Strings
    Text(
    
    
    text = getString(MR.strings.hello_world)
    
    
    )
    Hello World 🌍
    Hello World 🌍
    Hello World 🌍
    

    View Slide

100. Hello world!
     ⚠ Targeting iOS
     
     
     You might get a IllegalArgumentException
     ...
     resources.MR not found
     
     
     Use this workaround:
     
     
     - github.com/icerockdev/moko-resources/issues/372
     Kotlin Multiplatform
     SharING Strings
     @cafonsomota
     

     View Slide

101. Images
     
     
     Imagine that you want to show an image
     @cafonsomota
     Kotlin Multiplatform
     SharING Images
     

     View Slide

102. Local vector graphics
     
     
     Bundled with your app
     
     
     Supported on all platforms
     
     
     For instance, the icon in one of the bottom navigation bar items
     
     
     You can use a tool to convert an svg to compose
     
     
     @cafonsomota
     Kotlin Multiplatform
     SharING Images
     

     View Slide

103. Local vector graphics
     
     
     Bundled with your app
     
     
     Supported on all platforms
     
     
     For instance, the icon in one of the bottom navigation bar items
     
     
     You can use a tool to convert an svg to compose
     
     
     @cafonsomota
     Kotlin Multiplatform
     SharING Images
     _home = materialIcon(name = "Filled.Home") {
     
     
     materialPath {
     
     
     moveTo(10.0f, 20.0f)
     
     
     verticalLineToRelative(-6.0f)
     
     
     horizontalLineToRelative(4.0f)
     
     
     ...
     
     Hello world!
     Hello world!
     

     View Slide

104. Local vector graphics
     
     
     Common to all platforms
     
     
     A set of icons is available on compose.material
     
     
     You can use a tool to convert an svg to compose
     
     
     @cafonsomota
     Kotlin Multiplatform
     SharING Images
     all platforms
     Icon(
     
     
     imageVector = Icons.Filled.Search,
     
     
     contentDescription = description
     
     
     )
     
     
     Hello world!
     Hello World 🌍
     Hello world!
     

     View Slide

105. Local vector graphics
     
     
     Bundled with your app
     
     
     Supported on all platforms
     
     
     For instance, the icon in one of the bottom navigation bar items
     
     
     You can use a tool to convert an svg to compose
     
     
     Local images
     
     
     Bundled with your app
     
     
     For instance, your app launcher icon
     
     
     @cafonsomota
     Kotlin Multiplatform
     SharING Images
     

     View Slide

106. Local images
     
     
     There’s no direct support for accessing the
     fi
     les bundled with the app
     
     
     If you only target Android and Desktop you can use painterResource
     
     
     Implementation
     
     
     shared-ui/commonMain contains the expect implementation
     
     
     shared-ui/androidMain contains the xml
     fi
     les (vectors) and actual implementation
     
     
     shared-ui/desktopMain contains the images (png’s) and actual implementation
     
     
     @cafonsomota
     Kotlin Multiplatform
     SharING Images
     Hello world!
     Hello world!
     

     View Slide

107. @Composable
     
     
     public expect fun icAbout(): Painter
     shared-ui/commonMain/Icons.kt
     Kotlin Multiplatform
     SharING Images
     

     View Slide

108. @Composable
     
     
     public expect fun icAbout(): Painter
     shared-ui/commonMain/Icons.kt
     Kotlin Multiplatform
     SharING Images
     

     View Slide

109. shared-ui/commonMain/Icons.kt
     Kotlin Multiplatform
     SharING Images
     @Composable
     
     
     public actual fun icAbout() = painterResource(R.drawable.ic_about)
     shared-ui/androidApp/Icons.kt
     @Composable
     
     
     public expect fun icAbout(): Painter
     

     View Slide

110. shared-ui/commonMain/Icons.kt
     Kotlin Multiplatform
     SharING Images
     @Composable
     
     
     public actual fun icAbout() = painterResource(R.drawable.ic_about)
     shared-ui/androidApp/Icons.kt
     @Composable
     
     
     public actual fun icAbout() = painterResource("images/ic_about.png")
     shared-ui/desktopApp/Icons.kt
     @Composable
     
     
     public expect fun icAbout(): Painter
     

     View Slide

111. @Composable
     
     
     public expect fun icBrand(): Painter
     
     
     @Composable
     
     
     public expect fun icLauncher(): Painter
     
     
     @Composable
     
     
     public expect fun icMore(): Painter
     
     
     @Composable
     
     
     public expect fun icHome(): Painter
     
     
     @Composable
     
     
     public expect fun icSearch(): Painter
     
     
     shared-ui/desktopApp/Icons.kt
     Kotlin Multiplatform
     SharING Images
     shared-ui/commonMain/Icons.kt
     

     View Slide

112. Hello world!
     Local image
     
     
     Imagine that you want to show a local image
     
     
     Issues
     
     
     It can quickly became tedious
     
     
     You’re going to have the same
     fi
     le multiple times
     
     
     Increases your repository size
     
     
     How about the iOS app?
     Kotlin Multiplatform
     SharING Images
     

     View Slide

113. Hello world!
     Local image
     
     
     Imagine that you want to show a local image
     
     
     Issues
     
     
     It can quickly became tedious
     
     
     You’re going to have the same
     fi
     le multiple times
     
     
     Increases your repository size
     
     
     How about the iOS app?
     
     
     Solution
     
     
     touchlab-image
     
     
     moko-resources
     Kotlin Multiplatform
     SharING Images
     

     View Slide

114. Local image
     
     
     touchlab-image, allows to load images on Android, Desktop, and iOS
     
     
     moko-resources, returns the path for the image
     fi
     les
     
     
     Android
     
     
     Access it’s resources directly via context.resources.getIdentifier
     
     
     Desktop
     
     
     The local path of the image is enough to access it
     
     
     iOS
     
     
     Needs to decode the image and convert it to BitmapPainter
     @cafonsomota
     Kotlin Multiplatform
     SharING Images
     Hello world!
     Hello world!
     

     View Slide

115. Hello world!
     Kotlin Multiplatform
     SharING Images
     LocalImage(
     
     
     imageResourceName = MR.images.logo.path
     
     
     modifier = modifier
     
     
     )
     Hello World 🌍
     Hello world!
     

     View Slide

116. Local vector graphics
     
     
     Bundled with your app
     
     
     Supported on all platforms
     
     
     For instance, the icon in one of the bottom navigation bar items
     
     
     You can use a tool to convert an svg to compose
     
     
     Local images
     
     
     Bundled with your app
     
     
     For instance, your app launcher icon
     
     
     Remote Images/graphics
     
     
     They need to be fetched from the network and then decoded
     
     
     @cafonsomota
     Kotlin Multiplatform
     SharING Images
     

     View Slide

117. Hello world!
     Remote image
     
     
     Imagine that you want to show a remote image
     Kotlin Multiplatform
     SharING Images
     

     View Slide

118. Hello world!
     Remote image
     
     
     Imagine that you want to show a remote image
     
     
     Solution
     
     
     touchlab-image
     Kotlin Multiplatform
     SharING Images
     

     View Slide

119. touchlab-image
     
     
     Allows to fetch remote images on Android, Desktop, and iOS
     
     
     Android
     
     
     Uses Coil-Compose library
     
     
     Desktop
     
     
     Uses compose-imageloader library
     
     
     iOS
     
     
     Uses compose-imageloader library
     @cafonsomota
     Kotlin Multiplatform
     SharING Images
     Hello world!
     Hello world!
     

     View Slide

120. Hello world!
     Kotlin Multiplatform
     SharING Images
     RemoteImage(
     
     
     imageUrl = image.url
     
     
     modifier = modifier
     
     
     )
     Hello World 🌍
     Hello world!
     

     View Slide

121. @cafonsomota
     Web
     Multiplatform development
     Where are we?
     

     View Slide

122. @cafonsomota
     Web
     Multiplatform development
     Where are we?
     
     
     Is in an initial stage and the paradigm is di
     ff
     erent
     
     
     It’s focused on DOM rendering
     
     
     Only a set of components are available: Box, Button, Column, Row, Slider, Text
     

     View Slide

123. Div({
     
     
     style {
     
     
     position(Position.Relative)
     
     
     width(100.percent)
     
     
     height(400.px)
     
     
     flexGrow(1.0)
     
     
     marginBottom(10.px)
     
     
     }
     
     
     }) {
     
     
     Image(resource = image)
     
     
     }
     Web
     Multiplatform development
     

     View Slide

124. @Composable
     
     
     fun Column(content: @Composable ()
     ->
     Unit) {
     
     
     Div({
     
     
     style {
     
     
     display(DisplayStyle.Flex)
     
     
     alignItems(AlignItems.Center)
     
     
     flexGrow(1.0)
     
     
     }
     
     
     }) {
     
     
     content()
     
     
     }
     
     
     }
     webApp/components/Column.kt
     Web
     Multiplatform development
     

     View Slide

125. Sharing logic
     
     
     Works without any issue
     
     
     The generated JS
     fi
     le might be up to several MBs
     
     
     Sharing UI
     
     
     It’s going to be time consuming to share everything
     
     
     You’re going to need to create several components
     
     
     Most of the libraries don’t support it (yet)
     @cafonsomota
     Web
     Multiplatform development
     

     View Slide

126. @cafonsomota
     iOS
     Multiplatform development
     Where are we?
     

     View Slide

127. iOS
     Multiplatform development
     Where are we?
     

     View Slide

128. iOS
     Multiplatform development
     Sharing logic
     
     
     Works without any issue
     
     
     Don’t forget to enable the new K/N Memory Model
     
     
     Sharing UI
     
     
     It’s experimental but it (kinda) works!
     
     
     DroidconKotlin is in production (accepted by Apple)
     

     View Slide

129. iOS: Sharing UI
     Multiplatform development
     Lookout for the demo e
     ff
     ect
     
     
     It’s working great for a simple app
     
     
     Limitations
     
     
     Not all libraries support this
     
     
     Font customization is only possible with moko-resources (in a hacky way)
     
     
     Debugging can be real complex
     

     View Slide

130. WatchOS
     Multiplatform development
     Sharing logic
     
     
     Works without any issue*
     
     
     Don’t forget to enable the new K/N Memory Model
     
     
     Sharing UI
     
     
     There’s currently no deploy targets for the watch
     
     
     Although, there might be in the near future
     
     
     - github.com/JetBrains/androidx/pull/292
     
     
     *youtrack.jetbrains.com/issue/KT-37368/Native-compiler-fails-to-compile-big-projects
     soon 👀
     

     View Slide

131. Allows you to quickly create a Desktop app
     
     
     Unfortunately not everyone has an Android
     
     
     More people can use and test your app
     
     
     With a small cost of sharing your resources
     
     
     You gain new users
     
     
     You can reach more users in the Desktop market
     
     
     You/Your company can sell it to a client
     
     
     New platforms on it’s way to be supported
     
     
     iOS and Web are giving their
     fi
     rst steps.
     Multiplatform development
     @cafonsomota
     Key Takeaways
     

     View Slide

132. Key Takeaways
     

     View Slide

133. 🟢 Kotlin Multiplatform Mobile is stable-ish
     
     
     🟢 Compose Android is stable
     
     
     🟡 Compose Desktop is stable-ish
     
     
     🟠 Compose Web is alpha
     
     
     🔴 Compose iOS is experimental
     
     
     🟠 Documentation and samples
     
     
     🟢 Community and support
     @cafonsomota
     Key Takeaways
     Multiplatform development
     

     View Slide

134. KMM Beta release
     
     
     Roadmap: blog.jetbrains.com/kotlin/2022/05/kotlin-m....e-beta-roadmap-update/
     
     
     It should be before the end of Autumn 2022
     
     
     Compose Multiplatform
     
     
     Roadmap: github.com/JetBrains/compose-jb/discussions/2220
     
     
     Follows the Jetpack Compose Android releases
     
     
     Version 1.2 should be released this month (October)
     
     
     Multiplatform development
     @cafonsomota
     Roadmap
     

     View Slide

135. Droidcon Italy
     

     View Slide

136. @cafonsomota
     Droidcon Italy
     Kotlin Multiplatform
     KMM Survival Guide: How to tackle everyday struggles
     
     
     Today, @ 15:25, Sala 150
     
     
     Emanuele Papa
     
     
     Roundatable: Kotlin Multiplatform Mobile
     
     
     Today, @ 17h20, Auditorium
     
     
     M. Porcaro, A. Gupta, C. Mota, L. Basti, E. Papa, N. Ebel and M. Gomiero
     
     
     Adopting Kotlin Multiplatform in Brown
     fi
     eld Applications
     
     
     Tomorrow, @ 14h45, Auditorium
     
     
     Nate Ebel
     
     
     

     View Slide

137. @cafonsomota
     Droidcon Italy
     Compose
     Re-Compose your UI: Building an atomic design library
     
     
     Today, @ 11h35, Auditorium
     
     
     by Tatiana Irene and Giuseppe Scabellone
     
     
     Developing Wear OS apps with Jetpack Compose
     
     
     Today, @ 16h40, Sala 150
     
     
     Kenichi Kambara
     
     
     Making apps adaptive with Material and Compose
     
     
     Tomorrow, @ 17h20, Auditorium
     
     
     Gurupreet Singh
     
     
     

     View Slide

138. Resources
     

     View Slide

139. Kotlin Slack
     
     
     Kotlin Multiplatform by Tutorials
     
     
     raywenderlich.com/books/kotlin-multiplatform-by-tutorials/v1.0
     
     
     Kotlin by:
     
     
     touchlab.co/kamp-kit-touchlab/
     
     
     kmp.icerock.dev/
     
     
     Kotlin 1.4 Online Event
     
     
     youtu.be/pD58Dw17CLk
     Resources
     Kotlin Multiplatform
     

     View Slide

140. Jetpack Compose samples (Google)
     
     
     github.com/android/compose-samples
     
     
     A curated list of Jetpack Compose resources
     
     
     github.com/jetpack-compose/jetpack-compose-awesome
     
     
     foso.github.io/Jetpack-Compose-Playground/
     
     
     Community
     
     
     twitch.tv/intelligibabble
     

     jetpackcompose.app
     
     
     joebirch.co/tag/jetpack-compose/
     
     
     jorgecastillo.dev/
     Resources
     Compose
     

     View Slide

141. Unsplash
     
     
     github.com/cmota/unsplash
     
     
     DroidconKotlin by Touchlab
     
     
     github.com/touchlab/DroidconKotlin
     
     
     People In Space
     
     
     github.com/joreilly/PeopleInSpace
     Resources
     Kotlin Multiplatform and Compose
     

     View Slide

142. Questions and Answers
     

     View Slide

143. WANTED
     For Multiplatform development
     The Adventure of Kotlin and Compose
     Through the Multiplatform World
     @cafonsomota
     

     View Slide

144. WANTED
     For Multiplatform development
     The Adventure of Kotlin and Compose
     Through the Multiplatform World
     @cafonsomota
     

     View Slide