$30 off During Our Annual Pro Sale. View Details »

The Adventure of Kotlin and Compose Through The Multiplatform World

cmota
April 26, 2022

The Adventure of Kotlin and Compose Through The Multiplatform World

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.

cmota

April 26, 2022
Tweet

More Decks by cmota

Other Decks in Education

Transcript

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

    View Slide

  2. 👨💻 Android GDE


    🗣 Founder @GDGCoimbra


    ✍ Author @rwenderlich


    🗺 Loves travel, photography and running


    🍻 Looking to taste a Sans Culottes with all of you
    @cafonsomota

    View Slide

  3. 🎬 Slides


    speakerdeck.com/cmota/the-adventure-of-kotlin-and-compose-through-multiplatform


    💻 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. Kotlin Multiplatform
    @cafonsomota
    KMP
    *diagram adapted from @AielloBrady

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  34. src/commonMain/sample/Platform.kt
    :shared
    expect object Platform {


    val name: String


    }


    Platform-specific code
    @cafonsomota

    View Slide

  35. 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

  36. 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

  37. 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

  38. 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

  39. android iOS
    Room CoreData
    Retro
    fi
    t Alamo
    fi
    re
    GSON/ Moshi JSONSerialization
    MVP, MVVM, MVI MVVM, ELM
    RxJava RxSwift
    Tests Tests
    Activity UIViewController
    RecyclerView UITableView
    web
    There are a lot of
    different frameworks
    here… 

    - redux
    - Fetch
    - json-api-serializer

    View Slide

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

    View Slide

  41. Powered by JetBrains


    kotlinx: Coroutines, serialization, datetime, atomicfu, etc.


    network: Ktor


    Community


    settings: github.com/russhwolf/multiplatform-settings


    database: github.com/cashapp/sqldelight


    dependency injection: github.com/InsertKoinIO/koin


    Others


    curated list: github.com/terrakok/kmm-awesome


    Kotlin Multiplatform
    @cafonsomota
    Libraries

    View Slide

  42. 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

  43. 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

  44. Apps in production
    @cafonsomota
    Kotlin Multiplatform

    View Slide

  45. 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

  46. WANTED
    For Multiplatform development

    View Slide

  47. View Slide

  48. developer.android.com/jetpack/compose

    View Slide

  49. Apps in production
    @cafonsomota
    Jetpack Compose

    View Slide

  50. 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

  51. Apps in production
    @cafonsomota
    Jetpack Compose
    The
    fi
    rst thing that stood out was how quickly I was
    able to create reusable UI, and the small amount of
    code that was required.
    *https://www.youtube.com/watch?v=kLA1QwDjioc

    View Slide

  52. compose.animation


    compose.foundation


    compose.material


    compose.material3


    compose.ui


    compose.runtime


    compose.compiler


    Jetpack Compose
    @cafonsomota

    View Slide

  53. 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

  54. 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

  55. 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

  56. 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

  57. 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

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

    View Slide

  59. 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

  60. 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

  61. WANTED
    For Multiplatform development

    View Slide

  62. How to develop a
    Multiplatform App?

    View Slide

  63. Multiplatform development
    Unsplash
    Native Flutter Other
    Kotlin Multiplatform

    View Slide

  64. Multiplatform development
    Unsplash
    Native Flutter Other
    Kotlin Multiplatform

    View Slide

  65. :androidApp
    @cafonsomota

    View Slide

  66. :androidWearApp
    @cafonsomota

    View Slide

  67. :desktopApp
    @cafonsomota

    View Slide

  68. :webApp

    View Slide

  69. :iOSApp
    @cafonsomota
    microsoftedge
    Masamasa3
    eberhardgross

    View Slide

  70. Multiplatform development
    @cafonsomota
    Unsplash
    Business logic


    Developed with Kotlin Multiplatform


    Shared across all platforms


    UI


    Developed with Compose


    Shared across Android and Desktop


    Watch, Web and iOS also use 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 Android/ Desktop

    View Slide

  75. Challenges
    @cafonsomota
    Multiplatform development
    Kotlin Multiplatform


    to the rescue!


    create your platform-speci
    fi
    c implementation


    use libraries that support Android/ Desktop


    add Multiplatform support to existing libraries

    View Slide

  76. Accompanist libraries (by Syer10)


    Set of UI libraries: github.com/Syer10/accompanist


    Kamel


    Async media loading library: github.com/alialbaali/Kamel


    See: github.com/alialbaali/Kamel/pull/14 (support for Ktor 2.0.0)


    moko-resources


    Provides access to resources: github.com/icerockdev/moko-resources


    PreCompose


    ViewModel, LiveData, etc.: github.com/Tlaster/PreCompose


    Kotlin Multiplatform
    @cafonsomota
    Libraries
    Android Desktop
    Android Desktop JS Native
    Android Desktop
    Android Desktop

    View Slide

  77. Resources


    Imagine that you want to show an image
    @cafonsomota
    Kotlin Multiplatform
    SharING Image resources

    View Slide

  78. Hello world!
    Resources


    Imagine that you want to show an image
    Kotlin Multiplatform
    SharING Image resources

    View Slide

  79. Hello world!
    Resources


    Imagine that you want to show an image
    Kotlin Multiplatform
    SharING Image resources
    Android
    Image(


    painterResource(id = R.drawable.kotlin),


    stringResource(id = R.string.kotlin)


    )

    View Slide

  80. Hello world!
    Image(


    painterResource(id = R.drawable.kotlin),


    stringResource(id = R.string.kotlin)


    )
    Resources


    Imagine that you want to show an image


    R class is Android speci
    fi
    c


    How to access an image in a Desktop app?
    Kotlin Multiplatform
    SharING Image resources
    Android

    View Slide

  81. Hello world!
    Image(


    painter = painterResource(“images/kotlin.png”),


    contentDescription = “Kotlin Logo”


    )
    Kotlin Multiplatform
    SharING Image resources
    Desktop
    Resources


    Imagine that you want to show an image


    R class is Android speci
    fi
    c


    How to access an image?

    View Slide

  82. Resources


    Imagine that you want to show an image


    R class is Android speci
    fi
    c


    How to access an image?


    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 Image resources

    View Slide

  83. @Composable


    public expect fun icAbout(): Painter
    shared-ui/commonMain/Icons.kt
    Kotlin Multiplatform
    SharING Image resources

    View Slide

  84. @Composable


    public expect fun icAbout(): Painter
    shared-ui/commonMain/Icons.kt
    Kotlin Multiplatform
    SharING Image resources

    View Slide

  85. shared-ui/commonMain/Icons.kt
    Kotlin Multiplatform
    SharING Image resources
    @Composable


    public actual fun icAbout() = painterResource(R.drawable.ic_about)
    shared-ui/androidApp/Icons.kt
    @Composable


    public expect fun icAbout(): Painter

    View Slide

  86. shared-ui/commonMain/Icons.kt
    Kotlin Multiplatform
    SharING Image resources
    @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

  87. @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 Image resources
    shared-ui/commonMain/Icons.kt

    View Slide

  88. Resources


    Imagine that you want to show some text
    @cafonsomota
    Kotlin Multiplatform
    SharING Strings

    View Slide

  89. Hello world!
    Resources


    Imagine that you want to show some text
    Kotlin Multiplatform
    SharING Strings
    Hello World 🌍

    View Slide

  90. Hello world!
    Text(


    text = stringResource(id = R.string.hello_world)


    )
    Kotlin Multiplatform
    Android
    Resources


    Imagine that you want to show some text
    SharING Strings
    Hello World 🌍

    View Slide

  91. Hello world!
    Resources


    Imagine that you want to show some 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

  92. Hello world!
    Kotlin Multiplatform
    Desktop
    SharING Strings
    Resources


    Imagine that you want to show some 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

  93. Hello world!
    Kotlin Multiplatform
    Desktop
    SharING Strings
    Resources


    Imagine that you want to show some text


    R class is Android speci
    fi
    c


    How to share a string between Android and Desktop?
    Text(


    text = “Hello World 🌍”


    )
    Hello World 🌍

    View Slide

  94. Hello world!
    mako-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

    View Slide

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

    View Slide

  96. Kotlin Multiplatform
    SharING Strings
    public expect fun getString(resId: StringResource): String
    shared-ui/commonMain/Resources.kt

    View Slide

  97. shared-ui/commonMain/Resources.kt
    Kotlin Multiplatform
    shared-ui/androidApp/Resources.kt
    SharING Strings
    actual fun getString(resId: StringResource): String {


    return StringDesc.Resource(resId).toString(appContext)


    }
    public expect fun getString(resId: StringResource): String

    View Slide

  98. Kotlin Multiplatform
    actual fun getString(resId: StringResource): String {


    return StringDesc.Resource(resId).localized()


    }


    shared-ui/desktopApp/Resources.kt
    SharING Strings
    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

  99. Hello world!
    mako-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
    Text(


    text = getString(MR.strings.hello_world)


    )
    Hello World 🌍

    View Slide

  100. @cafonsomota
    Web
    Multiplatform development
    Where are we?

    View Slide

  101. @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

  102. 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

  103. @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

  104. 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

  105. @cafonsomota
    iOS
    Multiplatform development
    Where are we?

    View Slide

  106. iOS
    Multiplatform development
    Where are we?
    microsoftedge
    Masamasa3

    View Slide

  107. iOS
    Multiplatform development
    microsoftedge
    Masamasa3
    Sharing logic


    Works without any issue


    Don’t forget to enable the new K/N Memory Model


    Sharing UI


    We will get there

    View Slide

  108. 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


    Web is giving its
    fi
    rst steps.


    iOS seems to be almost here!


    Multiplatform development
    @cafonsomota
    Key Takeaways

    View Slide

  109. Key Takeaways

    View Slide

  110. 🟢 Kotlin Multiplatform Mobile is stable-ish


    🟢 Compose Android is stable


    🟡 Compose Desktop is stable-ish


    🟠 Compose Web is alpha


    🔴 Compose iOS is starting


    🟠 Documentation and samples


    🟢 Community and support
    @cafonsomota
    Key Takeaways
    Multiplatform development

    View Slide

  111. Resources

    View Slide

  112. 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

  113. 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

  114. Questions and Answers

    View Slide

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

    View Slide

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

    View Slide