Slide 1

Slide 1 text

Kotlin and Compose The adventure of Through the Multiplatform World @cafonsomota Volume II

Slide 2

Slide 2 text

👨💻 Android GDE 🗣 Founder @GDGCoimbra ✍ Author @rwenderlich 🗺 Loves travel, photography and running 🍻 Looking to taste a Moretti with all of you @cafonsomota

Slide 3

Slide 3 text

🎬 Slides speakerdeck.com/cmota/the-adventure-of-kotlin-and-compose-through-multiplatform-II 💻 Code github.com/cmota/unsplash 📚 Book raywenderlich.com/books/kotlin-multiplatform-by-tutorials/v1.0 🍿 YouTube bit.ly/cmota-youtube Materials @cafonsomota

Slide 4

Slide 4 text

How to develop an App?

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Project Constraints Time: It hasn’t started yet, and you’re already behind schedule? Budget: Can you hire/allocate more people? @cafonsomota

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Platform How many platforms are you going to target? Android? iOS? Watch? Desktop? Web? @cafonsomota

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

@chiziaruhoma

Slide 21

Slide 21 text

Be careful with the demo e ff ect! Framework dependent Missing features Slower performance Commitment to one framework Frameworks @cafonsomota

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

What is… @cafonsomota Kotlin Multiplatform

Slide 24

Slide 24 text

What is… @cafonsomota Kotlin Multiplatform is an SDK

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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)

Slide 29

Slide 29 text

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? 🤔)

Slide 30

Slide 30 text

Kotlin Multiplatform @cafonsomota KMP *diagram adapted from @AielloBrady

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Kotlin Multiplatform @cafonsomota KaMP Kit: github.com/touchlab/KaMPKit How to Start

Slide 36

Slide 36 text

src/commonMain/sample/Platform.kt :shared expect object Platform { val name: String } Platform-specific code @cafonsomota

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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” }

Slide 41

Slide 41 text

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 …

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

github.com/terrakok/kmm-awesome

Slide 45

Slide 45 text

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)

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

Apps in production @cafonsomota Kotlin Multiplatform

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

WANTED For Multiplatform development

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

developer.android.com/jetpack/compose

Slide 52

Slide 52 text

Apps in production @cafonsomota Jetpack Compose

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

compose.animation compose.foundation compose.material compose.material3 compose.ui compose.runtime compose.compiler Jetpack Compose @cafonsomota

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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!

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

WANTED For Multiplatform development

Slide 64

Slide 64 text

How to develop a Multiplatform App?

Slide 65

Slide 65 text

:androidApp @cafonsomota

Slide 66

Slide 66 text

:androidWearApp @cafonsomota

Slide 67

Slide 67 text

:desktopApp @cafonsomota

Slide 68

Slide 68 text

:iosAppCompose @cafonsomota

Slide 69

Slide 69 text

:webApp

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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.

Slide 72

Slide 72 text

Challenges @cafonsomota Multiplatform development Kotlin Multiplatform to the rescue!

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

Accompanist libraries (by Syer10) Set of UI libraries: github.com/Syer10/accompanist Kotlin Multiplatform @cafonsomota UI Libraries Android Desktop Native

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

moko-resources Provides access to resources: github.com/icerockdev/moko-resources Kotlin Multiplatform @cafonsomota UI Libraries Android Desktop JS Native

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

Resources Imagine that you want to display text @cafonsomota Kotlin Multiplatform SharING Strings

Slide 88

Slide 88 text

Hello world! Resources Imagine that you want to display text Kotlin Multiplatform SharING Strings Hello World 🌍

Slide 89

Slide 89 text

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 🌍

Slide 90

Slide 90 text

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 🌍

Slide 91

Slide 91 text

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 🌍

Slide 92

Slide 92 text

Hello world! How to share strings across all platforms? Android, Desktop, and iOS Kotlin Multiplatform SharING Strings @cafonsomota

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

shared-ui/commonMain/Resources.kt public expect fun getString(resId: StringResource): String

Slide 95

Slide 95 text

shared-ui/commonMain/Resources.kt public expect fun getString(resId: StringResource): String

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

Hello world! Kotlin Multiplatform SharING Strings Text( text = getString(MR.strings.hello_world) ) Hello World 🌍 Hello World 🌍 Hello World 🌍

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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!

Slide 104

Slide 104 text

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!

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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!

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

@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

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

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!

Slide 115

Slide 115 text

Hello world! Kotlin Multiplatform SharING Images LocalImage( imageResourceName = MR.images.logo.path modifier = modifier ) Hello World 🌍 Hello world!

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

Hello world! Remote image Imagine that you want to show a remote image Solution touchlab-image Kotlin Multiplatform SharING Images

Slide 119

Slide 119 text

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!

Slide 120

Slide 120 text

Hello world! Kotlin Multiplatform SharING Images RemoteImage( imageUrl = image.url modifier = modifier ) Hello World 🌍 Hello world!

Slide 121

Slide 121 text

@cafonsomota Web Multiplatform development Where are we?

Slide 122

Slide 122 text

@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

Slide 123

Slide 123 text

Div({ style { position(Position.Relative) width(100.percent) height(400.px) flexGrow(1.0) marginBottom(10.px) } }) { Image(resource = image) } Web Multiplatform development

Slide 124

Slide 124 text

@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

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

@cafonsomota iOS Multiplatform development Where are we?

Slide 127

Slide 127 text

iOS Multiplatform development Where are we?

Slide 128

Slide 128 text

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)

Slide 129

Slide 129 text

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

Slide 130

Slide 130 text

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 👀

Slide 131

Slide 131 text

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

Slide 132

Slide 132 text

Key Takeaways

Slide 133

Slide 133 text

🟢 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

Slide 134

Slide 134 text

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

Slide 135

Slide 135 text

Droidcon Italy

Slide 136

Slide 136 text

@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

Slide 137

Slide 137 text

@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

Slide 138

Slide 138 text

Resources

Slide 139

Slide 139 text

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

Slide 140

Slide 140 text

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

Slide 141

Slide 141 text

Unsplash github.com/cmota/unsplash DroidconKotlin by Touchlab github.com/touchlab/DroidconKotlin People In Space github.com/joreilly/PeopleInSpace Resources Kotlin Multiplatform and Compose

Slide 142

Slide 142 text

Questions and Answers

Slide 143

Slide 143 text

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

Slide 144

Slide 144 text

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