Tweet
Tweet

Slide 1

Slide 1 text

Kotlin Multiplatform & Compose Multiplatform Starter kit for pragmatics Andrei Dotsenko

Slide 2

Slide 2 text

Android fan Work with Android for the last 10 years Geek and digger Like to play around with new technologies Traveler Passionate about discovering new places About me Love tech communities Has been part of several conferences and meetups. GDG organizer Family guy Most of my free time belongs to 󰙐🐶󰘲 Lived in different cultures Has been living in 󰎴󰑆󰏃󰐮 ✈ ❤

Slide 3

Slide 3 text

⚠ DISCLAIMER ⚠

Slide 4

Slide 4 text

⚠ DISCLAIMER 2 ⚠

Slide 5

Slide 5 text

Table of contents ● Key concepts and terminology ● How does that work ● KMP & Compose - current state ● Where to start ● Building blocks ● Limitations & Challenges ● Resources

Slide 6

Slide 6 text

Key concepts and terminology

Slide 7

Slide 7 text

Key concepts and terminology ● Kotlin Multiplatform ● KMP (or KMM?!) ● Jetpack Compose ● Compose Multiplatform

Slide 8

Slide 8 text

How does that work

Slide 9

Slide 9 text

How does that work Kotlin Multiplatform

Slide 10

Slide 10 text

How does that work Kotlin Multiplatform

Slide 11

Slide 11 text

How does that work Kotlin Multiplatform

Slide 12

Slide 12 text

How does that work Kotlin Multiplatform

Slide 13

Slide 13 text

How does that work Kotlin Multiplatform

Slide 14

Slide 14 text

How does that work Kotlin Multiplatform for mobile targets

Slide 15

Slide 15 text

How does that work ⁉

Slide 16

Slide 16 text

How does that work Jetpack Compose (Android)

Slide 17

Slide 17 text

Not a new kid on the block anymore

Slide 18

Slide 18 text

How does that work Jetpack Compose (Android)

Slide 19

Slide 19 text

How does that work Compose Multiplatform

Slide 20

Slide 20 text

How does that work Compose Multiplatform

Slide 21

Slide 21 text

How does that work Compose Multiplatform

Slide 22

Slide 22 text

How does that work Compose Multiplatform

Slide 23

Slide 23 text

How does that work Compose Multiplatform

Slide 24

Slide 24 text

How does that work Compose Multiplatform

Slide 25

Slide 25 text

How does that work expect-actual concept

Slide 26

Slide 26 text

How does that work expect-actual concept

Slide 27

Slide 27 text

How does that work expect-actual concept

Slide 28

Slide 28 text

How does that work expect-actual concept

Slide 29

Slide 29 text

How does that work expect-actual concept

Slide 30

Slide 30 text

KMP & Compose - current state

Slide 31

Slide 31 text

KMP & Compose - current state

Slide 32

Slide 32 text

Okay…

Slide 33

Slide 33 text

Where to start

Slide 34

Slide 34 text

Where to start OR + +

Slide 35

Slide 35 text

Where to start https://kmp.jetbrains.com/ https://github.com/Kotlin/kdoctor

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

Pre-configured project, that is ready for writing shared code Pre-configured build configurations for both Android and iOS

Slide 38

Slide 38 text

Shared Kotlin code

Slide 39

Slide 39 text

Xcode project (with info.plist, UIkit/SwiftUI entry point) Shared Kotlin code is added as .framework

Slide 40

Slide 40 text

Android-specific code (manifest, activity, etc.)

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

Ready for having fun

Slide 43

Slide 43 text

Beyond Hello World

Slide 44

Slide 44 text

Building blocks

Slide 45

Slide 45 text

Building blocks Network client DB / key-value storage Navigation Resources / localization ViewModels Native look & feel Maps DI

Slide 46

Slide 46 text

Network https://github.com/terrakok/kmp-awesome

Slide 47

Slide 47 text

Network https://github.com/terrakok/kmp-awesome

Slide 48

Slide 48 text

Network ● Ktor - mature network client by JetBrains. Feature-rich (HTTP requests, Bearer authentication, web sockets, etc.) ● Kotlinx.serialization - multi-format (JSON, Protobuf and many more) reflectionless serialization ● Ktorfit - Ktor-based REST API client (syntax mirrors Retrofit)

Slide 49

Slide 49 text

Network client DB / key-value storage Navigation Resources / localization ViewModels Native look & feel Maps DI ✅ Building blocks

Slide 50

Slide 50 text

DB / key-value storage ● SQLDelight - powerful SQL DB, made by Block (ex. Square) ● Realm - NoSQL database ● Multiplatform Settings - key-value data storage, supports KeyChain. Wrapper for SharedPreferences and NSUserDefaults.

Slide 51

Slide 51 text

Building blocks Network client DB / key-value storage Navigation Resources / localization ViewModels Native look & feel Maps DI ✅ ✅

Slide 52

Slide 52 text

Navigation & ViewModels ● Compose Multiplatform Navigation - official solution from Jetbrains. Familiar APIs (mirrors Jetpack Compose Navigation), but experimental and has limitations (no deep links support, limited back handler) ● Compose Multiplatform ViewModel - official solution from Jetbrains. Familiar APIs (mirrors Android ViewModel), but experimental and has limitations (additional setup required for iOS and web targets) ● Decompose - library for breaking down your code into lifecycle-aware business logic components (aka BLoC), with routing functionality. ● PreCompose - navigation, ViewModel, inspired by Jetpack Lifecycle, ViewModel, LiveData and Navigation, provides similar (or even the same) components

Slide 53

Slide 53 text

Building blocks Network client DB / key-value storage Navigation Resources / localization ViewModels Native look & feel Maps DI ✅ ✅ ✅ ✅

Slide 54

Slide 54 text

Dependency Injection ● Koin - lightweight dependency injection framework. Koin is a DSL, a light container and a pragmatic API ● Kodein - very simple and yet very useful dependency retrieval container

Slide 55

Slide 55 text

Building blocks Network client DB / key-value storage Navigation Resources / localization ViewModels Native look & feel Maps DI ✅ ✅ ✅ ✅ ✅

Slide 56

Slide 56 text

Resources / localization ● Compose Multiplatform Resources - official solution from Jetbrains. Experimental, has several limitations (big raw files, multi module). Supports language, density and theme qualifiers. Custom fonts too. ● MOKO Resources - system resources manager that provides access to the resources on iOS & Android with the support of the default system localization

Slide 57

Slide 57 text

Building blocks Network client DB / key-value storage Navigation Resources / localization ViewModels Native look & feel Maps DI ✅ ✅ ✅ ✅ ✅ (almost) ✅

Slide 58

Slide 58 text

Native look & feel 🏼 Compose Multiplatform release changelogs:

Slide 59

Slide 59 text

Native look & feel 🏼 Compose Cupertino - provides various UI components for making native-looking iOS applications, including: ● cupertino - Compose Multiplatform implementation of iOS-like Cupertino theme and widgets ● cupertino-native - UIKit native wrappers for Cupertino Widgets. Allows to seamlessly use some UIKit widgets for iOS ● cupertino-adaptive - adaptive theme and wrappers for Cupertino and Material3 widgets. ● cupertino-icons-extended - more than 800 most used monochrome Apple SF Symbols as Compose ImageVectors ● cupertino-decompose - iOS-like swipe-back animation for the 'predictive back' navigation feature (native-feeling or truly native page transitions and swipe gestures).

Slide 60

Slide 60 text

Building blocks Network client DB / key-value storage Navigation Resources / localization ViewModels Native look & feel Maps DI ✅ ✅ ✅ ✅ ✅ (almost) ✅ 🏼

Slide 61

Slide 61 text

Maps Wonderous Compose

Slide 62

Slide 62 text

Maps https://github.com/ShreyashKore/wonderous_compose Wonderous Compose - is a port of Wonderous (Flutter) in Compose Multiplatform. Map View demonstrates how KMP and Compose's interoperability layer can be used to embed native UIs in Compose. ● For Android - Google Map compose library is used. ● For IOS - MKMapView is used. ● For web - Wasm Html interop library is used to draw DOM elements on canvas. ● For desktop - uses OpenStreetMap data to draw map tiles on Compose Canvas.

Slide 63

Slide 63 text

Building blocks Network client DB / key-value storage Navigation Resources / localization ViewModels Native look & feel Maps DI ✅ ✅ ✅ ✅ ✅ (almost) ✅ 🏼

Slide 64

Slide 64 text

Pro tip Unofficial wizard. Creates the project with preselected dependencies https://terrakok.github.io/Compose-Multiplatform-Wizard/

Slide 65

Slide 65 text

Limitations & Challenges

Slide 66

Slide 66 text

Limitations & Challenges ● Platform-specific APIs (e.g. Share Extension on iOS, in-app purchases, etc.) No magic here 󰤇 ● Compose Multiplatform iOS performance != native iOS performance ● Configuring build scripts and managing dependencies is an adventure ● Mac is required for building iOS or MacOS targets ● Wouldn’t recommend for beginners with no Android or iOS experience ● Under active development ● Best practices have not yet been settled ● (sometimes) It’s hard to convince iOS devs to try it out

Slide 67

Slide 67 text

Resources ● https://www.jetbrains.com/help/kotlin-multiplatform-dev/ ● https://github.com/Kotlin/kdoctor ● https://github.com/ShreyashKore/wonderous_compose ● https://github.com/terrakok/kmp-awesome ● https://github.com/touchlab ● https://terrakok.github.io/Compose-Multiplatform-Wizard/ ● https://youtu.be/FWVi4aV36d8?si=AfMmlVhkojU7j5j6 ● https://youtu.be/EKFdYgjCNOs ● https://medium.com/@uwaisalqadri/kotlin-multiplatform-mobile-concept-of-expect- actual-f967d2e948ce ● https://t.me/kotlinmpp

Slide 68

Slide 68 text

Thank you! @dosssik linkedin.com/in/andrei-dotsenko