Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Adventure of Kotlin and Compose Through The Multiplatform World II

cmota
October 06, 2022

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.

cmota

October 06, 2022
Tweet

More Decks by cmota

Other Decks in Technology

Transcript

  1. 👨💻 Android GDE 🗣 Founder @GDGCoimbra ✍ Author @rwenderlich 🗺

    Loves travel, photography and running 🍻 Looking to taste a Moretti with all of you @cafonsomota
  2. 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
  3. 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
  4. Project Constraints Time: It hasn’t started yet, and you’re already

    behind schedule? Budget: Can you hire/allocate more people? @cafonsomota
  5. Platform How many platforms are you going to target? Android?

    iOS? Watch? Desktop? Web? @cafonsomota
  6. Be careful with the demo e ff ect! Framework dependent

    Missing features Slower performance Commitment to one framework Frameworks @cafonsomota
  7. What is… @cafonsomota Kotlin Multiplatform is an SDK developed in

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

    Kotlin allows you to share your business logic you decide what to share
  9. 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)
  10. 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? 🤔)
  11. Kotlin Multiplatform @cafonsomota KMP *diagram adapted from @AielloBrady Native Linux

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

    WASM JS JVM KMM Linux Windows (MinGW) macOS iOS tvOS watchOS
  13. 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
  14. 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
  15. 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
  16. 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” }
  17. 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 …
  18. 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
  19. 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)
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. 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
  26. 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
  27. 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
  28. Compose UI Web Compose Compiler Compose Runtime Compose UI Android

    Compose UI Desktop Compose UI Console Compose UI iOS Compose
  29. 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
  30. 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
  31. 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.
  32. 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
  33. 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
  34. Accompanist libraries (by Syer10) Set of UI libraries: github.com/Syer10/accompanist Kotlin

    Multiplatform @cafonsomota UI Libraries Android Desktop Native
  35. 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
  36. 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
  37. 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
  38. 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
  39. 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
  40. Hello world! Column( modifier = Modifier .fillMaxSize() horizontalAlignment = Alignment.CenterHorizontally,

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

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

    verticalArrangement = Arrangement.Center ) { Text( text = “Hello World 🌍" ) } Kotlin Multiplatform iOS Hello World 🌍 SharING UI
  43. 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
  44. Hello world! Resources Imagine that you want to display text

    Kotlin Multiplatform SharING Strings Hello World 🌍
  45. 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 🌍
  46. 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 🌍
  47. 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 🌍
  48. Hello world! How to share strings across all platforms? Android,

    Desktop, and iOS Kotlin Multiplatform SharING Strings @cafonsomota
  49. 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
  50. 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
  51. 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
  52. 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
  53. 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
  54. 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!
  55. 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!
  56. 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
  57. 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!
  58. 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
  59. 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
  60. @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
  61. 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
  62. 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
  63. 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!
  64. 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
  65. Hello world! Remote image Imagine that you want to show

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

    a remote image Solution touchlab-image Kotlin Multiplatform SharING Images
  67. 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!
  68. @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
  69. @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
  70. 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
  71. 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)
  72. 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
  73. 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 👀
  74. 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
  75. 🟢 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
  76. 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
  77. @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
  78. @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
  79. 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