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

The Adventure of Kotlin and Compose Through The...

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

    Loves travel, photography and running 🍻 Looking to taste a Sans Culottes 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. Kotlin Multiplatform @cafonsomota KMP *diagram adapted from @AielloBrady Native Linux

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

    WASM JS JVM KMM Linux Windows (MinGW) macOS iOS tvOS watchOS
  12. 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
  13. 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
  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 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” }
  16. 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 …
  17. 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
  18. 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)
  19. 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
  20. 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
  21. 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
  22. 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
  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 and Desktop Watch, Web and iOS also use 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 Android/ Desktop
  33. 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
  34. 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
  35. Resources Imagine that you want to show an image @cafonsomota

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

    image Kotlin Multiplatform SharING Image resources
  37. 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) )
  38. 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
  39. 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?
  40. 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
  41. 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
  42. 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
  43. @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
  44. Hello world! Resources Imagine that you want to show some

    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 show some text SharING Strings Hello World 🌍
  46. 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 🌍
  47. 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 🌍
  48. 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 🌍
  49. 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
  50. 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
  51. 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
  52. 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 🌍
  53. @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
  54. @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
  55. 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
  56. 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
  57. 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
  58. 🟢 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
  59. 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