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

The Adventure of Kotlin and Compose Through The Multiplatform World

D8a3623b157508fecdae1f8e756f362f?s=47 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.

D8a3623b157508fecdae1f8e756f362f?s=128

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
  2. 👨💻 Android GDE 🗣 Founder @GDGCoimbra ✍ Author @rwenderlich 🗺

    Loves travel, photography and running 🍻 Looking to taste a Sans Culottes with all of you @cafonsomota
  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
  4. How to develop an App?

  5. None
  6. None
  7. None
  8. None
  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
  10. None
  11. None
  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
  13. None
  14. None
  15. Project Constraints Time: It hasn’t started yet, and you’re already

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

    iOS? Watch? Desktop? Web? @cafonsomota
  18. None
  19. None
  20. @chiziaruhoma

  21. Be careful with the demo e ff ect! Framework dependent

    Missing features Slower performance Commitment to one framework Frameworks @cafonsomota
  22. None
  23. What is… @cafonsomota Kotlin Multiplatform

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

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

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

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

    Kotlin allows you to share your business logic you decide what to share
  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)
  29. Kotlin Multiplatform @cafonsomota KMP *diagram adapted from @AielloBrady

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

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

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

    WASM JS JVM KMM Linux Windows (MinGW) macOS iOS tvOS watchOS
  33. Kotlin Multiplatform @cafonsomota *Android Studio: Kotlin Multiplatform Mobile (plugin) How

    to Start
  34. src/commonMain/sample/Platform.kt :shared expect object Platform { val name: String }

    Platform-specific code @cafonsomota
  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
  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
  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
  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” }
  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 …
  40. SQLDelight ktor kotlinx.serialization MVP kotlinx.coroutines kotlin.test Activity View LazyColumn LazyHStack

    android iOS web <web stuff>
  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
  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)
  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
  44. Apps in production @cafonsomota Kotlin Multiplatform

  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
  46. WANTED For Multiplatform development

  47. None
  48. developer.android.com/jetpack/compose

  49. Apps in production @cafonsomota Jetpack Compose

  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
  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
  52. compose.animation compose.foundation compose.material compose.material3 compose.ui compose.runtime compose.compiler Jetpack Compose @cafonsomota

  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
  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
  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
  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
  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
  58. Compose UI Web Compose Compiler Compose Runtime Compose UI Android

    Compose UI Desktop Compose UI Console Compose UI iOS Compose
  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!
  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
  61. WANTED For Multiplatform development

  62. How to develop a Multiplatform App?

  63. Multiplatform development Unsplash Native Flutter Other Kotlin Multiplatform

  64. Multiplatform development Unsplash Native Flutter Other Kotlin Multiplatform

  65. :androidApp @cafonsomota

  66. :androidWearApp @cafonsomota

  67. :desktopApp @cafonsomota

  68. :webApp

  69. :iOSApp @cafonsomota microsoftedge Masamasa3 eberhardgross

  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
  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.
  72. Challenges @cafonsomota Multiplatform development Kotlin Multiplatform to the rescue!

  73. Challenges @cafonsomota Multiplatform development Kotlin Multiplatform to the rescue! create

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

    your platform-speci fi c implementation use libraries that support Android/ Desktop
  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
  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
  77. Resources Imagine that you want to show an image @cafonsomota

    Kotlin Multiplatform SharING Image resources
  78. Hello world! Resources Imagine that you want to show an

    image Kotlin Multiplatform SharING Image resources
  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) )
  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
  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?
  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
  83. @Composable public expect fun icAbout(): Painter shared-ui/commonMain/Icons.kt Kotlin Multiplatform SharING

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

    Image resources
  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
  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
  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
  88. Resources Imagine that you want to show some text @cafonsomota

    Kotlin Multiplatform SharING Strings
  89. Hello world! Resources Imagine that you want to show some

    text Kotlin Multiplatform SharING Strings Hello World 🌍
  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 🌍
  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 🌍
  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 🌍
  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 🌍
  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
  95. public expect fun getString(resId: StringResource): String Kotlin Multiplatform SharING Strings

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

    shared-ui/commonMain/Resources.kt
  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
  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
  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 🌍
  100. @cafonsomota Web Multiplatform development Where are we?

  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
  102. Div({ style { position(Position.Relative) width(100.percent) height(400.px) flexGrow(1.0) marginBottom(10.px) } })

    { Image(resource = image) } Web Multiplatform development
  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
  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
  105. @cafonsomota iOS Multiplatform development Where are we?

  106. iOS Multiplatform development Where are we? microsoftedge Masamasa3

  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
  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
  109. Key Takeaways

  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
  111. Resources

  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
  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
  114. Questions and Answers

  115. WANTED For Multiplatform development The Adventure of Kotlin and Compose

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

    Through the Multiplatform World @cafonsomota