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.

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?
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
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
15. Project Constraints Time: It hasn’t started yet, and you’re already behind schedule? Budget: Can you hire/allocate more people? @cafonsomota
17. Platform How many platforms are you going to target? Android? iOS? Watch? Desktop? Web? @cafonsomota
20. @chiziaruhoma
21. Be careful with the demo e ff ect! Framework dependent Missing features Slower performance Commitment to one framework Frameworks @cafonsomota
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
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